Analytics Conversion Funnel: Ajax & Google Tag Manager

Tutorial: Set up Universal Analytics Funnel for Ajax websites using Google Tag Manager

Ralph Grundmann · Published on 23 March 2016

This article is from our archive and reflects the situation as of March 2016.

From a user’s and web developer’s perspective, the use of Ajax brings many advantages. Only the necessary data travels between the server and the browser, which speeds up the page and reduces data transfer for the website owner.

The use of Ajax can complicate web analytics.

Ajax and web tracking

For advertisers, the use of Ajax often poses a significant problem for web analytics. On pages with their own URL, you could set goals and funnel steps directly from the URL in Google Analytics. In an Ajax checkout, the URL often stays the same and the whole payment process runs on a single page such as /order, so a URL alone cannot identify a target page or an intermediate step. In the following article, we describe how to visualise the analytics conversion funnel with Google Tag Manager and virtual page views, even when the checkout uses Ajax.

The solution: Implementation of virtual URLs and data layer variables

Virtual URLs and DataLayers

In this example, we implement a conversion funnel over 5 steps. Before you start, decide which virtual URLs (virtualPageURL) you want to use, how many steps to track and what to call each page (virtualPageTitle). This information is passed to Google Tag Manager through the data layer when a specific event occurs, as explained below.

You do not necessarily have to use a virtualPageTitle. However, it is advisable, as the URL and Title are displayed as primary dimensions in Analytics!

Naming of the funnel steps

1. Basket

virtualPageURL: /step1-basket
virtualPageTitle: Checkout Step 1 - Basket

2. Address entry

virtualPageURL: /step2-address
virtualPageTitle: Checkout Step 2 - Address

3. Payment information

virtualPageURL: /step3-payment
virtualPageTitle: Checkout Step 3 - Payment

4. Order review and confirmation

virtualPageURL: /step4-confirmation
virtualPageTitle: Checkout Step 4 - Confirmation

5. Thank you page

virtualPageURL: /step5-thankyou
virtualPageTitle: Checkout Step 5 - Thank you

Integrate DataLayer / data layer variable on the website

Implementation on the website

To implement the data layer, you need access to the source code of the website. First, create the data layer as high up in your source code as possible, above the GTM snippet:
window.dataLayer = window.dataLayer || [];
Your application fills it with data at runtime.

For each step of the funnel, your application passes specific information to the data layer with a dataLayer.push command. Call dataLayer.push in your application’s JavaScript, in the function that displays the respective checkout step, because script elements inserted into the page later via innerHTML are not executed. Here is what the following JavaScript means:

dataLayer.push: This statement passes information to the data layer.
event: This key names the event that the GTM trigger listens for. In our example, we named the event “checkout”. Use lower case in the trigger as well.
virtualPageURL: See above. Relative URL to be tracked.
virtualPageTitle: See above. Page name to be tracked.

The JavaScript you need to populate the data layer at each step

Define DataLayers

1. dataLayer.push command for the basket

dataLayer.push({
'event':'checkout',
'virtualPageURL':'/step1-basket',
'virtualPageTitle':'Checkout Step 1 - Basket'
});

2. dataLayer.push command for address input

dataLayer.push({
'event':'checkout',
'virtualPageURL':'/step2-address',
'virtualPageTitle':'Checkout Step 2 - Address'
});

3. dataLayer.push command for the payment data

dataLayer.push({
'event':'checkout',
'virtualPageURL':'/step3-payment',
'virtualPageTitle':'Checkout Step 3 - Payment'
});

4. dataLayer.push command for the order review and confirmation

dataLayer.push({
'event':'checkout',
'virtualPageURL':'/step4-confirmation',
'virtualPageTitle':'Checkout Step 4 - Confirmation'
});

5. dataLayer.push command for the thank you page

dataLayer.push({
'event':'checkout',
'virtualPageURL':'/step5-thankyou',
'virtualPageTitle':'Checkout Step 5 - Thank you'
});

Create custom data layer variables to prepare tracking

Create custom variables in the GTM backend

First, create the variables virtualPageURL and virtualPageTitle once. A data layer variable reads a value from the data layer so that GTM can use it. Click “Variables” in the left-hand navigation, then click “New” next to “User-Defined Variables”. In the window that opens, click “Variable Configuration”, select “Data Layer Variable” and configure it as follows.

Naming and settings of the custom data layer variables

Configure custom data layer variables

Now choose a label for the variable, in our example it is called “DLV – VirtualPageUrl” (DLV stands for “DataLayer Variable”).

Important: The label of the data layer variable should not be confused with the name! These can be identical, but they do not have to be.

Enter the exact key from the code as the data layer variable name, in our example “virtualPageURL“. Upper and lower case must match. Leave the data layer version on “Version 2”, which also reads nested values. Now save the variable and repeat the process for the variable “virtualPageTitle“.

Definition of the "trigger", when an event should be fired

The "Virtual PageView Trigger"

Next, create the trigger. It determines when the tag fires. As mentioned above, we use the event “checkout” for this purpose. In Google Tag Manager, click “Triggers” on the left, then “New”, and select “Custom Event” as the trigger type.

Now name the trigger, for example “Checkout Step 1 – Basket” as in our example. In the “Event name” field, enter our event name “checkout”. Under “This trigger fires on”, select “Some Custom Events” and add two conditions: the data layer variable for virtualPageURL equals /step1-basket, and the data layer variable for virtualPageTitle equals “Checkout Step 1 – Basket”. Then click “Save”.

This trigger fires when the event “checkout” occurs AND both conditions for virtualPageURL and virtualPageTitle are met.

Now repeat the step for all 5 funnel steps.

Virtual PageView Trigger: Example for Step 2

Each step of the payment process requires its own trigger, so repeat the process accordingly. A simple way is to use the “Copy” function, just adjust the title as well as virtualPageURL and virtualPageTitle. The event “checkout” in the trigger does not change.

Once all triggers for the five steps are created, make sure that the above defined data layer variables are output by the Ajax application at the respective steps. If these values are missing, tracking cannot work, for two reasons: the event “checkout” that fires the tags does not occur, and virtualPageURL and virtualPageTitle, which the individual funnel steps need, are not available.

Create UA tags for funnel visualisation

Google Analytics funnel event tags

For each step in the checkout process, you now create a corresponding Analytics tag and connect it to the respective trigger. So, click on “Tags” in the GTM backend, then “New” and select the predefined Universal Analytics tag. Add your tracking ID and select “Track Type” PageView.

Important: Check the box for “Enable overriding settings in this tag” under “More Settings” and select “Fields to Set”. Here, the predefined standard variables “page” for “virtualPageUrl” and “title” for “virtualPageTitle” must be used.

Finally, click on “Trigger” “Select Trigger” and choose the previously defined trigger for /step1-basket. As with the triggers, you must repeat this process for all steps in the checkout process.

Check the implementation with the "Google Tag Assistant"

Debugging in Google Tag Manager

The GTM Debugging Tool “Google Tag Assistant” is a convenient feature to quickly identify potential sources of errors and to get information about the current content of the data layer variables. Use Preview to test your changes before you publish the container. Click “Preview” at the top right.

If you now add a product to the basket and view it, “UA – Goal Funnel Tracking – Step 1” should be visible under “Tags Fired”.

If this is not the case, you can click on the “Data Layer” tab to determine whether the information is correctly present to fire the tag.

Finally, only the individual funnel steps need to be added to Analytics.

Define Analytics Conversion Funnel Steps

In the last step, we will now define the Analytics conversion funnel for a goal (e.g. a sale). Click on the gear “Admin” in the bottom left of Analytics, then on the far right under “All Website Data” click on “Goals”. Here you can now create the new goal along with the funnel. Enter the thank you page /step5-thankyou as the destination, as shown in the screenshot. Then toggle the “Funnel” switch and enter the individual funnel steps as shown in the screenshot. You can find the funnel by clicking on “Conversions” / “Goals” / “Funnel Visualization” in Analytics.

Quickly and easily check with "real-time data" whether the data is coming in correctly.

Funnel visualisation in Analytics

If you now look at the real-time analysis, the individual steps should be visible there under “Real-time” and “Content”. To check the correct flow of data, click through the order process and observe the display of the individual steps in the real-time view at each step.