Skip to content

Commit f9042ec

Browse files
matt-landersmatt-landers
committed
Added tutorial for consent mode
1 parent ac9e951 commit f9042ec

16 files changed

Lines changed: 509 additions & 0 deletions

File tree

‎tutorials/4-consent-mode/README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# GA4 Tutorial Series - Consent Mode
2+
3+
This folder contains the code used in the
4+
[Consent Mode tutorial video](https://youtu.be/MqAEbshMv84) on YouTube
5+
6+
## Run the current version of the website
7+
8+
You must install [Deno](https://deno.land) to run the website code.
9+
10+
Once you install Deno, run the local web server with the following command:
11+
12+
```
13+
deno task start
14+
```
15+
16+
Then, open [http://localhost](http://localhost) in your web browser.
17+
18+
# Join our community
19+
20+
💬 [Join](https://discord.gg/65mah7ZZsG) the official GA Discord server\
21+
📝 [Sign up](https://groups.google.com/g/google-analytics-developer-newsletter)
22+
for the Google Analytics Developer Newsletter\
23+
📄 [Explore](https://developers.google.com/analytics/) GA4 developer
24+
documentation

‎tutorials/4-consent-mode/deno.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"tasks": {
3+
"start": "deno run -A --watch=src/public/ src/index.ts"
4+
},
5+
"fmt": {
6+
"files": {
7+
"include": ["src/"]
8+
}
9+
}
10+
}

‎tutorials/4-consent-mode/src/deno.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"tasks": {
3+
"start": "deno run -A --watch=public/ index.ts"
4+
}
5+
}

‎tutorials/4-consent-mode/src/deno.lock‎

Lines changed: 45 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tutorials/4-consent-mode/src/index.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { configure, renderFile } from "https://deno.land/x/eta@v1.11.0/mod.ts";
2+
3+
const __dirname = new URL(".", import.meta.url).pathname;
4+
5+
const viewPath = [
6+
`${__dirname}/public`,
7+
`${__dirname}/public/partials`,
8+
`${__dirname}/public/layouts`,
9+
];
10+
11+
configure({ views: viewPath });
12+
13+
const server = Deno.listen({ port: 80 });
14+
15+
console.log("File server running on http://localhost:80/");
16+
17+
for await (const conn of server) {
18+
handleHttp(conn).catch(console.error);
19+
}
20+
21+
async function handleHttp(conn: Deno.Conn) {
22+
const httpConn = Deno.serveHttp(conn);
23+
for await (const requestEvent of httpConn) {
24+
const url = new URL(requestEvent.request.url);
25+
let filepath = decodeURIComponent(url.pathname);
26+
if (filepath === "/") {
27+
filepath = "index.eta";
28+
} else if (filepath.toLocaleLowerCase().indexOf(".") <= 0) {
29+
filepath = `${filepath}.eta`;
30+
}
31+
32+
let file;
33+
let response;
34+
try {
35+
console.log(filepath);
36+
if (filepath.indexOf(".eta") > 0) {
37+
response = new Response(await renderFile(filepath, {}), {
38+
headers: { "content-type": "text/html" },
39+
});
40+
} else {
41+
file = await Deno.open(__dirname + "public" + filepath, {
42+
read: true,
43+
});
44+
const readableStream = file.readable;
45+
response = new Response(readableStream);
46+
}
47+
} catch (e) {
48+
console.error(e);
49+
response = new Response("404 Not Found", { status: 404 });
50+
return;
51+
}
52+
53+
await requestEvent.respondWith(response);
54+
}
55+
}

‎tutorials/4-consent-mode/src/public/about.eta‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<% layout("layout", { title: "About - GA Tutorials" }) %>
2+
3+
<%~ includeFile("nav") %>
4+
5+
<main class="container-lg pt-3 pb-5">
6+
<h1 class="pt-4 pb-2">About the tutorial series</h1>
7+
<a class="twitter-share-button" target="_blank"
8+
href="https://twitter.com/intent/tweet?text=%23HelloAnalytics%20%23GA4TutorialSeries">
9+
<span>Tweet</span></a>
10+
<div class="pt-4 content-width">
11+
<p>The Google Analytics 4 Tutorials series is a collection of videos created by the Google Analytics team to
12+
help you learn how to use Google Analytics 4 and measure your website performance.</p>
13+
<p>The videos in the series cover a wide range of topics, from setting up a Google Analytics 4 property to
14+
using advanced features like ecommerce and user ID.</p>
15+
<p>All the videos in the series can be found on the
16+
<a href="https://www.youtube.com/channel/UCJ5UyIAa5nEGksjcdp43Ixw" target="_blank">Google
17+
Analytics YouTube channel</a>, in the <a
18+
href="https://youtube.com/playlist?list=PLI5YfMzCfRtZ4bHJJDl_IJejxMwZFiBwz" target="_blank">Google
19+
Analytics 4
20+
Tutorial playlist</a>. In addition to the
21+
videos, the code for this website and other helpful resources are available in the <a
22+
href="https://github.com/googleanalytics" target="_blank">Google Analytics GitHub repository</a>.
23+
</p>
24+
<p>For more information about Google Analytics, including new features and instructions,
25+
see the Google Analytics <a href="https://support.google.com/analytics" target="_blank">help
26+
center</a> and <a href="https://developers.google.com/analytics/devguides/collection/ga4"
27+
target="_blank">developer site</a>.</p>
28+
</div>
29+
</main>
30+
31+
<%~ includeFile("footer.eta") %>
32+

‎tutorials/4-consent-mode/src/public/images/favicon.png‎

415 Bytes
Loading

‎tutorials/4-consent-mode/src/public/images/google-analytics.jpg‎

17.6 KB
Loading

‎tutorials/4-consent-mode/src/public/index.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
.twitter-share-button,
2+
.twitter-share-button:hover {
3+
display: inline-block;
4+
background-color: #1DA1F2;
5+
border-radius: 9999px;
6+
color: white;
7+
text-decoration: none;
8+
padding: 1px 12px;
9+
font-size: 13px;
10+
line-height: 26px;
11+
font-family: "Helvetica Neue", Arial, sans-serif;
12+
height: 28px;
13+
font-weight: 500;
14+
}
15+
16+
.twitter-share-button span {
17+
margin-left: 3px;
18+
}
19+
20+
.twitter-share-button i {
21+
position: relative;
22+
top: 2px;
23+
display: inline-block;
24+
width: 14px;
25+
height: 14px;
26+
background: transparent 0 0 no-repeat;
27+
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E)
28+
}
29+
30+
main {
31+
min-height: 75vh;
32+
}
33+
34+
.divider {
35+
height: 1rem;
36+
background-color: rgba(0, 0, 0, .1);
37+
border: solid rgba(0, 0, 0, .15);
38+
border-width: 1px 0;
39+
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
40+
}
41+
42+
.cookie-consent-banner {
43+
display: none;
44+
position: fixed;
45+
bottom: 0;
46+
left: 0;
47+
right: 0;
48+
background-color: #f8f9fa;
49+
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
50+
color: black;
51+
padding: 15px;
52+
font-size: 14px;
53+
text-align: center;
54+
z-index: 1000;
55+
}
56+
57+
.cookie-consent-button {
58+
border: none;
59+
padding: 8px 16px;
60+
text-align: center;
61+
text-decoration: none;
62+
display: inline-block;
63+
font-size: 14px;
64+
margin: 4px 2px;
65+
cursor: pointer;
66+
border-radius: 4px;
67+
}
68+
69+
.cookie-consent-button:hover {
70+
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
71+
}
72+
73+
.cookie-consent-button:active {
74+
opacity: .5;
75+
}
76+
77+
.cookie-consent-button.btn-success {
78+
background-color: #34a853;
79+
color: white;
80+
}
81+
82+
.cookie-consent-button.btn-grayscale {
83+
background-color: #dfe1e5;
84+
color: black;
85+
}
86+
87+
.cookie-consent-button.btn-outline {
88+
background-color: #e6f4ea;
89+
color: #34a853;
90+
}
91+
92+
.cookie-consent-options {
93+
display: flex;
94+
justify-content: center;
95+
flex-wrap: wrap;
96+
margin-bottom: 10px;
97+
}
98+
99+
.cookie-consent-options label {
100+
margin: 0 10px;
101+
font-size: 14px;
102+
}
103+
104+
.cookie-consent-options input {
105+
margin-right: 5px;
106+
}

‎tutorials/4-consent-mode/src/public/index.eta‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<% layout("layout", { title: "Home | Google Analytics Tutorials" }) %>
2+
3+
<%~ includeFile("nav") %>
4+
5+
<main class="container-lg pt-3 pb-5">
6+
<h1 class="pt-4 pb-2">Hello Analytics!</h1>
7+
<a class="twitter-share-button" target="_blank"
8+
href="https://twitter.com/intent/tweet?text=%23HelloAnalytics%20%23GA4TutorialSeries">
9+
<span>Tweet</span></a>
10+
<div class="pt-4 content-width">
11+
<p>Welcome to the Google Analytics 4 Tutorial series!</p>
12+
<p>In the series, we will build out this website to show you how to use Google Analytics 4 to measure your
13+
website activity and performance. All of the code for the series can be found on the Google Analytics
14+
GitHub account.</p>
15+
<img src="/images/google-analytics.jpg" />
16+
<p><span>Do you have any questions or topics that you'd like us to cover?</span> Please add your comments to
17+
one of the videos in the series, and we will aim to cover it in a future video.</p>
18+
<p>To learn more about this website and the series as a whole, check out <a href="/about">the About
19+
page</a>.</p>
20+
</div>
21+
</main>
22+
23+
<%~ includeFile("footer") %>
24+
25+

0 commit comments

Comments
 (0)