Skip to content

Commit 0a4fc3d

Browse files
norberttechnorberttech
committed
Replaced third party cookie banner provider with a custom solution
1 parent 4251a58 commit 0a4fc3d

File tree

4 files changed

+125
-20
lines changed

4 files changed

+125
-20
lines changed

‎web/landing/assets/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import '@oddbird/popover-polyfill';
22
import './bootstrap.js';
33
import 'htmx.org'
4-
import 'flowbite';
4+
import 'flowbite';

‎web/landing/assets/controllers/cookie_consent_controller.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { Controller } from "@hotwired/stimulus";
2+
3+
/* stimulusFetch: 'lazy' */
4+
export default class extends Controller {
5+
static targets = ["banner", "button"];
6+
static values = {
7+
gaId: String
8+
}
9+
10+
connect() {
11+
const consentStatus = localStorage.getItem("cookie-consent");
12+
if (consentStatus) {
13+
this.bannerTarget.classList.add("hidden");
14+
// If accepted previously, inject GA
15+
if (consentStatus === "accepted") {
16+
this.consentGranted();
17+
this.showButton();
18+
}
19+
} else {
20+
this.showBanner();
21+
}
22+
}
23+
24+
accept() {
25+
localStorage.setItem("cookie-consent", "accepted");
26+
this.consentGranted();
27+
this.hideBanner();
28+
this.showButton()
29+
}
30+
31+
reject() {
32+
localStorage.setItem("cookie-consent", "rejected");
33+
gtag("consent", "update", {
34+
ad_user_data: 'denied',
35+
ad_personalization: 'denied',
36+
ad_storage: 'denied',
37+
analytics_storage: 'denied'
38+
});
39+
this.hideBanner();
40+
this.showButton();
41+
}
42+
43+
consentGranted() {
44+
gtag("consent", "update", {
45+
ad_user_data: 'granted',
46+
ad_personalization: 'granted',
47+
ad_storage: 'granted',
48+
analytics_storage: 'granted'
49+
});
50+
}
51+
52+
showBanner() {
53+
this.bannerTarget.classList.remove("hidden");
54+
this.hideButton();
55+
}
56+
57+
hideBanner() {
58+
this.bannerTarget.classList.add("hidden");
59+
}
60+
61+
62+
showButton() {
63+
this.buttonTarget.classList.remove("hidden");
64+
}
65+
66+
hideButton() {
67+
this.buttonTarget.classList.add("hidden");
68+
}
69+
}

‎web/landing/assets/images/icons/cookie.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎web/landing/templates/base.html.twig‎

Lines changed: 43 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -44,20 +44,16 @@
4444
dataLayer.push(arguments);
4545
}
4646
gtag("consent", "default", {
47-
ad_storage: "denied",
48-
ad_user_data: "denied",
49-
ad_personalization: "denied",
50-
analytics_storage: "denied",
51-
functionality_storage: "denied",
52-
personalization_storage: "denied",
53-
security_storage: "granted",
54-
wait_for_update: 2000,
47+
ad_user_data: 'denied',
48+
ad_personalization: 'denied',
49+
ad_storage: 'denied',
50+
analytics_storage: 'denied'
5551
});
56-
gtag("set", "ads_data_redaction", true);
57-
gtag("set", "url_passthrough", true);
52+
gtag('js', new Date());
53+
gtag('config', '{{ google_analytics_id }}');
5854
</script>
55+
<script async src="https://www.googletagmanager.com/gtag/js?id={{ google_analytics_id }}">gtag('config', '{{ google_conversion_tag }}');</script>
5956

60-
<script id="cookiepal" type="text/javascript" src="https://cdn.cookiepal.io/client_data/944894ea-9256-4fa5-817f-349b548cf43f/script.js"></script>
6157
{% block javascripts %}
6258
<script>
6359
window.flow = {
@@ -67,14 +63,6 @@
6763
{{ importmap() }}
6864
{% endblock %}
6965
</head>
70-
<script async src="https://www.googletagmanager.com/gtag/js?id={{ google_analytics_id }}">gtag('config', '{{ google_conversion_tag }}');</script>
71-
<script>
72-
window.dataLayer = window.dataLayer || [];
73-
function gtag(){dataLayer.push(arguments);}
74-
gtag('js', new Date());
75-
76-
gtag('config', '{{ google_analytics_id }}');
77-
</script>
7866
<body class="scroll-smooth bg-black text-white">
7967
<header class="py-2 text-white bg-blue-200">
8068
<div class="mx-auto max-w-screen-xl px-4 flex items-center justify-between">
@@ -157,5 +145,41 @@
157145
<a href="https://github.com/flow-php">&copy; Copyright {{ 'now' | date('Y') }} Flow PHP</a>
158146
</div>
159147
</footer>
148+
149+
<div data-controller="cookie-consent" data-cookie-consent-ga-id-value="{{ google_analytics_id }}">
150+
<div data-cookie-consent-target="banner" class="hidden fixed bottom-0 left-0 w-full bg-black text-white text-sm p-5 flex flex-col items-center justify-center space-y-2 md:space-y-0 md:flex-row md:justify-between z-50">
151+
<span>
152+
We use cookies to understand how you interact with our site, so we can improve our content and tailor it to your interests.<br/>
153+
By clicking “Accept” you’ll help us analyze user behavior, deliver more relevant features, and optimize your overall experience.
154+
</span>
155+
156+
<div class="flex space-x-4 mt-2 md:mt-0">
157+
<button
158+
type="button"
159+
class="border border-blue-100 hover:border-blue-200 text-white px-4 py-2 rounded"
160+
data-action="click->cookie-consent#reject"
161+
>
162+
Reject All
163+
</button>
164+
<button
165+
type="button"
166+
class="bg-blue-100 hover:bg-blue-200 text-white px-4 py-2 rounded ml-4"
167+
data-action="click->cookie-consent#accept"
168+
>
169+
Accept All
170+
</button>
171+
</div>
172+
</div>
173+
174+
<div class="fixed bottom-4 left-4 bg-orange-100 rounded-md shadow hidden" data-cookie-consent-target="button">
175+
<button
176+
type="button"
177+
class="fixed bottom-4 left-4 bg-orange-100 text-white p-2 rounded-full shadow-lg hover:bg-orange-200 focus:outline-none focus:ring-2 focus:ring-orange-100 focus:ring-opacity-50"
178+
data-action="click->cookie-consent#showBanner"
179+
>
180+
<img src="{{ asset('images/icons/cookie.svg') }}" width="32" height="32" alt="scroll back to top" class="inline text-black">
181+
</button>
182+
</div>
183+
</div>
160184
</body>
161185
</html>

0 commit comments

Comments
 (0)