/ Tag Management

Basic setup for Ghost CMS and Google Tag Manager (part 1)

So I've started this blog, and one of the key things is to set up digital analytics. More specifically Google Analytics. Off course there's a bunch of solutions to choose from, but as this is basically a hobby project, Google Analytics is the obvious choice. Now, these days, implementing Google Analytics without a tag management system is a big no-no. I might tell you all about the advantages of a tag management system, but that's a post for another day. As for now, you'll just have to take my word for it. So let's move on and quickly list my business goals and evaluate my technical setup.

The blogging platform I've picked to power this blog is Ghost CMS. I've been a long time Wordpress user and supporter, but for a blog 'pur sang' Ghost CMS is more to the point and a very elegant solution. It's also running on my own private Ubuntu cloud instance so I can tweak it however I want. Other than that I'm also running an instance of Mautic for my emailing and automation needs. (check it out, it's dope). Aside from the basic reports you get with Google Analytics I also have a few other reporting requirements:

  • I want to be able to segment posts in reports based on author
  • I want to see the performance of individual tags (Ghosts uses tags as a way to organize posts)
  • I want to set up a conversion goal for email list subscriptions and contact form submissions
  • I want to track social shares
  • I want to know if visitors actually read my posts
  • I want to be able to trigger automation scenarios based on what type of content a visitor interacts with

Initial setup

The first thing we need to do is create a Google Tag Manager account and add the GTM tag to Ghost. This part is easy, Ghost has a code injection feature located under settings where you can add custom code to either the head or the footer. So we just need to copy the GTM tag and add it to the header of our blog using the code injection feature. Google Tag Manager also provides a secondary tag to accommodate devices that have no javascript capability, but this is not required and you can easily skip that.

Insert Google Tag Manager in Ghost CMS

Now we need to create a new Google Analytics profile and copy the new tracking id, which we will need in Google Tag Manager to set up a new variable of the type Google Analytics Settings. For now, entering the tracking id is just fine, we'll do some extra configuration at a later point. After creating the Google Analytics Settings variable, we'll create a new Universal Analytics tag, setting the tracking type to pageview and selecting the variable for the tracking id we just created. Publish the container and we have Google Analytics running on our blog.

Tag Manager Google Analytics Variable
Google Analytics Page View Tag

The Data Layer

On to the more challenging part, creating a data layer. In order to meet our reporting and automation requirements Google Analytics and Mautic will need some extra data, such as author, content type, tags, etc. The data layer is basically a Javascript object that contains all the information you want to pass to the tag manager. Inside GTM you can then map that data onto the tags that need it. For more complex websites I highly suggest you define your data layer in a spreadsheet first so you have a clear view of what to implement and a reference to come back too. As we're just doing a basic setup we'll skip that and just make a quick list:

  • Site Name (the title of our blog)
  • Page Title (the page title as defined in Ghost)
  • Author (the author of a post, or subject of an author page)
  • Page Category (the type of content: homepage, post, tags page, etc)
  • Tag (the primary tag of an article)

To add a data layer to Ghost we will need to edit the Ghost theme. We'll need to edit the active theme. This can be either the default theme or a custom we've created. In my case I created a custom theme based on the default Casper theme. Ghost themes use the Handlebars templating engine to separate business logic and design. Using the ghost context reference and Handlebars we can a data layer the the theme's default layout. If you're using multiple layouts you should repeat this step for each layout. Add the following data layer just above the {{ghost_head}} variable in your layout template:

    <script>
        dataLayer = [{
            'pageTitle': '{{meta_title}}',
            {{#is "post"}}
                {{#post}}
                    'pageCategory': 'post',
                    {{#primary_tag}}
                        'primaryTag': '{{name}}',
                    {{/primary_tag}}
                    {{#author}}
                        'author': '{{name}}',
                    {{/author}}
                {{/post}}
            {{/is}}
            {{#is "page"}}
                {{#post}}
                    'pageCategory': 'page',
                    {{#author}}
                        'author': '{{name}}',
                    {{/author}}
                {{/post}}
            {{/is}}
            {{#is "author"}}
                {{#author}}
                    'pageCategory': 'author',
                    {{#author}}
                        'author': '{{name}}',
                    {{/author}}
                {{/author}}
            {{/is}}
            {{#is "tag"}}
                {{#tag}}
                    'pageCategory': 'tags',
                    'author': 'none',
                    'primaryTag': '{{name}}',
                {{/tag}}
            {{/is}}
            {{#is "index"}}
                'pageCategory': 'blog index',
                'author': 'none',
            {{/is}}
            'siteName': '{{@blog.title}}'
        }];
    </script>

Creating custom dimensions in Google Analytics

Custom dimensions in Google Analytics allow you to combine custom data with built-in analytics data. In order to create the reports we want, we need to set up a few custom dimensions. Using Google Tag Manager, these dimensions will be mapped exactly on the data layer parameters and later on, we can use these to create custom reports. Custom dimensions are defining on property level under custom definitions and we'll need 5 hit-based custom dimensions in total:

Google Analytics Custom Dimensions

Configuring Google Tag Manager

Now back to Google Tag Manager. Here we'll need to define the data layer variables and map them onto our Google Analytics tag. We need to create 5 variables of the type Data Layer Variable and the name of each variable should be exactly the same as in our data layer.

Tag Manager Defining Data Layer Variables

Next, we need to edit our Google Analytics Settings variable. Under more settings, we need to map our newly created data layer variables on the correct index of our custom dimensions. After we uploaded our theme and published our GTM container we'll have a working data layer that sends data to Google Analytics.

Tag Manager Data Layer Variables Mapping

This concludes our first part of setting up Google Tag Manager for Ghost CMS, in the next part we'll be adding some goals and see how we can create custom reports in Google Analytics.

Nicolas Lierman

Nicolas Lierman

The original glamdevhero. Digital Innovation Architect at MultiMinds and interested in all things analytics, data and web development.

Read More
Basic setup for Ghost CMS and Google Tag Manager (part 1)
Share this

Subscribe and get the good stuff