How to Record Conversions in Google Analytics Universal Analytics, Google Analytics 4 (GA4) and Google Tag Manager – JavaScript and GTM Native Methods

Goals keep us progressing. Google Analytics allows us to track goals.

(With GA4, we use Conversions instead of Goals. Keep up!)

This article will look at how to implement goals/conversions using several different styles of setups:

Products:

• Google Analytics Universal Analytics
• Google Analytics 4

Styles:

• Non Google Tag Manager implementation
• Native Google Tag Manager implementation
• JavaScript generated Google Tag Manager implementation

Recording goals with Google Analytics Universal Analytics, no Google Tag Manager

Previously, with Google Analytics Universal Analytics, we could record goals like this:

ga('send', 'event', 'SignUp', 'signup form - a', 'button');

This would create an event in Google Analytics. We would then go into Google Analytics and set up a Goal using the details from this event.

Easy, peasy, nice and easy.

Recording goals with Google Analytics Universal Analytics and Google Tag Manager (native style)

Down the line, Google decided to create Google Tag Manager. As a developer I find this product confusing. It’s sold as a way to make “tags” easier to manage, but that has not been my experience.

Let’s say we now want to use Google Tag Manager and record goals. How do we do it?

1. Create a Google Tag Manager container for your domain.
   1. Bonus: Set up staging and live environments for testing. You can use the preview method to bypass this setup initially.
2. Add the Google Tag Manager embed code to the HEAD and BODY of your site pages.
3. Create the Google Analytics Universal Analytics tag.
   1. Click on “Tags” in Current Workspace
   2. Click “New” button
   3. Replace “Untitled Tag” with “Google Analytics Universal Analytics” tag
   4. Click “Tag Configuration” box, then click “Google Analytics: Universal Analytics” row
   5. Leave “Track Type” to “Page View”
   6. For the “Google Analytics Settings” drop down, select “New Variable”
      1. Replace “Untitled Variable” with “Google Analytics Universal Analytics Tracking ID”
      2. Add your tracking ID to the “Tracking ID” text box
   7. Back on the “Google Analytics Universal Analytics” tag setup, click on the “Triggering” box
   8. Click on the “All Pages” row
   9. Click the “Save” button
   10. Now you can click the “Publish” button

Recording goals with Google Analytics 4 and Google Tag Manager (native style)

1. Add the Google Analytics Google Analytics 4 tag to the container
2. Create new Trigger

Recording goals with Google Analytics 4 and Google Tag Manager (JavaScript style)

1. Add the Google Analytics Google Analytics 4 tag to the container
   1. Add the following JavaScript to your code
      window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event' : 'phoneClickEvent',
'clickCategory' : "phone-click",
'eventCallback': function(container) {
// JavaScript callback
}
});
2. Add a new Trigger
   1. Name: “Phone Click”
   2. Trigger Type: “Custom Event”
   3. Event Name: “phoneClickEvent”
   4. The trigger fires on:
      Event equals phoneClickEvent
   5. It’s important that the “Event Name” and firing trigger match the dataLayer push event name above
3. Add a new Tag
   1. Tag Type: “Google Analytics: GA4 Event”
   2. Event Name: “Phone_Click”
   3. Triggering / Firing Triggers: Select “Phone Click” trigger from before
   4. The “Phone_Click” event name is what will appear in Google Analytics