Frameworks

Ember

Ember analytics with Stickybeak starts by adding its script to your rendered pages; this guide shows you where it belongs and how to track page views, goals and purchase revenue. It is a lighter alternative to Google Analytics for Ember, with live visitors, goals and revenue attribution in one script.

#Add the script

1. #Copy your snippet

   In Stickybeak, open Settings, pick your site and copy the HTML snippet.

2. #Paste it into index.html

   Current Ember apps (built with Vite) use index.html in the project root: paste the snippet just before </head>. Classic Ember CLI apps use app/index.html instead, right after {{content-for "head"}}.

   <script
     defer
     data-site="YOUR_SITE_ID"
     data-domain="example.com"
     src="https://app.usestickybeak.com/_cfw/s.js"
   ></script>

3. #Build and deploy

   ember serve runs on localhost, which isn't counted.

#Check it's working

Test the deployed site, then verify your install.

#Track goals

Add data-goal to rendered links or use the typed component code below. See Custom goals.

<LinkTo @route="pricing" data-goal="view_pricing">See pricing</LinkTo>

import Component from "@glimmer/component";
import { action } from "@ember/object";

declare global {
  interface Window {
    stickybeak?: (goal: string, props?: Record<string, string | number | boolean>) => void;
  }
}

export default class UpgradeButton extends Component {
  @action
  upgrade() {
    window.stickybeak?.("upgrade_click", { plan: "pro" });
  }
}

<button type="button" {{on "click" this.upgrade}}>Upgrade to Pro</button>

#Track purchases

After confirming an order in the browser, send:

window.stickybeak?.("purchase", { revenue: 49, currency: "USD", order_id: "ORDER_ID" });

Use real values; see Revenue.

#Page changes

History routes count new paths. router.replaceWith(), query-only and hash-location changes do not. See Single-page apps.

#If it isn't working

Check the production site ID and domain, then see Troubleshooting.