Skip to content

Google Tag Manager

If your team already routes every third-party script through GTM, deploy Statable the same way. GTM gives you versioning, environments, and Preview mode, which is handy for compliance reviews and gradual rollouts.

The trade-off is real. GTM itself loads from googletagmanager.com, and most privacy tools (uBlock Origin, AdGuard, Brave Shields, Ghostery, Pi-hole) block that host by default. Anyone running one of those tools won't load GTM, and therefore won't load Statable. If you picked Statable specifically to side-step the Google ecosystem and capture privacy-conscious traffic, install it directly instead. GTM is a fine fit when you already accept that tradeoff for your other tags.

Install

  1. In your GTM workspace, open Tags → New.
  2. Click Tag Configuration and choose Custom HTML.
  3. Paste this into the HTML box, replacing YOUR_SITE_ID:
<script src="https://statable.com/js/YOUR_SITE_ID/s.js" defer></script>
  1. Under Triggering, choose All Pages (the built-in default trigger, type Page View).
  2. Name the tag Statable Tracking, click Save.
  3. Click Submit, name the version, then Publish.

GTM injects the script on every page where the container fires.

Why "Page View — All Pages" and not DOM Ready or Window Loaded

GTM has five page-load trigger types. They fire in this order: Consent Initialization → Initialization → Page View → DOM Ready → Window Loaded. Statable needs to register the page early enough to capture engagement and scroll depth from the start of the visit, so the Page View type (which the default All Pages trigger uses) is the right choice. DOM Ready and Window Loaded fire later and shorten the engagement window. Don't pick those.

Firing before GA4 (or anything else)

If you also load GA4 or another analytics tag through GTM, both will use the All Pages trigger and the firing order between them is undefined unless you set it. Use Tag Firing Priority on the Statable tag:

  1. Open the Statable Tracking tag → Advanced Settings → Tag firing options.
  2. Set Tag firing priority to a positive integer like 10. Default is 0, so anything above 0 makes Statable fire before tags that haven't set a priority. Higher number wins.

For stricter ordering (rare), use Tag Sequencing on the GA4 tag and set Statable as the "fire tag before" dependency.

Tracking custom events

Two patterns. Pick whichever fits your team's GTM conventions.

Approach A: Custom HTML tag per event

One Custom HTML tag per event. For a "Signup Clicked" event triggered when a user clicks #signup-cta:

  1. Tags → New → Custom HTML.
  2. HTML:
<script>
  window.statable && window.statable.t('Signup Clicked', {
    plan: {{Click Classes}}
  });
</script>
  1. Triggering: Click trigger on Click ID equals signup-cta.
  2. Save and publish.

Approach B: dataLayer bridge

One tag listens to a generic dataLayer event and forwards it to Statable. Your app code just pushes to dataLayer. No GTM edit required for new events.

Custom HTML tag:

<script>
  window.statable && window.statable.t({{event_name}}, {{event_props}} || {});
</script>

Trigger: Custom Event where Event name equals sa_event. Configure two Data Layer Variables: event_name (reads name) and event_props (reads props).

In your app:

window.dataLayer = window.dataLayer || []
window.dataLayer.push({
  event: 'sa_event',
  name: 'Signup',
  props: { plan: 'pro' },
})

Any dataLayer.push with event: 'sa_event' now fires a Statable event.

Tracking page views in SPA

Statable detects History API navigation automatically. It doesn't depend on GTM's History Change trigger. Leave SPA tracking alone in GTM unless you need GTM-side variables to fire on the same navigation.

Verify it's working

  • In GTM, open Preview mode and load your site.
  • Confirm the Statable Tracking tag fires on the All Pages trigger.
  • Open Statable Realtime to confirm sessions arrive.
  • See Verify installation for the full checklist.

Common pitfalls

  • Privacy extensions blocking GTM entirely. uBlock Origin, AdGuard, Brave, Ghostery, and Pi-hole block googletagmanager.com by default. When GTM is blocked, Statable loads through it isn't loaded either. This is unavoidable as long as the script ships via GTM. If under-counting privacy-aware visitors matters, install Statable directly.
  • Consent Mode blocking GTM until consent is granted. Statable is cookieless and GDPR-friendly, so it doesn't need consent. If your CMP blocks the entire GTM container until consent, Statable won't load until then either. A direct install lets analytics run before consent.
  • Forgetting to publish the container. Edits in the workspace are not live until you click Submit → Publish. Use Preview to verify.
  • Running GTM and a direct install at the same time. Pick one, otherwise pageviews double-count.
  • Excluding your own visits. Set localStorage.setItem('analytics_ignore', 'true') in your browser to opt out of tracking on this device. See Verify installation.

See also: Install the tracking script, Custom events, JavaScript API.

Ready to take control of your web analytics? Try Statable free for 30 days — no credit card required, full feature access, GDPR-compliant by default. Start your free trial or view a live demo.