HubSpot

HubSpot Content Hub (formerly CMS Hub) has a Site header HTML setting that injects code into the <head> of every website page, landing page, blog post and knowledge base article on a domain, so no template edits are needed. Individual pages can add or override code from the content editor.

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 HubSpot

This adds the snippet to all HubSpot-hosted content on a domain.

In your HubSpot account, click the settings icon in the top navigation bar.
In the left sidebar, go to Content > Pages.
Use the Choose a domain to edit its settings dropdown to pick the domain, or stay on the default settings to apply the code to every domain.
Paste the snippet into the Site header HTML field.
Click Save.

If a domain has Override default settings turned on, the default header code no longer applies to it. Add the snippet to that domain's own settings as well.

Use this to track a single page, or when someone else controls the domain settings.

Open Content > Website Pages (or Landing Pages, Blog, Knowledge Base) and click the page name to open the editor.
Click the Settings menu, then select Advanced.
Under Additional code snippets, paste the snippet into the Head HTML field.
Click Update or Publish.

Per-page head HTML is added on top of the site header HTML, so a page tracked by both methods loads the script twice. Pick one.

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

HubSpot forms submit inside the page without a full reload, so track them with a custom event. Add data-rybbit-event to a call-to-action button, or listen for HubSpot's form-submitted message in a small script placed after the snippet:

<script>
  window.addEventListener("message", function (event) {
    if (event.data.type === "hsFormCallback" && event.data.eventName === "onFormSubmitted") {
      window.rybbit.event("form_submitted", { formId: event.data.id });
    }
  });
</script>

See Track custom events for the event API.

Troubleshooting

Snippet missing on one domain: the site header HTML is per domain. Check whether that domain has Override default settings enabled and add the snippet there.
Duplicate pageviews: the same page has the snippet in both site header HTML and its own Head HTML. Remove one.
Editor and preview: the content editor renders pages in an iframe with unpublished changes. Previews are tracked like any other visit if they load the script, so avoid checking analytics from the editor.
Quotes: header HTML set at the domain level also loads on HubSpot quotes hosted on that domain.

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.