Analytics Lab / Instrumentation

Google Tag Manager Sandbox

Explore how a universal data layer powers Google Tag Manager implementations. The left column documents the foundational schema and tracked interface components, while the console on the right shows the normalized payloads staged for dispatch.

Container ID: GTM-XXXXXXX
Data layer schema: universal-data-layer/v1

Universal data layer blueprint

Capture stable identifiers at the session, user, and page level. Interaction events inherit these values so downstream destinations receive fully qualified payloads without redefining schema on every tag.

Session context

Generated on first visit and persisted until the window closes.

{
  "session": {
    "id": "c2c...",
    "timestamp": "2024-01-01T12:00:00Z",
    "source": "organic"
  }
}

User context

Anonymous profile traits that remain stable across views.

{
  "user": {
    "authState": "anonymous",
    "persona": "marketer",
    "role": null
  }
}

Page context

Describes the current surface so attribution dimensions stay consistent.

{
  "page": {
    "name": "gtm-sandbox",
    "category": "analytics-lab",
    "language": "en-US"
  }
}

Each interaction extends this base object with an interaction node describing the element, module, and any business values collected at the moment of engagement.

Interactive tracking map

Components below surface their data-gtm-* metadata. Activate CTAs, navigation, search, media, downloads, consent, and scroll sentinels to see the normalized payload that would be pushed into the data layer and forwarded to GTM tags.

Primary CTA

Event: cta_click · Module: gtm-sandbox.cta

Reference link

Event: documentation_open · Module: gtm-sandbox.navigation

View implementation checklist

Mission intake form

Event: form_submit · Module: gtm-sandbox.form

Internal navigation

Event: nav_select · Module: gtm-sandbox.navigation

Captures which top-level destinations visitors explore from the primary nav bar.

Open Labs overview

Site search

Event: site_search · Module: gtm-sandbox.search

Submitting the search form pushes the query string and layout context so downstream destinations can evaluate findability.

Video milestone

Event: video_milestone · Module: gtm-sandbox.media

Media instrumentation emits milestone percentages so analysts can distinguish partial plays from completions.

Spec download

Event: file_download · Module: gtm-sandbox.documents

Document downloads feed both conversion and product health dashboards.

Download telemetry kit (PDF)

Consent toggle

Event: consent_update · Module: gtm-sandbox.privacy

Change events record whether optional telemetry communications are enabled.

Email updates

Scroll sentinel

Event: scroll_depth · Module: gtm-sandbox.scroll

A sentinel anchored near the footer fires when 90% depth is reached, mirroring a common scroll-depth trigger.

Scroll depth sentinel (90%)

Mission alert modal

Event: modal_open · Module: gtm-sandbox.modal

Surface overlay interactions alongside dismiss and acknowledge actions. The helper below opens the modal and logs subsequent button clicks inside the dialog.

Telemetry FAQ accordion

Event: accordion_toggle · Module: gtm-sandbox.content

Toggle the accordion to pass along the open or closed state. This pattern helps quantify which FAQ items draw the most attention.

Accordion collapsed.

Inline tooltip

Event: tooltip_toggle · Module: gtm-sandbox.content

Track contextual help reveals. Each toggle records whether the tooltip is visible so you can understand which helper text assists operators.

Copy mission brief

Event: share_link · Module: gtm-sandbox.sharing

Copying a link emits a sharing payload with method copy. The helper below mirrors the clipboard instrumentation typically wired through a GTM custom HTML tag.

No copy attempts recorded.

Theme preference

Event: preference_update · Module: gtm-sandbox.preferences

Theme toggles update the preview tile and push the new state into the data layer for downstream personalisation logic.

Current theme: Light

Theme set to light.

Tutorial milestones

Events: tutorial_begin / tutorial_complete

Log onboarding progress for operators. Each button maps to a dedicated event so analytics teams can monitor completion rates.

Begin orientation
Review tagging plan
Complete readiness

No tutorial milestones logged.

Deployment checklist

1. Publish the schema and confirm all stakeholders align on naming.
2. Populate session, user, and page objects server-side or on first paint.
3. Annotate interactive elements with data-gtm-* attributes.
4. Use a helper to map DOM metadata to structured data layer pushes.
5. Route payloads to GA4, ad pixels, or custom webhooks from within GTM.
6. Validate media milestones, consent toggles, and scroll depth in preview mode.

Base GTM container snippet

Paste the standard bootstrap near the top of <head> and mirror the <noscript> iframe immediately after <body>. Replace the container ID with your own value.

&lt;script&gt;
  (function(w,d,s,l,i){
    w[l]=w[l]||[];
    w[l].push({
      'gtm.start': new Date().getTime(),
      event: 'gtm.js'
    });
    var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),
      dl=l!='dataLayer'? '&amp;l='+l : '';
    j.async=true;
    j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
    f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXXXX');
&lt;/script&gt;
&lt;noscript&gt;
  &lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"&gt;&lt;/iframe&gt;
&lt;/noscript&gt;