Pushing Google Tag Manager Data Layer (V.2) in a Single Page Application

Introduction

I’ve found a lot of articles about Google Analytics (GA) and how to fill the GTM datalayer, but none of these were focused in the ecommerce variables (unless something related to v1).

It was also difficult to find any example within a single page application highlighting how to trigger an event in a virtual page rather than a classic web page. So I decided to share what I’ve done.

Background

The application is an E-Commerce web site with a Single Page Application architecture. The User Interface is built with the Knockout JavaScript framework and server-side code is developed with .NET in C#.

The goal is to capture an E-Commerce transaction and send its data to the Google Tag Manager (GTM) datalayer. In this tip, I’ll always talk about standard E-Commerce tag rather than Enhanced E-Commerce. The main difficulty is to set up in a proper way the whole environment and obviously to capture the transaction only at the end of the flow, so this means only when the purchase is actually done.

Solution

I avoid going deeply in Google Analytics itself because you can find tons of articles about it (i.e. Google Developers References). Anyway setting up the environment is not so difficult but you have to pay a lot of attention in the details, let’s see.

The first step is to create a view within your Google Analytics account and enable its E-Commerce setting in this way:

The second step is to create the variables we would like to fill in a brand new GTM tag. So open your GTM container and create a new tag, then go to the variables and set it up as follows:

Let’s also see in detail how to configure a datalayer variable:

As a third step, we need to link our GA view with our GTM tag:

The Tracking ID is the link pointing to our view (is obfuscated for privacy reason). Tag Track Type is set to Transaction, so in this way we're informing GA we are actually going to fill a datalayer with E-Commerce data. Finally, the Fire On is set to a new trigger created in this way:

This is one of the trickiest parts in our configuration: the fire event is a custom event that fires only when we will fill the built-in variable Event with the value event. Also pay attention to the event name! It must be named event because GTM will look for the value in the built-in variable Event raised by a custom event named event, do you know why? No? Me neither.

Now we are ready to fill our datalayer. Basically, what we need is to add the code to push data to GA, just at the end of the checkout flow. Let’s assume we have a placeOrder function like this:

function placeOrder() {
    ...
        checkoutModel.checkout().postOrderPromise()
          .done(function (postOrderResponse) {
              publishGoogleAnalyticsMessage(postOrderResponse);
              publishOrderPlacedSuccessfully(postOrderResponse);
          })
    ...
}
 
function publishGoogleAnalyticsMessage(model) {
    ...
	window.mwgAnalyticsDataLayer.push(
	{
		'event': 'event',
		'transactionId': model.OrderId,
		'transactionAffiliation': ogs.config.StoreAddress.FirstName,
		'transactionTotal': Number(total.replace(/[^0-9\.]+/g, "")),
		'transactionProducts': transactionProducts
	});
    ...
}

One possible way to fill transactionProducts is:

function buildProductItemForGoogleAnalytics(orderItem) {
	var product;

	var price = orderItem.CurrentPrice;

	product = {
		'sku': orderItem.Sku,
		'name': orderItem.Name,
		'category': orderItem.CategoryName,
		'price': Number(price.replace(/[^0-9\.]+/g, "")),
		'quantity': orderItem.Quantity
	};

	return product;
}

As you can see, price variable wants only numeric value freed from the currency symbol.

That’s it! Once you have pushed your E-Commerce datalayer, wait for some minutes to allow Google Analytics to update itself and go straight to your fantastic report that should be something similar to this:

Points of Interest

Google Analytics is a fantastic and powerful tool, but needs a little bit of patience in setting it up.

History

• First version