NOTE: This article is applicable to our Classic Checkout solution only.
(5-7 min read)
What is Google Analytics event tracking?
Events are user interactions with content that can be tracked independently from a web page or a screen load. Downloads, mobile ad clicks, gadgets, Flash elements, AJAX embedded elements, and video plays are all examples of actions you might want to track as Events. Read more about events from the Google Analytics site.
How to set up GA event tracking?
In this article, we are going to cover login/registration and purchase flow for event tracking. This flow contains events like:
- registrationComplete - Fired on successful registration
- alreadyRegistered - Fired on successful login
- selectedMethodView - Fired when the user opened select method view
- paymentInfoView - Fired when the user opened payment view with CC information
- paymentInfoSubmit - Fired when the user sent CC information
- purchaseComplete - Fired on complete purchase
The whole list of possible events is described in "What is Google Tag Manager" article.
Preparation
Create a GTM account and link it with your publisher account. Check the section "How to add GTM scripts to Live/VOD/login/checkout pages" which describes the whole process. You also need Google Analytics accounts, which is going to receive events fired by us during the event tracking described by an article.
Setup your first trigger with GA Tag (registrationComplete)
In the "What is Google Tag Manager" article you can find an example of creating triggers and tags, but here in that article, we are going to cover a certain path described above. Let's start with our first event "registrationComplete":
1. Open GTM admin panel and then open the "Triggers" section.
2. Click "New" button
3. Click on "Trigger Configuration" area.
4. Choose "Custom Event"
5. Set name of your event (used inside of GTM) and event name "registrationComplete" which is passed from the Cleeng platform.
6. Click Save.
7. Right now you should see a new trigger in the list.
8. Let's create a new tag. To do that first lets go to the "Tags" page (left menu)
9. Set name of your tag and click the "Tag Configuration" area to start the creation process.
10. Choose "Google Analytics - Universal Analytics"
11. Set the track type to "Event" and then set the Category and Action name required for Event Tracking. At the bottom of the form please check "Enable overriding settings in this tag" and pass there with your Google Analytics ID. When everything is filled, click "Save".
12. You final Tag Configuration should look like this.
13. Click on the Triggering area and choose the previously created trigger "Registration Complete - Trigger". Then save it.
Your first Trigger and Tag is created. For other events (alreadyRegistered, selectedMethodView, paymentInfoView, paymentInfoSubmit, purchaseComplete) you will need to repeat the process for each of them.
Testing configuration
To test your configuration you should use "Preview mode". Google Tag Manager’s preview mode allows you to browse a site on which your container code is implemented as if the current container draft was deployed so that you can test a container configuration before it is published. Sites with preview mode enabled will display a debug pane in the browser below the website content so that you can inspect which tags fired and in which order.
1. Enabling "Preview mode" is possible from each site of GTM by clicking the "Preview Mode" button in the top right corner.
2. To reflect each change in you GTM configuration you should click the "Refresh" button.
3. Right now in Cleeng Login/Checkout process, you should see GTM "Preview Mode"
4. If your event is properly configured you should see "Complete Registration" Tag fired after registration
5. In your Google Analytics dashboard you should see an event:
How to use “viewName” to trigger events?
Previously, in order to trigger events, we have used the “event” parameter from dataLayer code. However, there are some events worth tracking (like how many times users opened Checkout) which use a different parameter - “viewName”.
This parameter is not by default defined in GTM, therefore, before you can add tags and triggers, you need to configure it first.
Adding a new variable in GTM
In order to trigger events based on “viewName” parameter, you need to set up it as Variable in GTM.
1. Go to “Variables” in your GTM workbench
2. Click “New” in “User-Defined Variables” area
3. Set a name for this variable (for example “viewName Variable”) and click inside Variable Configuration field
4. From the list on the right-hand side, select “Data Layer Variable”
5. Set “viewName” as “Data Layer Variable Name” and press “Save” in the top right corner
Trigger event based on 'viewName' variable
Now that you have the “viewName” variable configured, you can use it to create triggers and tags. In this example, we will add an event that will be triggered when a user opens checkout. First, you need to create a trigger. The basics will be the same as before, however, there are two things which are different:
1. Select “Page View” as “Trigger Type”
2. Select “Some Page Views” as the option defining when the trigger should fire and add. Define the details of the specific event which will work with this trigger. In this case, the value of the viewName variable must equal to “viewCheckout” (since this is the value of the viewName parameter when Checkout is displayed).
3. Once you have the trigger, you can proceed with creating a tag. The process is exactly the same as before, just make sure to select the trigger you have just created.