feat(bf): gate the Google Ads tag behind a consent banner; fire the buy-click conversion proxy

/odoo-black-friday/ only, page-side. No Odoo change, no ad-account change.

- static/ads-consent.js (new): default-DENY consent; nothing loads and no request
  fires until Accept. On Decline (or switching to Decline later) the _gcl_au/_gcl_aw
  cookies are cleared. A footer "Cookie settings" link reopens the banner.
- conversion: on submit of either /shop/post_basket buy form (offer block + On the
  Rise card), gtag('event','conversion',{send_to: AW-18065522009/vnDUCPDxt7AdENn6p6ZD})
  then form.submit() from event_callback, with a 700 ms hard-timeout fallback so a
  blocked tag can never swallow the buy. No consent / no tag -> native POST untouched.
- privacy.html: new "Advertising cookies" disclosure (what, why, how to decline).
- Plausible Buy marks and the checkout-side Purchase event untouched.
This commit is contained in:
webmaster committed 2026-11-02 09:12:08 +00:00
1 parent f119f041f0
commit ae97f4f5eb
3 files changed
+310 -2

No files matched your search

+136 -1
View File
@@ -382,6 +382,110 @@
outline-offset: 2px;
border-radius: var(--radius);
}
/* ---- Google Ads consent banner (page-scoped; additive). Default DENY: the tag does
not load until the visitor accepts. Fallback colour values guard the first paint,
before /style.css (loaded async) defines the tokens. ---- */
.ads-consent {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
background: var(--midnight, #0d1b2e);
color: var(--cream, #f4f0e8);
border-top: 2px solid var(--brass, #c9a227);
box-shadow: 0 -8px 30px rgba(13, 27, 46, 0.28);
}
.ads-consent[hidden] {
display: none;
}
.ads-consent-inner {
width: 86%;
max-width: 1200px;
margin: 0 auto;
padding: 1rem 0;
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
.ads-consent-title {
font-family: "Marcellus", Georgia, serif;
font-size: 1rem;
letter-spacing: 0.03em;
color: var(--brass-bright);
margin: 0;
flex: 0 0 auto;
}
.ads-consent-text {
font-size: 0.85rem;
line-height: 1.5;
color: rgba(244, 240, 232, 0.9);
margin: 0;
flex: 1 1 340px;
}
.ads-consent-text a {
color: var(--brass-bright);
text-decoration: underline;
text-underline-offset: 2px;
}
.ads-consent-actions {
display: flex;
gap: 0.6rem;
flex: 0 0 auto;
margin-left: auto;
}
.ads-consent-btn {
font-family: "Marcellus", Georgia, serif;
font-size: 0.9rem;
letter-spacing: 0.04em;
border-radius: var(--radius-pill, 2rem);
padding: 0.55rem 1.4rem;
cursor: pointer;
border: 1px solid var(--brass, #c9a227);
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ads-consent-btn--accept {
background: var(--brass, #c9a227);
color: var(--midnight, #0d1b2e);
}
.ads-consent-btn--accept:hover,
.ads-consent-btn--accept:focus-visible {
background: var(--brass-bright);
border-color: var(--brass-bright);
}
.ads-consent-btn--decline {
background: transparent;
color: var(--cream, #f4f0e8);
border-color: rgba(244, 240, 232, 0.45);
}
.ads-consent-btn--decline:hover,
.ads-consent-btn--decline:focus-visible {
border-color: var(--cream, #f4f0e8);
color: #fff;
}
@media (max-width: 640px) {
.ads-consent-inner {
padding: 0.85rem 0;
gap: 0.6rem;
}
.ads-consent-actions {
margin-left: 0;
width: 100%;
}
.ads-consent-btn {
flex: 1 1 auto;
}
}
/* The "change your choice later" link in the footer: brass for AA contrast on midnight
(the generic .fcopy a is rgba(255,255,255,.4) = 3.8:1). */
.fcopy a#adsConsentOpen {
color: var(--brass, #c9a227);
}
.fcopy a#adsConsentOpen:hover {
color: var(--brass-bright);
}
</style>
<script type="application/ld+json">
{
@@ -953,11 +1057,42 @@
</form>
</div>
</div>
<div class="fcopy">Copyright &copy; ODOO4projects LLC</div>
<div class="fcopy">Copyright &copy; ODOO4projects LLC &middot; <a href="#" id="adsConsentOpen">Cookie settings</a></div>
</div>
</footer>
<!-- Google Ads consent banner — default DENY. The tag loads only after "Accept".
Markup lives in the page; JS (static/ads-consent.js) reveals it and drives it.
With JavaScript off it stays hidden and the native buy forms submit untouched.
See wiki/concepts/conversion-tracking-contract. -->
<div
id="adsConsent"
class="ads-consent"
role="region"
aria-label="Advertising cookie consent"
hidden
>
<div class="ads-consent-inner">
<p class="ads-consent-title">Advertising cookies</p>
<p class="ads-consent-text">
We would like to measure our Black Friday ads with Google. That uses optional
advertising cookies. Accept or decline: the page works the same either way, and you
can change your choice later from the &ldquo;Cookie settings&rdquo; link in the footer.
See our <a href="/privacy.html">privacy policy</a>.
</p>
<div class="ads-consent-actions">
<button type="button" id="adsConsentAccept" class="ads-consent-btn ads-consent-btn--accept">
Accept
</button>
<button type="button" id="adsConsentDecline" class="ads-consent-btn ads-consent-btn--decline">
Decline
</button>
</div>
</div>
</div>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script defer src="/static/black-friday.js"></script>
<script defer src="/static/ads-consent.js"></script>
</body>
</html>