skip to Main Content

This is a basic step-by-step guide that will show you the simple steps to implement Google Analytics (GA) through Google Tag Manager (GTM) as well as set up your basic tags in GTM and corresponding goals in GA (like form submissions and calls).

I’ll cover the following:

 

Don’t worry, Google Tag Manager can be tricky to get your head around – This will make it easier

Even as an SEO professional I found that whenever I came to installing GA through GTM on a new site, I kept referring to my notebook on the steps I needed to take.

It was because Google Tag Manager can be a bit of a difficult program to get your head around. Whether you’re SEO professional, digital marketing manager or marketing analyst it can be tricky to navigate and know your triggers from your tags and your tags from your variables.

So, I thought I would share my notes with everyone else. In this guide I won’t necessarily say why I have done something, instead I’m just going to say how to do it – This is so you can do it quickly and refer back to this guide whenever you want to.

These GTM triggers and tags are great for small and medium sized websites, where you need to track the basic elements but not go too far into unnecessary levels of tracking.

 

First, things first: Add the Google Tag Manager code to your website

Once you’ve set up a Google Tag Manager account to your website ensure your developer (or you or your WordPress plugin) has installed the GTM code. For WordPress, the Google Site Kit plugin is excellent at installing this for you hassle-free.

How to set up Google Analytics in Google Tag Manager:

  1. In GTM create a new tag
  2. Call your tag “GA – Pageview – All Pages”
  3. Click the “Tag Configuration” box and select “Google Analytics: Universal Analytics” for the tag type
  4. Under “Track Type” select “Pageview”
  5. Under “Google Analytics Settings” Select “New Variable…”
  6. Paste in Your GA Universal Analytics ID (e.g. “UA-12345…”) and call the variable “Google Analytics UA”
  7. Set the “Cookie Domain” to “Auto” and click “Save”
  8. Select the trigger to “All Pages”

To check this is working open up the GTM preview and debug mode and then head over to your GA account and open up the Real Time > Content report. Your pageviews should be coming through. When you’re happy you can publish your GTM workspace.

This might be all you want for your setup, but I’ve included below some extra basic tags you can use to track goals and other areas.

 

How to track form submissions in Google Tag Manager and Google Analytics (not using Contact Form 7)

If you have a form that redirects to a thank you page (on a separate URL) then you don’t need this tag. This tag is based on a “thank you” type message that often appears underneath a form after completion. Using the Contact Form 7 plugin? There’s a separate guide for this further below.

  1. Firstly, in GTM go to Variables > Configure and ensure the variables underneath “Visibility” are checked
  2. Create a new Tag
  3. Call your tag “Contact Form Submission”
  4. Click the “Tag Configuration” box and select “Google Analytics: Universal Analytics” for the tag type
  5. Under “Track Type” select “Event”
  6. For “Category” write “Contact”
  7. For “Action” write “Form Submission”
  8. For “Label” click the plus and select “Page Path”
  9. For “Non-interaction hit” select “True”
  10. Under “Google Analytics Settings” select your GA profile
  11. For the trigger, select “Element Visibility”
  12. (Here is where it gets a bit trickier) Complete a test submission on your form. When the success message appears, highlight it and then click inspect. Here is an example of the code you might see:<div class=”wpforms-confirmation-class” id=”wpforms-confirmation-id” /><p>Thanks for contacting us!</p></div>
    Using this example under the “selection method” we can select ID and add “wpforms-confirmation-id” in the box or select CSS Selector and add “.wpforms-confirmation-class” (Note that if you use CSS Selector you need to add a full stop at the beginning)
  13. Under “When to fire this trigger” select “Once per page”
  14. Under “Minimum Percent Visible” write “5”
  15. Select “Observe DOM changes”
  16. If this is your only contact form select “All Visibility Events” and click Save. (If you have multiple contact forms then you may need to select “Some Visibility Events” and narrow down the filter – this can often be done by page path e.g. “Path Path > Equals > /contact”).

How to set up the Google Analytics Goal

  1. Go to Admin
  2. Go to View > Goals > +New Goal
  3. Under “Goal Setup” select “Custom” and click continue
  4. For the name write “Contact Form Submission”
  5. Under “Type” select “Event” and click continue
  6. Enter the following details, “Category > Equals to > Contact”, “Action > Equals to > Form Submission”
  7. Click Save.

To check this is working open up the GTM preview and debug mode and then head over to your GA account and open up the Real Time > Conversions report. Your goals should be coming through when you complete a test form submission.

 

How to track ‘Contact Form 7’ submissions in Google Tag Manager & Google Analytics

Since around August 2020, CF7 got a bit trickier to track and the above element visibility method couldn’t now be used, but here’s how you can still track successful submissions in CF7:

  1. In GTM, create a new Tag
  2. Call your tag “Contact Form 7 – Event Listener”
  3. For Tag Type select “Custom HTML”
  4. In the HTML box paste the following code:

    <script>

    document.addEventListener( ‘wpcf7mailsent’, function( event ) {
    window.dataLayer.push({
    “event” : “formSubmit”,
    “formId” : event.detail.contactFormId,
    “fields” : event.detail.inputs
    })
    });
    </script>
  5. For the trigger select “All Pages”
  6. Create another new Tag
  7. Call it “Contact Form 7 – Contact Submission Success”
  8. For the Tag Type select “Google Analytics: Universal Analytics”
  9. Under “Track Type” select “Event”
  10. For “Category” write “Contact”
  11. For “Action” write “Form Submission”
  12. For “Label” click the plus and select “Page Path”
  13. For “Non-interaction hit” select “True”
  14. Under “Google Analytics Settings” select your GA profile
  15. For the trigger, create a new trigger and select trigger type as “Custom Event”
  16. Call the trigger “Custom – Form Submit”
  17. For the Event Name call it “formSubmit”
  18. Trigger it on “All custom events”
  19. Click Save.

How to set up the Google Analytics Goal

  1. Go to Admin
  2. Go to View > Goals > +New Goal
  3. Under “Goal Setup” select “Custom” and click continue
  4. For the name write “Contact Form Submission”
  5. Under “Type” select “Event” and click continue
  6. Enter the following details, “Category > Equals to > Contact”, “Action > Equals to > Form Submission”
  7. Click Save.

To check this is working open up the GTM preview and debug mode and then head over to your GA account and open up the Real Time > Conversions report. Your goals should be coming through when you complete a test form submission.

 

How to track phone calls in Google Tag Manager & Google Analytics

Setting up to track a phone call when a user taps the number on their phone is relatively straightforward. Here’s how to do it:

  1. Firstly, in GTM go to Variables > Configure and ensure the variables underneath “Clicks” are checked
  2. Create a new Tag
  3. Call your tag “Phone Calls”
  4. Click the “Tag Configuration” box and select “Google Analytics: Universal Analytics” for the tag type
  5. Under “Track Type” select “Event”
  6. For “Category” write “Contact”
  7. For “Action” write “Phone Call”
  8. For “Label” click the plus and select “Page Path”
  9. For “Non-interaction hit” select “False”
  10. Under “Google Analytics Settings” select your GA profile
  11. Create a new trigger and for the Trigger Type select “Clicks > All Elements”
  12. Call the trigger “Click – Phone Call Tap”
  13. Under “This trigger fires on…” select “Some Clicks”
  14. Select “Click Text > Equals > [your phone number exactly as it is on the website]”
  15. Click Save.

How to set up the Google Analytics Goal

  1. Go to Admin
  2. Go to View > Goals > +New Goal
  3. Under “Goal Setup” select “Custom” and click continue
  4. For the name write “Phone Call”
  5. Under “Type” select “Event” and click continue
  6. Enter the following details, “Category > Equals to > Contact”, “Action > Equals to > Phone Call”
  7. Click Save.

Ryan is a Freelance Digital Marketing & SEO Consultant based in Cambridge & Hertfordshire.

Back To Top