Landing Page Tracking with Google Tag Manager

As a Digital Marketer, you often need to create special-purpose landing pages – most commonly for digital advertising campaigns or email marketing campaigns.
How do you incorporate these landing pages into your analytics and conversion tracking?
It can be tricky because these landing pages may not be part of your main website. They maybe in a subdomain, such as landing.mysite.com, or even in a completely different domain. So, how to you integrate this tracking with your main website tracking? After all, you need to be able to tie back activity (e.g., sales and conversions) on the main site with lead generation from the landing page.
In addition, you may need multiple types of tracking on the landing pages – Google Analytics, Google AdWords, Bing, etc. You probably don’t want to install and maintain all those trackers.
Sound familiar? If so, this post offers a solution using Google Tag Manager (GTM). GTM gives you tools you can use to integrate Google Analytics tracking on your landing pages with the tracking on your main website. It can also handle deploying multiple trackers (e.g., AdWords, Bing Ads) on your landing pages.
For the purposes of this post, we are going to assume that your landing pages are hosted in WordPress. If that is not the case, most of it will still be relevant to you anyway.

 

Blog Image Landing Page

 

Step 1 – Create a Google Tag Manager Container

If you haven’t done so already, create a GTM container. Navigate to the Admin section, and click on the gear symbol next to “Install Google Tag Manager”.

 

Getting the Google Tag Manager Code Snippet

 

This will bring up a code snippet that you are going to add to the WordPress site that contains your landing pages.

 

Google Tag Manager Code Snippet

 

Step 2 – Install Google Tag Manager on your WordPress Platform

For instructions on installing GTM, see our earlier post: How to Install Google Tag Manager in WordPress.

Once Google Tag Manager is installed, you can use it to deploy Google Analytics, Google AdWords, Bing Ads, and other types of tracking on your landing pages. The beauty of using Google Tag Manger is that you don’t need modify the code on your WordPress site any further to add these additional trackers. The deployment of additional trackers can be managed from Google Tag Manager simply by creating new Tags.

This magic happens because the GTM tracking code that is already on your site will dynamically load the JavaScript code required to implement any Tags that you create. So, when a user views your landing page, the GTM tracking code automatically loads whatever trackers you have configured (e.g., Google Analytics, Google AdWords) and adds their tracking code to the page. For a more detailed description of how GTM works, see Google Tag Manager: How it works.

Now, lets take a look at how to configure Google Tag Manger to install Google Analytics and Google AdWords.

Step 3 – Installing Google Analytics using Google Tag Manager

The next step is to configure Google Tag Manager to add Google Analytics to your landing pages. To add Google Analytics, you need to know your Tracking ID. To find that, log in to Google Analytics, click on the Admin menu, and then click “Property Settings” under the Google Analytics property that you want to use for tracking your landing pages.

 

Get the Google Analytics Tracking Id

 

You then need to copy the Tracking ID you find here in to the GTM Tag that you create for Universal Analytics. To do that, select “Tags” in GTM and click on “New”. Under “Choose Product” select “Google Analytics”. Next, under “Choose a Tag Type” select “Universal Analytics” and click “Continue”. Now, under the “Configure Tag” section, paste the GA Tracking Id into the “Tracking ID” field. Finally, under the “Fire On” heading, select “All Pages” – this will cause a Google Analytics page view to be fired on every page where you have installed GTM.

In our case, this means that every page in the sub-domain landing.megalytic.com will include Google Analytics tracking.

 

Setting up Google Analytics Tracking in Tag Manager

 

Managing Google Analytics Across Sub-Domains with Google Tag Manager

We have installed the same Google Tag Manager tracking code on our main website – megalytic.com. And, now we are running it on landing.megalytic.com as well. Without some extra configuration, this setup can cause problems. Specifically, whenever a user moves from landing.megalytic.com to megalytic.com (e.g., when they create a Megalytic account), Google Analytics will start a new Session on megalytic.com and list landing.megalytic.com as the referrer. We do not want that, because we want to treat this as one Session and capture the conversion, as well as the Source/Medium, Campaign, etc. that brought the user to the landing page in the first place.

To solve this, we need to configure Google Analytics to treat the hits on landing.megalytic.com and megalytic.com as part of the same Session. If you are not using Google Tag Manger, this configuration involves some confusing custom coding. But, with Google Tag Manager, there is a much simpler approach using Auto Link Domains. Here are the steps that we used.

Going back to the Google Analytics Tag, click on the small pencil icon next to “Configure Tag” to edit the configuration. In order to integrate the landing page domain with the primary domain, set the Field named “allowLinker” to true, and “cookieDomain” to true. And, under “Cross Domain Tracking” enter both domains: landing.megalytic.com and megalytic.com.

 

Google Analytics Link Domains in Tag Manager

 

NB: Simo Ahava has pointed out to me that, in this specific case, because landing.megalytic.com is a sub-domain of megalytic.com, we do not need to set “allowLinker” to true, nor configure the Auto Link Domains. However, if you are using separate domains, like mydomain.com and otherdomain.com, then you would need to configure cross-domain tracking. You can see Simo’s comments here.

Next, you need to make some adjustments in your Google Analytics account. Head over to the Admin section of Analytics, and open the Property configuration (center column). Click on Referral Exclusion List to open a table where you can enter domains that are not allowed to be referral sources.

 

Google Analytics Opening the Referral Exclusion List

 

You need to add both your landing page domain and your primary domain to the Referral Exclusion List. That way, when a visitor moves from one domain to the other, in either direction, it will not overwrite the Google Analytics Source / Medium.

For example, if a visitor arrived on your landing page from clicking on an AdWords ad, then the Source / Medium for that visit will be “google / cpc”. If you do not have your landing page in the Referral Exclusion List, and the visitor navigates to your main domain, then “landing.yourdomain.com / referral” will overwrite the “google / cpc” data and you will lose track of the fact that this Session can from AdWords.

However, if you add the domains to the Referral Exclusion List as indicated here, then the true source of the visit – “google / cpc” – will be maintained.

 

Excluding Referrers in Google Analytics

 

NB: Simo Ahava also pointed that here, because we are working with sub-domains, we only need to include the top-level domain as a referral exclusion. This is because the Referral Exclusion List uses an open-ended match, and landing.megalytic.com will match on megalytic.com. Again, however, if you are using separate domains, like mydomain.com and otherdomain.com, then you would need to put both of them in the Referral Exclusion List.

Step 4 – Installing Google AdWords Tracking using Google Tag Manager

Once Google Analytics is installed on your landing page, you may want to install additional tracking. For example, if you are driving traffic to your landing page from AdWords, and your landing page includes a form for conversion, you will probably want to track AdWords conversions.

To do that, all you need to do is create an AdWords Conversion Tracking Tag and fire it on the “Thank You” page.

Detailed instructions are provided here: Setting Up Conversion Tracking in AdWords.

Conclusions

Adding tracking to your landing pages is dramatically simplified by using Google Tag Manager. Particularly if your need to install Google Analytics and your landing pages are running on a different domain than your main website. That’s because Google Tag Manager reduces the once complex chore of implementing cross-domain tracking to a simple configuration exercise. In addition, Google Tag Manager makes it easy to add additional tracking code (e.g., AdWords, Bing Ads) to your landing pages without any additional coding.

How to Modify Your 3rd Party WordPress Theme using a Child Theme

You’ve created your website using a WordPress theme that your company purchased. Now you need to modify the appearance or functionality on the site. What do you do?
You don’t want to edit the 3rd party theme that you are using, because you lose backward compatibility. That is, when new versions of the theme come out, you will not be able to upgrade without losing your changes.
One good solution to this problem is to create a child theme to contain your changes. Then, when your 3rd party theme is upgraded, you can install the upgrade and simply re-apply your child theme.
WordPress provides documentation on creating Child Themes. In this post, we take you, step by step, through the technique. We use as our examples:

  1. Changing fonts and tag styling in the theme in order to match company standards.
  2. Adding Google Tag Manager tracking code to the theme.

 

Blog Image of Word Press Child Theme

 

Step 1 – Create a Folder for Your Child Theme

To get started, navigate to the /wp-content/themes folder in your WordPress installation. Find your theme. Say it is named mytheme. Then, create a new folder named mytheme-childtheme.

The Megalytic support website uses a 3rd party theme called KnowHow. So, after creating a directory for its child theme, our /wp-content/themes folder looks like this:

 

Create a Directory for the Child Theme

 

Step 2 – Create Your Child Theme’s style.css File

Next, you need to create a style.css file inside your child theme folder. This is the first of two required files. The child style.css file can be used to hold any CSS that you would like to include to modify or add to the parent theme. It must begin with an official stylesheet header.

/*
 Theme Name:   KnowHow Child Theme
 Theme URI:    http://herothemes.com
 Description:  Child theme for KnowHow
 Author:       Chris Mooney (Swish Themes)
 Author URI:   http://herothemes.com
 Template:     knowhow
 Version:      1.0.0
*/

WordPress uses this header information to place your child theme in the Appearance Themes Screen, where you will be able to activate it once it is complete.

The most important field in this header is “Template”. It must be set to the directory of the parent theme. In our case, this is knowhow.

Some 3rd party themes will come with a skeleton of a child shell child theme already included. That was the case with our KnowHow theme. If this is the case with your theme, you many need to modify the child style.css that has been included to bring it up to date with current WordPress best practice. Specifically, if you see an @import_url for the parent theme, you need to remove it.

Below are the headers for the KnowHow parent theme and the child theme skeleton that was provided.

 

Parent and Child Theme Headers

 

Step 3 – Create Your Child Theme’s functions.php File

In addition to the style.css file, you need to create a functions.php file. The purpose of this file is to load the parent theme’s style.css file before loading the modifications and additions in the child theme’s style.css file.

Your functions.php file should define a function that loads the parent’s style.css file and then the child’s style.css file. Technically, loading the child’s file is optional, because it should happen automatically. But, it doesn’t always work, so it is a good idea to include the extra code.

Use the wp_enqueue_style function to add the stylesheets. The code shown below works if the parent theme has only one main style.css to hold all of the css. If your parent theme has more than one .css file (eg. ie.css, style.css, main.css) then you need to enqueue each of them explicitly.

The first wp_enqueue_style function call here loads the parent style since get_template_directory_uri returns the parent theme directory when used in a child theme. Likewise, the second wp_enqueue_style function call loads the child style since get_stylesheet_directory_uri returns the child theme directory when used in a child theme. In this second function call, the third parameter is an array of dependencies. It includes only the parent, which ensures that the parent style will load before the child style.

<?php

function theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

/* Insert custom functions here */


?>

Step 4 – Include Modifications in your Child Theme

Steps 1 – 3 have set up your child theme. But, right now there is nothing in the child theme, so it will look and act exactly like the parent. You can now make changes in a variety of ways. One way is to modify or add styles to the child theme’s style.css file.

Customizing the Fonts and Tag Styles

Suppose for example, that you wanted to use different fonts in the body and the h1, …, h6 tags. In that case you could add code like the following to the child theme’s style.css file.


/* ------- Insert custom styles below this line ------- */

@font-face {
    font-family: 'Pontano Sans';
    src: url('/lib/font/Pontano_Sans/PontanoSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/lib/font/Montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/lib/font/Montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

body {
    font-family: 'Pontano Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    clear: both;
    font-weight: 700;
    margin: 36px 0 12px;
    font-family: 'Montserrat', sans-serif;
}

Suppose that, in addition to changing some styles, you want to incorporate tagging into your site.

Adding Google Tag Manager to Every Page

One way to do that is to copy the parent’s header.php into the child theme directory. You can then edit this file, and the changes will override the parent’s file. In fact, your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads.

So, for example, to add Google Tag Manager (GTM) to your website via your child theme, simply copy and paste the GTM snippet in to your child’s header.php file, as shown below.

 

Google Tag Manager Tracking Code Inserted

 

Step 5 – Turning On Your Child Theme

When you are ready to test our your child theme, you can simply navagate to the Appearance > Themes menu choice from the left hand side of your WordPress administration area. There, you will see your new child theme listed among the other theme choices. Roll your mouse over the child theme and click on the “Activate” button. That’s all there is to it. Your child theme is now active. Go and test our your site to see if the changes you made to the child theme are working correctly.

 

Turn on the Child Theme

 

Conclusion

Child themes can be a big help when you need to make changes to a 3rd party theme. They make it possible to separate your customizations from the original theme that you purchased. This is particularly useful when your original theme is upgraded, because in that case you can simply install the upgraded parent theme, and apply your modifications using your child theme. Note that if your child theme is overriding a parent theme file – like the header.php given here – you will still need to merge the new header.php file into your child theme’s header.php file, and manually incorporate the upgraded changes. So, child themes are not a complete panacea for editing 3rd party themes, but they make like a lot easier by clearly isolating the changes you have made.

How to Install Google Tag Manager in WordPress

You probably know that Google Tag Manager is a great and free way to manage all of the tracking code needed on your website.
What you might not know, unless you are proficient with modifying WordPress Themes, is how to install Google Tag Manager in a WordPress site.
Fortunately, it is not that hard. You can get it done in less than 10 minutes. Here’s how.

 

Blog Image Install Google Tag Manager on WordPress

 

Read more