A requirement on my last couple projects was to implement Google Tag Manager's Data Layer (GTM) in order to get eCommerce data to report in Google Analytics.
I have seen several custom implementations of this in Sitecore, most where developers end up writing some ugly spaghetti code in a view rendering that spits out the required data layer push script.
In this post, I will show you a clean way of implementing the data layer, that you can use as a guide in your own implementation if it is a requirement on your project.
This post assumes that your analytics team has configured the data layer in GTM and that they have provided you with the requirements to generate a data layer script in specific pages driven by targeted events.
The data layer is a piece of script that contains any information or variables that you want Google Tag Manager to read, and then report to Google Analytics - including eCommerce data.
Here is a great post that will help you to understand the true value of the data layer: Data Layer Demystified
As you can tell by the sample eCommerce script that was provided to me below, it is dynamic based on what items a visitor had purchased.
You can most certainly add the controller rendering to a specific placeholder that you have set up. Just be aware that the data layer code needs to be within the head element of your page, right before
your Google Tag Manager code:
Here is a sample script generated by a regular eCommerce page:
Here is sample script that was generated from an eCommerce "Purchase Complete / Thank You" page that had the eCommerce / transaction data loaded:
I have seen several custom implementations of this in Sitecore, most where developers end up writing some ugly spaghetti code in a view rendering that spits out the required data layer push script.
In this post, I will show you a clean way of implementing the data layer, that you can use as a guide in your own implementation if it is a requirement on your project.
This post assumes that your analytics team has configured the data layer in GTM and that they have provided you with the requirements to generate a data layer script in specific pages driven by targeted events.
What Is A Data Layer?
Before we get started, it's useful to understand what the data layer actually is.The data layer is a piece of script that contains any information or variables that you want Google Tag Manager to read, and then report to Google Analytics - including eCommerce data.
Here is a great post that will help you to understand the true value of the data layer: Data Layer Demystified
Use Case
As previously mentioned, I was required to generate a data layer push script to track a visitor's activity on a Sitecore eCommerce site, along with the ability to allow purchase information to be sent to the data layer on the "Thank You" page after a purchase was complete.As you can tell by the sample eCommerce script that was provided to me below, it is dynamic based on what items a visitor had purchased.
digitalData = [{
page: {
category: {
pageType: 'menu item',
},
pageInfo: {
experienceType: 'desktop',
sysEnv: 'prod'
}
},
user: {
profile: {
profileInfo: {
loginStatus: 'logged-in',
profileID: '12345'
}
}
},
ecommerce: {
purchase: {
actionField: {
id: 'T12345', //Unique transaction ID. Required for purchases and refunds.
affiliation: 'Catering',
revenue: '35.43', // Total transaction value, including tax and shipping.
tax:'4.90',
shipping: '0', //Always set to '0'.
coupon: '' //Always set to empty string
},
products: [{
'name': 'Fruit Tray', //Product Name
'id': '12345', //Product SKU
'price': '26', //Product Price
'brand': '', //
'category': 'Trays', //Product Category
'variant': 'Small',
'quantity': 1
},{
'name': 'Barbeque Sauce', //Product Name
'id': '12345', //Product SKU
'price': '2', //Product Price
'brand': '', //
'category': 'Add On', //Product Category
'variant': '',
'quantity': 1
}]
}
}
}];
My goal was to build the top section of the script on every eCommerce page, telling the Data Layer information about my visitor, and then add in the eCommerce section of the script when they completed a transaction.
I created the following C# classes from the JSON:
My method would take the data layer eCommerce object as a parameter, and add it to the parent data layer object if it was populated.
I added this into my repository layer using two methods.
The first method (GetDataLayerModel) generated the data layer object and took an eCommerce object as a parameter. As I mentioned before, it added the eCommerce object to my data layer object if it was populated.
I created a simple controller and coded the action to grab my eCommerce transaction data, and pass it over to the data layer methods that I had created before.
POCO Time
You will notice that the data layer script itself is in JSON data format. So, I decided to create a nice clean POCO that I would populate with the required data and then serialize and output to my pages.I created the following C# classes from the JSON:
public class DataLayerModel
{
public Page page { get; set; }
public User user { get; set; }
public Ecommerce ecommerce { get; set; }
}
public class Category
{
public string pageType { get; set; }
}
public class PageInfo
{
public string experienceType { get; set; }
public string sysEnv { get; set; }
public string destinationURL { get; set; }
public string pageName { get; set; }
}
public class Page
{
public Category category { get; set; }
public PageInfo pageInfo { get; set; }
}
public class ProfileInfo
{
public string loginStatus { get; set; }
public string profileID { get; set; }
}
public class Profile
{
public ProfileInfo profileInfo { get; set; }
}
public class User
{
public Profile profile { get; set; }
}
public class ActionField
{
public string id { get; set; }
public string affiliation { get; set; }
public string revenue { get; set; }
public string tax { get; set; }
public string shipping { get; set; }
public string coupon { get; set; }
}
public class Product
{
public string name { get; set; }
public string id { get; set; }
public string price { get; set; }
public string brand { get; set; }
public string category { get; set; }
public string variant { get; set; }
public int quantity { get; set; }
}
public class Purchase
{
public ActionField actionField { get; set; }
public List<Product> products { get; set; }
}
public class Ecommerce
{
public Purchase purchase { get; set; }
}
Hydrating The Data Layer
The next order of business was to write a method that would create and populate the object based on my data layer class.My method would take the data layer eCommerce object as a parameter, and add it to the parent data layer object if it was populated.
I added this into my repository layer using two methods.
The first method (GetDataLayerModel) generated the data layer object and took an eCommerce object as a parameter. As I mentioned before, it added the eCommerce object to my data layer object if it was populated.
1: public DataLayerModel GetDataLayerModel(Ecommerce commerceModel)
2: {
3: var currentItem = Sitecore.Context.Item;
4: var pageName = HttpUtility.JavaScriptStringEncode(currentItem.Fields[DisplayConstants.TitleField].Value);
5: var pageType = currentItem.TemplateName;
6: var experienceType = DisplayConstants.DesktopExperienceType;
7: var sysEnv = Sitecore.Configuration.Settings.GetSetting("DataLayerEnvironmentName");
8: var destinationUrl = HttpContext.Current.Request.Url.AbsoluteUri;
9: var loginStatus = DisplayConstants.NotLoggedIn;
10: var profileId = "";
11:
12: var crnUser = new CrnUserModel();
13:
14: if (crnUser.IsAuthenticated && !crnUser.IsSitecoreDomain)
15: {
16: loginStatus = DisplayConstants.LoggedIn;
17: }
18:
19: if (Tracker.Current != null && Tracker.Current.Contact != null)
20: {
21: profileId = Tracker.Current.Contact.Identifiers.Identifier;
22: }
23:
24: var dataLayerModel = new DataLayerModel
25: {
26: page = new Page
27: {
28: pageInfo = new PageInfo
29: {
30: experienceType = experienceType,
31: sysEnv = sysEnv,
32: destinationURL = destinationUrl,
33: pageName = pageName
34:
35: },
36: category = new Category
37: {
38: pageType = pageType
39: }
40: },
41: user = new User
42: {
43: profile = new Profile
44: {
45: profileInfo = new ProfileInfo
46: {
47: profileID = profileId,
48: loginStatus = loginStatus
49: }
50: }
51: }
52: };
53:
54: if (commerceModel != null)
55: {
56: dataLayerModel.ecommerce = commerceModel;
57: }
58:
59: return dataLayerModel;
60: }
1: public Ecommerce GetCommerceDataLayer(orderModel orderModel, menuResponse oloMenuResponse)
2: {
3: var ecommerce = new Ecommerce
4: {
5: purchase = new Purchase
6: {
7: products = new List<Product>(),
8: actionField = new ActionField
9: {
10: affiliation = DisplayConstants.CateringAffiliation,
11: tax = oloMenuResponse.Order.TaxAmount.ToString(CultureInfo.InvariantCulture),
12: revenue = oloMenuResponse.Order.TotalAmount.ToString(CultureInfo.InvariantCulture),
13: id = oloMenuResponse.Order.SubmitOrderNumber.ToString(CultureInfo.InvariantCulture),
14: shipping = "0",
15: coupon = string.Empty
16: }
17: }
18: };
19:
20: foreach (var lineItem in orderModel.LineItems)
21: {
22: var dataLayerProduct = new Product
23: {
24: id = lineItem.ItemTag,
25: name = lineItem.Name,
26: price = lineItem.RetailPrice.ToString(CultureInfo.InvariantCulture),
27: quantity = lineItem.Quantity,
28: variant = string.Empty,
29: category = string.Empty
30: };
31:
32: ecommerce.purchase.products.Add(dataLayerProduct);
33:
34: if (!lineItem.Modifiers.Any())
35: {
36: continue;
37: }
38:
39: foreach (var modifier in lineItem.Modifiers)
40: {
41: var dataLayerModifierProduct = new Product
42: {
43: id = modifier.ItemTag,
44: name = modifier.Name,
45: price = modifier.RetailPrice.ToString(CultureInfo.InvariantCulture),
46: quantity = modifier.Quantity,
47: category = DisplayConstants.CateringAddOn,
48: variant = string.Empty
49: };
50:
51: ecommerce.purchase.products.Add(dataLayerModifierProduct);
52: }
53: }
54:
55: return ecommerce;
56: }
Coding the Controller and View
The next order of business was to create a controller and view that would be added to my target pages.I created a simple controller and coded the action to grab my eCommerce transaction data, and pass it over to the data layer methods that I had created before.
Action
My controller action looked like this:1: public ActionResult DataLayer()
2: {
3: Ecommerce eCommerceTransaction = null;
4:
5: //Check for order info in session
6: var orderResponse = _contactRepository.GetSubmitOrderResponse();
7: var order = _contactRepository.GetSubmitOrder();
8:
9: if (order != null && orderResponse != null)
10: {
11: eCommerceTransaction =_analyticsRepository.GetCommerceDataLayer(order, orderResponse);
12:
13: //Kill session objects
14: _contactRepository.SetSubmitOrderResponse(null);
15: _contactRepository.SetSubmitOrder(null);
16:
17: }
18:
19: var model = _analyticsRepository.GetDataLayerModel(eCommerceTransaction);
20: return View(model);
21: }
View
My view was very simple; it took my data layer object, and serialized it.1: @model MyProject.Foundation.Domain.Models.DataLayer.DataLayerModel
2: @using Newtonsoft.Json
3:
4: @{
5: if (Model != null)
6: {
7: <script>
8: window.digitalData = @Html.Raw(string.Format("[{0}];",JsonConvert.SerializeObject(Model)))
9: </script>
10: }
11: }
Adding the Sitecore Component
With the code in place, I created the Controller Rendering item in Sitecore.
Adding the Component to your Target Pages
In my implementation, I statically bound my Controller Rendering to my eCommerce Layout.You can most certainly add the controller rendering to a specific placeholder that you have set up. Just be aware that the data layer code needs to be within the head element of your page, right before
your Google Tag Manager code:
1: <head>
2: //Your regular head stuff here
3: @{
4: //Constant value is the ID of my Controller Rendering shown above {CFE19999-FC9C-42C0-A3C0-A6F0FCFB8519}
5: @Html.Sitecore().Rendering(MyProject.Feature.Analytics.Constants.RenderingConstants.DataLayer)
6: //Google tag manager script (I am loading in a regular partial view below)
7: Html.RenderPartial("~/Views/Identity/GoogleTagManager.cshtml");
8: }
9: </head>
Final Results
With all the pieces of the puzzle in place, the only thing left to do was to check the script in my pages to confirm that it was being built out correctly.Here is a sample script generated by a regular eCommerce page:
1: <script>
2: window.digitalData = [{"page":{"category":{"pageType":"Standard"},"pageInfo":{"experienceType":"desktop","sysEnv":"Dev","destinationURL":"https://SC81U2/OrderStuff","pageName":"Category"}},"user":{"profile":{"profileInfo":{"loginStatus":"logged-in","profileID":"ID-123456789"}}},"ecommerce":null}];
3: </script>
Here is sample script that was generated from an eCommerce "Purchase Complete / Thank You" page that had the eCommerce / transaction data loaded:
1: <script>
2: window.digitalData = [{"page":{"category":{"pageType":"Standard"},"pageInfo":{"experienceType":"desktop","sysEnv":"Dev","destinationURL":"https://SC81U2/Thankyou","pageName":"Category"}},"user":{"profile":{"profileInfo":{"loginStatus":"logged-in","profileID":"ID-123456789"}}},"ecommerce":{"purchase":{"actionField":{"id":"2218523","affiliation":"Catering","revenue":"116.65","tax":"7.15","shipping":"0","coupon":""},"products":[{"name":"Fruit Cup","id":"FRUIT_CUP","price":"2.19","brand":null,"category":"Breakfast","variant":"Small Fruit Cup","quantity":50}]}}}];
3: </script>
4:
