Google Tag Manager

Google Tag Manager loads Rybbit through a Custom HTML tag fired on All Pages, so nothing in your site's code changes. Events you already push to the dataLayer can be forwarded to Rybbit with a second tag.

Get your tracking snippet

In your Rybbit dashboard, open Site Settings → Tracking Script and copy your snippet. It looks like this:

<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>

YOUR_SITE_ID is the numeric ID of your site. If you self-host Rybbit, app.rybbit.io is the domain of your own instance.

Add the snippet to Google Tag Manager

Open your GTM container and go to Tags → New.
Under Tag Configuration, choose Custom HTML and paste the snippet:

<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>

Under Triggering, choose All Pages (the built-in Page View trigger).
Name the tag, for example Rybbit - Loader, and click Save.
Click Submit and publish the container version.

GTM rebuilds Custom HTML tags before injecting them and can drop non-standard attributes. Keep the site ID in the URL (?siteId=) as shown; the older data-* attribute form is not reliable here.

Use Preview mode to confirm the tag fires on page load before publishing.

Verify installation

Open your live site in a new tab and click through a few pages. Within a few seconds the pageviews appear in the Rybbit dashboard.

If nothing shows up:

View the page source and search for script.js?siteId= to confirm the snippet is on the page.
Open the browser Network tab and check that script.js returns 200 and that POST requests go to /api/track.
Disable ad blockers, or set up a proxy so the script loads from your own domain.
See the script troubleshooting guide for other common causes.

Track custom events

Once the loader tag is published, window.rybbit is available to your own JavaScript and to other GTM tags.

Forward dataLayer events

If your site already pushes events like dataLayer.push({ event: "signup" }), one tag can forward them to Rybbit:

Create a Custom Event trigger. Set the event name to a regex such as signup|purchase|add_to_cart (tick Use regex matching).
Create a Custom HTML tag with that trigger:

<script>
  if (window.rybbit) {
    window.rybbit.event("{{Event}}", {
      page: "{{Page Path}}",
      referrer: "{{Referrer}}"
    });
  }
</script>

{{Event}}, {{Page Path}} and {{Referrer}} are GTM built-in variables. Add a Data Layer Variable for any custom field you push (for example plan) and reference it the same way.

Use GTM's click and form triggers

The same pattern works with built-in Click and Form Submission triggers:

<script>
  if (window.rybbit) {
    window.rybbit.event("cta_clicked", {
      text: "{{Click Text}}",
      url: "{{Click URL}}"
    });
  }
</script>

Enable the Click Text and Click URL built-in variables under Variables → Configure.

Troubleshooting

Event tag fires before Rybbit loads: the loader script is deferred, so an event tag on the same page load may run first and hit the if (window.rybbit) guard. Open the event tag's Advanced Settings → Tag Sequencing and set the loader tag to fire before it, or trigger the event tag on Window Loaded instead of Page View.
Consent mode: if your container gates tags on consent, add the loader tag to the same consent group as your other analytics tags, otherwise it never fires.
Tag shows in Preview but not live: the container version was not published. Click Submit and publish.

Next steps

Track custom events such as signups, purchases and button clicks.
Identify users to connect sessions to accounts.
Proxy the script through your own domain to bypass ad blockers.
Script attributes let you skip or mask URLs and tag events.

Google Tag Manager

On this page