← back to Consulting Designerwallcoverings Com
snippets/gtag.html
70 lines
{%- comment -%}
Designer Wallcoverings — GA4 gtag.js snippet
============================================
LIVE measurement ID: G-53F1QBZSG0 (GA4 property 294178030, the real DW property).
The GA4 property + web data stream ALREADY EXIST — no create-property step is needed.
gtag is ALREADY installed and collecting on the LIVE Shopify store (Consent Mode v2
verified on the live theme per commit 4bcdbe7). This snippet is a LOCAL reference copy
reconciled to the real ID — do NOT deploy it; the live theme already carries its own
gtag + Consent-Mode install. Editing here does not change what's live.
Placement (reference only): paste the block below as high in the <head> of `layout/theme.liquid`
as possible (immediately after the <meta charset> / <meta viewport> lines,
before other scripts). See docs/gtag-theme-install.md for exact instructions.
This snippet loads gtag and sends the automatic page_view. Enhanced measurement
(scroll, outbound click, site search, video, file download) is toggled ON in the
GA4 web data stream — no extra code needed for those.
The Shopify ecommerce events (view_item / add_to_cart / begin_checkout / purchase)
and the DW custom events (request_sample, trade_account_signup, email_signup) are
sent separately — see the commented reference block at the bottom of this file and
docs/attribution-spec.md §5. Do NOT hardcode order data here; Shopify's checkout /
Customer Events (web pixel) is the correct surface for purchase-level events.
{%- endcomment -%}
<!-- Google tag (gtag.js) — GA4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-53F1QBZSG0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-53F1QBZSG0', {
// Preserve UTM params through internal navigation so source/medium survives to checkout.
'linker': { 'accept_incoming': true },
// DW store hostname — keeps attribution consistent across www + checkout.
'cookie_domain': 'designerwallcoverings.com'
});
</script>
<!-- End Google tag -->
{%- comment -%}
─────────────────────────────────────────────────────────────────────────────
REFERENCE ONLY — commerce + custom events (do not enable until GA4 is live).
These illustrate the event shape from §5 of the attribution spec. In Shopify,
prefer the Customer Events / web-pixel surface for purchase so the coupon field
is populated from the real order discount code (DW-<CHANNEL>-<OFFER>).
// Product page:
gtag('event', 'view_item', {
currency: 'USD',
value: {{ product.price | divided_by: 100.0 }},
items: [{ item_id: '{{ product.selected_or_first_available_variant.sku }}',
item_name: {{ product.title | json }} }]
});
// Purchase (from checkout / web pixel) — note the coupon field for channel attribution:
gtag('event', 'purchase', {
transaction_id: '{{ order.name }}',
value: {{ order.total_price | divided_by: 100.0 }},
currency: 'USD',
coupon: '{{ order.discount_applications.first.title }}', // e.g. DW-IG-10
items: [ /* line items */ ]
});
// DW custom event example (sample request button handler):
// gtag('event', 'request_sample', { item_id: SKU, item_name: TITLE });
─────────────────────────────────────────────────────────────────────────────
{%- endcomment -%}