0

Ghost Guide [Deprecated]

Official support from Segment for this plugin is deprecated. The current version of this plugin should be free of bugs but any existing and future development will be paused for the time being. We recommend exploring and using third party alternatives.

We are currently looking for community maintainers!  If you’re interested in maintaining or contributing to any of our plugins or guides, we'll gladly send some Segment swag your way in return for any merged PRs. Don't forget to give us a heads up via our contact form when you submit a PR.   


ghost logo

Segment makes it simple for Ghost bloggers to integrate event and real-time analytics, heat map, optimization, and advertising tools. Rather than installing all your tools individually, you just install Segment once. We collect your data, translate it, and route it to any tool you want to use. Using Segment as the single platform to manage and install your third-party services will save you time and money.

The guide below explains how to install Segment in your Ghost blog. All you need to get up and running is copy and paste a few snippets of code. (You don’t have to edit the code or be versed in JavaScript.) The following guide will show you how, step-by-step.


Create a Segment Account

Start by creating a Segment account. We recommend creating an organization so you can invite teammates to your account in the future.

Once your account is created, add a new source.

Install Your Snippet

Once your Segment account is ready to go you’ll need to install a few lines of javascript into your Ghost theme templates. Start with your javascript snippet to load our Analytics.js library across your whole Ghost site.

Here’s your standard snippet:

<script type="text/javascript">
  !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="3.1.0";
  analytics.load("YOUR_WRITE_KEY");
  analytics.page()
  }}();
</script>

Basic Setup

For the basic most basic page tracking and nothing else, all you have to do is copy the snippet above, replace YOUR_WRITE_KEY with the Write Key from your Segment source and paste the snippet into your theme folder template.hbs file. It should go write above the </head>tag.

If you only want basic page tracking you’re done!

Complete Setup

If you have a bit more time and want some deeper analysis we recommend going through the rest of this guide.

The first step is to copy the snippet above, replace YOUR_WRITE_KEY with the Write Key from your Segment source in the snippet. Then remove analytics.page(); from the snippet.

We remove that line from the snippet because we’ll manually add a page call with extra details to each template in your Ghost theme.


Page Templates

All of the remaining sections refer to a file in your Ghost theme folder. You’ll need to copy the snippet provided and paste it into the .hbs file specified.

We recommend pasting the code we provide above the {{> footer}} tag.

Index Page

The first page we’ll track is the Index page.

File: index.hbs

Code:

<script type="text/javascript">
  analytics.page('Index');
</script>

Make sure the above script is pasted right above the {{> footer}} tag. That way it won’t have any issues with any other logic happening on the page.

Blog Post

File: post.hbs

Code:

<script type="text/javascript">
  analytics.page('Post', {
    postId: '{{id}}',
    postClass: '{{post_class}}',
    datePublished: '{{date format="YYYY-MM-DD"}}',
    postAuthor: '{{author.name}}',
    tags: '{{tags}}'
  });

  function disqus_config() {
    this.callbacks.onNewComment = [function() {
      analytics.track('Commented');
    }];
  }
</script>

Make sure the above script is pasted right above the {{> footer}} tag. That way it won’t have any issues with any other logic happening on the page.

Static Page

File: page.hbs

Code:

<script type="text/javascript">
  analytics.page('Static', {
    postId: '{{id}}',
    postClass: '{{post_class}}',
    datePublished: '{{date format="YYYY-MM-DD"}}',
    postAuthor: '{{author.name}}',
    tags: '{{tags}}'
  });

  function disqus_config() {
    this.callbacks.onNewComment = [function() {
      analytics.track('Commented');
    }];
  }
</script>

Make sure the above script is pasted right above the {{> footer}} tag. That way it won’t have any issues with any other logic happening on the page.

Tags Page

File: tags.hbs

<script type="text/javascript">
  analytics.page('Tags', {
    tagName: '{{tag.name}}',
    tagSlug: '{{tag.slug}}'
  })
</script>

Make sure the above script is pasted right above the {{> footer}} tag. That way it won’t have any issues with any other logic happening on the page.

404 Page

File: error.hbs

<script type="text/javascript">
  analytics.page('404');
</script>

Make sure the above script is pasted right above the {{> footer}} tag. That way it won’t have any issues with any other logic happening on the page.