Ember

An Ember app has one HTML shell that every route renders into. Apps created with the current Vite-based ember new blueprint keep it at index.html in the project root; classic ember-cli apps keep it at app/index.html. Paste the snippet into the <head> of that file.

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 Ember

Open index.html (or app/index.html in a classic ember-cli app) and paste the snippet inside <head>, after the {{content-for "head"}} placeholder:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MyApp</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {{content-for "head"}}

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

    <link integrity="" rel="stylesheet" href="/@embroider/virtual/vendor.css">
    <link integrity="" rel="stylesheet" href="/@embroider/virtual/app.css">

    {{content-for "head-footer"}}
  </head>
  <body>
    {{content-for "body"}}
    ...
    {{content-for "body-footer"}}
  </body>
</html>

Keep the {{content-for}} placeholders in place; the build fills them in. Route transitions made by Ember's router (the default history location type) are tracked automatically as pageviews.

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

Call window.rybbit.event() from a component action. Guard the call so a blocked or still-loading script does not throw.

app/components/signup-button.gjs

import Component from "@glimmer/component";
import { on } from "@ember/modifier";

export default class SignupButton extends Component {
  trackSignup = () => {
    if (window.rybbit) {
      window.rybbit.event("signup_click", { location: "hero" });
    }
  };

  <template>
    <button type="button" {{on "click" this.trackSignup}}>Sign up</button>
  </template>
}

Troubleshooting

index.html is also used by the test runner: tests/index.html is a separate file. Do not add the snippet there, or test runs send pageviews to your dashboard.

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.