Ember.js

Fathom Analytics works great with Ember.js. The Fathom dashboard is actually built using Ember.js, and setting up Fathom was super easy.

Open app/index.html and add the following code snippet just before the </head> tag. Make sure you put your own site ID in.

<script src="https://cdn.usefathom.com/script.js" data-spa="auto" data-site="YOUR-SITE-ID" defer></script>

In this snippet, we use data-spa="auto". This code tells Fathom to use HTML5 History API if it's available (pushstate, popstate routing etc.), and to fall-back to hash-based routing if it's not.

Being explicit

If you only use HTML5 History API or you use hash-based routing (like the Fathom Dashboard does), you can use the following values to explicitly tell Fathom not to try and guess.

• data-spa="history" will tell Fathom to use HTML5 History API
• data-spa="hash" will tell Fathom to listen to hashchange events

Further customization

Out of the box, without any extra configuration, EmberJS uses "auto" mode. This means that EmberJS will attempt to use the HTML5 History API, but will fallback to hashes if it's not available.

When you set data-spa="auto" on your Fathom script, we do the same thing. We'll track pushstate / popstate etc. (HTML5 History API events) if they're available on your visitor's browser, and we'll fall back to listening to "hashchange" if HTML5 History API isn't available.

If you want to explicitly opt in for the type of routing you use, you can set the following values for the spa option in the script tag:

• history
• hash

If you have set locationType to 'none' in EmberJS, Fathom will not work. We've not seen this done before, but it's possible that some people will do it. This is when the URL doesn't change at all. So check your site.

To learn about all the options we offer, read our advanced documentation here.