/ Tag Management

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

In part 1 of this series we've created a data layer for Ghost CMS, configured Google Tag Manager and set up some custom dimensions in Google Analytics. If you haven't read part 1 I highly suggest you do that first before continuing with part 2.

We previously listed some business requirements for our basic setup and with the work we did in part one, we now have all the data available in Google Tag Manager and Google Analytics to create custom reports and set up some goals. In this part, we're going to build upon the work we've done and do some extra configuration in Google Tag Manager and Google Analytics to meet those business requirements.

Google Analytics Goals

In Google Analytics we want to set up conversion goals for form submissions, social shares and post engagement. Depending on the theme you chose to use with Ghost CMS you can have a variety of sharing options and any number of forms. In my case, I have a newsletter subscription form, a contact form and sharing options for Twitter and Facebook. So more specifically I'm going to set up the following goals:

  • Facebook Shares
  • Twitter Shares
  • Social Shares
  • Newsletter Subscription
  • Contact Form
  • Article Read

In general, Goals in Google Analytics can be either page based or event based. For page based Goals you'll need to have a destination page or a conversion page, but as my forms use asynchronous Javascript to post their results and the social share actions just trigger pop-ups with sharing options for their respected platform, everything will be event based. And, in general, even if you have a destination page it's usually more robust to use events anyways.

Creating the triggers in Tag Manager

In order to push all these events to Google Analytics we need to create triggers in Google Tag Manager that will fire Google Analytics tags of the type event. We're going to need 3 different types of triggers; form submission, link click and element visibility triggers. Let's start with the form submission triggers. These are obviously to send events when a form submission happens. For both my forms (newsletter and contact form) I'm using Mautic, and Mautic generates pretty clean HTML. More importantly, the forms have a unique ID. If your forms don't have a unique ID you'll have to be more creative with a CSS selection and maybe add in a page condition to isolate the form completely.

tag manager form trigger

The above trigger is of the Google Tag Manager event type Form Submission and uses the form ID to select the correct form. Create one for every form you have on your website. Next, we're going to create triggers for the social share buttons. In most cases, these will just be HTML links so we can use a simple Click based trigger. My theme has share buttons for Facebook and Twitter. Both have unique classes, so I'm going to select the links based on the click class.

tag manager link click trigger

We also need a couple of triggers to measure if someone actually reads a post. In the past, I would've done this using scroll tracking, but that can be fidgety. You don't actually want to measure if a user scrolls down all the way to the bottom of the page. Most of the time, the post article is just part of the page and there can be other content near the bottom of the page (newsletter subscriptions, footers, social sharing options, ads, etc). You can play around with scroll percentages, but these can vary a lot based on the user's device. With the new Element Visibility trigger, we can detect if a certain element is visible or not. With this technique, we can set a trigger for the beginning of the post content and a trigger for the end of the post content. In my theme, every post has a header element and after every post, I display a newsletter subscription form. I can use these two elements to mark the start and the end of my posts.

tag manager element visibility

The above trigger marks the beginning of my post as soon as the header is visible for at least 10%. The next trigger will mark the end of the post by looking if the subscribe form becomes visible for at least 10%.

tag manager end reading trigger

Creating event tags in Tag Manager

Now that we have our triggers we need to create some tags to send data to Google Analytics. We're going to have to create Google Analytics Goals later, so these will all be Google Analytics event tags. For the form tags, I'm going to use Submit as the event action and Contact Form and Newsletter Form as the event category for the form tags.

tag manager form tag

For the social tags I'm going to use Social as the event category and Facebook Share and Twitter Share for the event action. I'm also going map the Page Title as the event label. This will allow me to attribute a specific page to a social share later on in my reporting.

tag manager social tag

Measuring reading engagement will also require two Google Analytics event tags. I'm going to use Engagement as the event category and Start Reading and End Reading for the event actions. Make sure to attach the correct triggers that correspond with the event action. Here, the event label will also be mapped to the page title and these events need to be configured as non-interaction events. If you don't do that you're going to destroy your bounce rate metrics.

start reading tag

end reading tag

Setting up the Google Analytics goals

The last step is to create the actual goals in Google Analytics. But, before you do that, make sure your events are configured correctly and data is being sent to Google Analytics. An easy way to verify this is to go to your Real-Time Events report in Google Analytics. Go through your site and make sure your events are showing up in your real-time report. If not everything is coming in correctly, switch Tag Manager to preview mode and start debugging.

The goals we're going to set-up all follow the same workflow. Every goal is going to be a custom event based goal. In Google Analytics, goals are created on the view level, so if this is your first goal, go to Admin, select your view, open up the goals page. Let's create our form conversion goals first.

google analytics form conversion goal

As you can see in the example above you need to set the same values for event action and category as you configured in the Tag Manager event tags. You can leave the event value checked, it won't do anything as we don't send an event value, but if you want to attribute some value to your events you can uncheck and define a custom value.

Setting up the social sharing goals is just like creating the form conversion goals. Make sure to set the exact values for the event action and event category. As a bonus, you could also create one extra goal with just the category if you want to measure total conversions for all shares.

google analytics social goals

To measure reading engagement we're just going to set-up one goal. It's no use tracking Start Reading conversions, as that's almost always going to be 100%. So we just need to set-up a goal for the End Reading event action.

reading_goal_01

This concludes our basic setup. If you're browsing through your reports you're now going to notice that you'll have conversion metrics available based on all your configured goals and you can also use the event data to segment reports or create custom reports for social sharing, engagement and for submissions.

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 2)
Share this

Subscribe and get the good stuff