Click here to Skip to main content
12,444,237 members (47,404 online)
Click here to Skip to main content
Add your own
alternative version

Stats

5K views
3 bookmarked
Posted

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

, 17 Nov 2015 CPOL
Rate this:
Please Sign up or sign in to vote.
How to push a simple E-Commerce transaction using the new V2 code

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:

GA View

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:

GTM Variables

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

GTM Variables

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

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:

GTM Trigger

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:

GA Report example

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

danlup
Software Developer (Senior)
Italy Italy
Almost 20 years of experience in Microsoft environment developing both web and windows form applications.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
GeneralMy vote of 4 Pin
Santhk18-Nov-15 7:56
professionalSanthk18-Nov-15 7:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160811.3 | Last Updated 18 Nov 2015
Article Copyright 2015 by danlup
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid