Adding Google Analytics to Ghost blog is really easy, especially since we have the Code Injection feature in Ghost.
First, let's make sure you have everything ready for integrating Google Analytics with Ghost.
Follow the instructions from Google.
After you created an account, and a property for your website you need the tracking code
The tracking code should look similar to this:
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_TRACKING_ID');
</script>
Now, you have two options to integrate the code, either using the Code Injection feature or modifying your Ghost theme.
Add Google Analytics with Code Injection
-
Copy the tracking code provided by google.
-
Go to the Settings > Code Injection section within the Ghost Admin Dashboard of your site and paste it in the Blog Header.
-
Click
Saveand your tracking should work.
To test if your track is working you can go the Real Time section in GA and when you visit your website, and you should see the active user number change.
Add Google Analytics to your Ghost theme
It's also possible to integrate Google Analytics with your Ghost blog theme. For this you have to edit the default.hbs file located in the root folder of the theme.
You need the same code provided by Google, and you need to paste it after the
{{ghost_head}} but before the closing </head> tag:
<!DOCTYPE html>
<html lang="{{lang}}">
<head>
{{!-- Document Settings --}}
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
{{!-- Page Meta --}}
<title>{{meta_title}}</title>
{{!-- Mobile Meta --}}
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{!-- Styles'n'Scripts --}}
<link rel="stylesheet" type="text/css" href="{{asset 'css/app.min.css'}}" />
{{!-- Ghost outputs important style and meta data with this tag --}}
{{ghost_head}}
<!-- Insert Google analytics code here -->
</head>
</html>
The Analytics tracking code should be pasted after the
<!-- Insert Google analytics code here --> part.
And that's it, the only thing you need to do is either upload the theme if you modified it locally, or restart Ghost if you modified the file on the server.
If you want to learn more about the Analytics tool, Google provides a lot of useful information through their Analytics Academy.