Click here to Skip to main content
15,845,565 members
Articles / Programming Languages / Javascript

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

Rate me:
Please Sign up or sign in to vote.
4.60/5 (3 votes)
18 Nov 2015CPOL3 min read 21.1K   3   1
How to push a simple E-Commerce transaction using the new V2 code


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.


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.


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:


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() {
          .done(function (postOrderResponse) {
function publishGoogleAnalyticsMessage(model) {
		'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.


  • First version


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

Written By
Software Developer (Senior)
Italy Italy
This member doesn't quite have enough reputation to be able to display their biography and homepage.

Comments and Discussions

GeneralMy vote of 4 Pin
Santhakumar M18-Nov-15 8:56
professionalSanthakumar M18-Nov-15 8:56 
Nice tips

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.