hayley 365

home

how to add google analytics to a Ghost blog

15 Oct 2013

2013-10-15 21:22:59 -0500

Now first, I'm assuming that at some point in the future, this is going to be handled by a plugin and that will probably become the official way to handle adding analytics.

Until then though, here were the pretty simple steps I took to add the google analytics code to my Ghost blog.

In summary, you'll be creating a handlebars partial template with your google analytics code and then adding it to your desired theme.

First, I'd recommend doing these changes on a copy of your desired theme. This has the bonus of giving you a backup in case something gets screwed up. Also, if you're making your changes to the default theme (casper), right now, it's unclear to me whether your changes would be preserved during a ghost upgrade.

cd GHOST_INSTALL_DIRECTORY # this is going to all depend on where you downloaded and installed ghost
cd content/themes
cp -R NAME_OF_THEME_YOU_ARE_CHANGING my_alternate_theme # or whatever you'd like to call it
cd my_alternate_theme
mkdir partials
nano partials/analytics.hbs

Of course, you could also use vi. Or edit the file with whatever text editor you like (so long as it makes something truly plain text, and then make sure that the file ends up in the appropriate partials directory.

For the analytics.hbs file, paste in the code you get from google when you set up an analytics account. Depending on the style of analytics you're using, this may have a line near the beginnning like (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){. However, make sure that your copy starts with <script> and ends with </script>.

Next, you're going to modify the default template to include this partial template before the end </body> tag.

Add this line to the default.hbs template:

``

This tells the handlebars system that you want to include a partial template named analytics.hbs and, as a partial template, it's going to look for it in the partials directory.

For context, here's an example of the surrounding code in my default.hbs file:

<script type="text/javascript" src="/assets/js/jquery.history.js"></script>
<script type="text/javascript" src="/assets/js/nprogress.js"></script>
<script type="text/javascript" src="/assets/js/scripts.js"></script>



</body>
</html>

I believe the Ghost team is working on fixing this, but for now, anytime you create a new theme, you'll need to restart the ghost server for it to pick up the fact that a new theme is available.

This step will greatly vary depending on how you initially configured ghost, but for how I configured it, I had to stop the forever process and then rerun the script that I use to start the server.

Next, you'll want to change your theme settings to use your new theme.

You do this from the ghost control panel under "General". At the moment, configuring the theme is the last option on the General Settings page.

If everything went well, when you visit your blog's main page and view the source, you should see your Google Analytic's code pasted near the bottom.