Skip to Content
InstallationTracking Code

Tracking Code Installation

Add the Ghost Metrics tracking code directly to your website’s HTML.

Your Tag Manager container is provisioned for you when your instance is set up — pageview tracking, privacy settings, secure cookies, and engaged-time (heartbeat) tracking are already configured. Installation is just a matter of placing the snippet below on your site; there’s nothing to configure in the container to get started.

Getting Your Tracking Code

  1. Log in to your Ghost Metrics dashboard
  2. Open Tag Manager from the top menu and select your container
  3. Click Install Code in the left menu
  4. Choose the environment — in most cases you want Live
  5. Copy the tracking code provided

Basic Installation

Paste the code as high as possible inside the <head> tag of your website:

<!-- Ghost Metrics Tag Manager -->
<script>
  var _mtm = window._mtm = window._mtm || [];
  _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
  (function() {
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src='https://example.ghostmetrics.cloud/js/container_XXXXXXXX.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Ghost Metrics Tag Manager -->

Replace example.ghostmetrics.cloud and container_XXXXXXXX.js with the values from your Ghost Metrics dashboard — or simply copy the exact snippet from the Install Code page, which has them filled in.

Why does the snippet only work once a container version is published?

The snippet loads your container file, and the container file only contains what’s been published. Your Ghost Metrics container is set up with pageview tracking, but if you ever customize tags or triggers, remember to publish the new version before expecting changes on your site.

Where to Add the Code

The tracking code should be added to every page you want to track. Most websites use a shared header template or layout file, so you typically only need to add it in one place.

Common Locations by Platform

  • WordPress — See our WordPress installation guide
  • Static HTML — Add to each page’s <head> section, or use a shared header include
  • React/Vue/Angular — Add to your index.html or main layout component
  • Google Tag Manager — See our GTM installation guide

Placement Best Practices

Why as High as Possible in the <head>?

Loading the container early in the page lifecycle captures visitors even if they leave before the page fully loads, and gives tags the best chance to fire before the visitor navigates away.

Asynchronous Loading

The tracking code loads asynchronously (g.async=true), meaning it won’t block your page from rendering. Your website’s performance won’t be affected.

Single Page Applications (SPAs)

The basic tracking code captures the initial page load. For navigation between views in React, Vue, Angular, and other SPAs, either:

  • Configure a History Change trigger on your container’s pageview tag, so route changes are detected automatically, or
  • Fire pageviews from your router code — see Pageviews: Single-Page Applications for the exact call sequence

Contact support if you’d like help configuring SPA tracking.

Content Security Policy (CSP)

If your website uses a Content Security Policy, two things need to be allowed: the scripts loaded from your Ghost Metrics domain, and the tracking requests sent to it. A working policy includes your analytics domain in script-src, connect-src, and img-src:

Content-Security-Policy: default-src 'self'; script-src 'self' https://example.ghostmetrics.cloud; connect-src https://example.ghostmetrics.cloud; img-src 'self' https://example.ghostmetrics.cloud; style-src 'self';

Additionally, the snippet above is an inline script, which a strict script-src blocks. Either:

  • Add your CSP nonce to the snippet’s <script> tag (<script nonce="your_nonce">…), or
  • Skip the inline snippet and load the container directly:
<script src="https://example.ghostmetrics.cloud/js/container_XXXXXXXX.js" async defer></script>

Replace example.ghostmetrics.cloud with your actual Ghost Metrics domain. Contact support if you need help validating your policy.

Next Steps

Last updated on
Key Differences from GA4Google Tag Manager