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 with the template

Statable publishes an official tag template in the Community Template Gallery. It is the simplest path: no HTML to paste, no source to edit.

  1. In your GTM workspace, open Tags → New → Tag Configuration.
  2. Click Discover more tag types in the Community Template Gallery and search for Statable.
  3. Add the Statable Analytics template.
  4. Set Tag Type to Initialization and enter your Site ID.
  5. Under Triggering, choose All Pages (the built-in default trigger, type Page View).
  6. Name the tag Statable Tracking, click Save.
  7. Click Submit, name the version, then Publish.

Your Site ID is the number in the snippet under Site settings → General → Tracking Code:

<script src="https://statable.com/js/YOUR_SITE_ID/s.js" defer></script>

In https://statable.com/js/1234567/s.js the Site ID is 1234567. Pasting the whole URL into the field works too.

Choosing the trigger

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.

Alternative: Custom HTML tag

If you prefer not to use the template, a Custom HTML tag installs the same script.

  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 (type Page View).
  2. Name the tag Statable Tracking, click Save, then Submit and Publish.

A Custom HTML tag is also the only way to pass snippet attributes the template can't (see Template limitations).

Tracking custom events

With the template

Send an event without writing any HTML.

  1. Tags → New → Tag Configuration → Statable Analytics.
  2. Set Tag Type to Custom Event.
  3. Enter an Event Name (for example Signup) and add any Custom Props.
  4. Triggering: create a trigger that fires when the event should be sent (a Click trigger, a Custom Event trigger, and so on).
  5. Save and publish.

The Initialization tag must have fired first on the page, so keep it on the All Pages trigger.

With Custom HTML

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

<script>
  window.statable && window.statable.t('Signup Clicked', {
    plan: {{Click Classes}}
  });
</script>

Trigger: Click trigger on Click ID equals signup-cta.

With a 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.

Template limitations

GTM's sandbox cannot set attributes on the script tag it injects, so a few snippet attributes are unavailable through the template. Use a Custom HTML tag when you need them:

  • data-statable-* custom properties at initialization. Pass properties per event through a Custom Event tag instead.
  • data-before-send.
  • data-tracking-api. The endpoint is derived from the script origin.

Hobby sites are not supported through GTM. Their snippet is a widget bundle that must sit at a specific place in the page, which GTM cannot control. Install it directly from Site settings → Widget.

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.