We have our ghost blog up and running and we want to know who, if anyone, is actually looking at our site. So we want to get some google analytics on the our posts. As of version 0.4 of ghost, you can’t add google analytics from the admin board, so we will have to do it manually by inserting the analytics code directly into the html of every page. Of course the smartest way to do it is to add it to the theme which will be on every page.
Get the analytics code
Head to your favourite analytics site, in my case it was Google Analytics and sign in or make an account. Go through the steps of making a new property for your site, and eventually you should get some javascript code to paste into your site. On google analytics it looked something like this:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-49701943-2', 'amayem.com');
ga('send', 'pageview');
</script>
Copy your code.
Paste code into the theme
You will find your themes in /ghost/install/dir/content/themes/, choose your theme and enter that directory. For example:
[ahmed@amayem ~]$ cd /var/www/ghost/content/themes/casper/
[ahmed@amayem casper]$ ls
assets default.hbs index.hbs LICENSE package.json page.hbs post.hbs README.md tag.hbs
Ok looks good. The main template file that is going to be found in all pages of the blog, at least if you are using the casper theme, is default.hbs, so let’s edit that file:
[ahmed@amayem casper]$ sudo vi default.hbs
Go to just before the ending of the head tag. That means we want to add the code on the line above </head>, so move your cursor with your arrow keys to where you want it. Press i to enter insert mode, then Cmd+v or Apple+v if you’re on a mac, otherwise ctrl+v to paste the code. I am assuming, of course, that it was copied earlier and it is still in your clipboard. The pasted code may be out of alignment. If you are comfortable with javascript you might want to add tabbing and spaces to make it look nice again, but don’t worry, even if you leave it, it will still work.
We have our code in place, time to save and exit and test. To exit from insert mode type Esc or if that doesn’t work then Ctrl+c. To save and exit type :x.
The code may be modified but ghost won’t know until it’s restarted. Restarting ghost will depend on how you are running it. In my case I used forever:
[ahmed@amayem casper]$ sudo su ghost
[sudo] password for ahmed:
[ghost@amayem casper]$ forever list
info: Forever processes running
data: uid command script forever pid logfile uptime
data: [0] v7zw /usr/bin/node /var/www/ghost/index.js 914 916 /home/ghost/.forever/v7zw.log 1:7:31:16.238
[ghost@amayem casper]$ forever restartall
info: Forever restarted processes:
data: uid command script forever pid logfile uptime
data: [0] v7zw /usr/bin/node /var/www/ghost/index.js 914 916 /home/ghost/.forever/v7zw.log 1:7:31:24.751
Testing
Head to you blog now and right click somewhere on the page and click on view page source or a command like it. This should show you a window with the page source. Look for the </head> tag and look just above it and you should see the newly inserted code. If you don’t then you might need a hard refresh of the browser. What that means is the browser might have just loaded the old version of the page form its cache to save time. The command to force a full reload may differ between browsers but cmd+shift+r or ctrl+shift+r is likely to work. Once you verify the existence of the newly inserted code you can head back to your analytics dashboard and check how things are progressing there. It may take some time before they register your first visit.
References
- The ghost docs explaining how themes worked.
- Tyler Eaves‘s and Ronnie Howwel‘s answer to this stack overflow answer.
- This tutorial for providing a skeleton.
