How to Implement Google Tag Manager Enhanced Ecommerce Android in Xamarin

A few days ago, I was challenged with the implementation of Google Tag Manager SDK for Android using Xamarin (now Microsoft flagship for mobile development).

As soon as I started to work on the implementation I struggled on getting the data to show on Google dashboard. After a few days of research and reading lengthy documentation and info online, I was able to see thru the implementation and come up with a solid solution that could be utilized on anyGoogle Tag Manager Enhanced Ecommerce app based on Xamarin Android.

It is worth it noticing that this solution has been successfully put into production with live apps that have more than one million of downloads. For iOS equivalent implementation takes a look here . Now let’s take a look at how code structure will look like inside our general sender method.

if (details != null && details.Count > 0)
 { List items = new List ();
 foreach (var b in details) {
 var productPrice = b.SalePrice items.Add ((Java.Lang.Object)DataLayer.MapOf("name", b.name, "id", b.id, "price",productPrice,"category", "" , 
"quantity", b.count)); }
 var p = DataLayer.ListOf (items.ToArray());
 var actionField = DataLayer.MapOf ("id", bookingReference, "revenue", totalPrice, "tax", "0.00", "shipping", "0.00", "coupon", discountCode ?? "");
 var purchase = DataLayer.MapOf ("purchase", (Java.Lang.Object)DataLayer.MapOf ("products", (Java.Lang.Object)p , "actionField", (Java.Lang.Object)actionField));
 tagmanager.DataLayer.PushEvent ("purchase", DataLayer.MapOf("ecommerce", (Java.Lang.Object)purchase));
 } 

If the solution doesn’t have a cart concept, but instead allows only buying one product at the time, then taking into account that Google takes an array of products the approach is to make a list of one element by using “DatalLayer.ListOf“.

From there the trick is to always create a DataLayer.MapOf structure for each meaningful set of data we want to encapsulate and use “Java Object” to cast the previous data layer map to base Java object type. Above hierarchical structure was done following Google documentation about correct formatted Google Tag Manager Ecommerce payload.

Google Tag Manager in Android using Xamarin

Now the full solution is even trickier since it was discovered by pain that Google SDK contains some unexpected behavior —iOS post but applies to Android— when we start sending multiple e-commerce events.

If you only need one on Confirmation/ Thank you page then you should be ok, however, I strongly recommend below implementation to walk on the safe side. Google SDK always save any given event push on memory queue and sends them after some time interval in order to save phone battery and internet bandwidth.

This is the key difference when comparing against web implementation of Google Tag Manager using javascript where all events are sent real time. In order to overcome this pending issue, we will have to make sure that we follow 3 principles: (1) Flush data layer to avoid any data collision, (2) prepare e-commerce event push as above example, (3) force data layer to send event at moment and not when scheduled to do it next time. Do yourself a favor, only force data layer to send events when necessary, abusing this approach will tax users battery life.

The full solution assumes Google Tag Manager object as previously created and shared across application and proper configuration for basic tracking which is explained here (set Google Tag Manager with needed events). It will contemplate the main method sending the e-commerce data to google, the method is generic enough to help in other events but chime in if need help to get Add/Remove cart, product view, an impression which are similar but with some modifications. We will demonstrate how to do purchase and checkout steps events below.

It will contemplate the main method sending the e-commerce data to google, the method is generic enough to help in other events but chime in if need help to get Add/Remove cart, product view, an impression which are similar but with some modifications. We will demonstrate how to do purchase and checkout steps events below.

public void SendCheckOutSteps (ObservableCollection details, int step)
{
	if (details != null && details.Count > 0) {

		List items = new List ();

		foreach (var b in bookingList) {
			items.Add ((Java.Lang.Object)DataLayer.MapOf("name",b.name, "id", b.id,
			"price",b.SalePrice,"category", "", "quantity", b.count));
		}

		var p = DataLayer.ListOf (items.ToArray());

		var actionField = DataLayer.MapOf ("step", step);
		var checkout = DataLayer.MapOf ("checkout", (Java.Lang.Object)DataLayer.MapOf ("products", (Java.Lang.Object)p, "actionField", (Java.Lang.Object)actionField));

		ClearEcommerceDataLayer ();

		tagmanager.DataLayer.PushEvent ("checkout", DataLayer.MapOf("ecommerce", (Java.Lang.Object)checkout));

		ForceDatalayerDispatch ();
	}
}

public void SendPurchaseEvent (ObservableCollection details, double totalPrice, string referenceId, string discountCode)
{
	if (bookingList != null && bookingList.Count > 0) {

		List items = new List ();

		foreach (var b in bookingList) {
			var productPrice = b.SalePrice;
			items.Add ((Java.Lang.Object)DataLayer.MapOf("name",b.name, "id", b.id,
					"price",productPrice,"category", "" , "quantity", b.PlayerCount));
		}

		var p = DataLayer.ListOf (items.ToArray());

		var actionField = DataLayer.MapOf ("id", referenceId, "revenue", totalPrice, "tax", "0.00", "shipping", "0.00", "coupon", discountCode ?? "");
		var purchase = DataLayer.MapOf ("purchase", (Java.Lang.Object)DataLayer.MapOf ("products", (Java.Lang.Object)p , "actionField", (Java.Lang.Object)actionField));

		ClearEcommerceDataLayer ();

		tagmanager.DataLayer.PushEvent ("purchase", DataLayer.MapOf("ecommerce", (Java.Lang.Object)purchase));

		ForceDatalayerDispatch ();
	}

}		
public void ForceDatalayerDispatch ()
{
	tagmanager = TagManagerClass.GetInstance(current);

	tagmanager.Dispatch ();
}

public void ClearEcommerceDataLayer ()
{
	tagmanager.DataLayer.Push (DataLayer.MapOf("ecommerce", null));
}

Follow Google Ecommerce documentation to set proper events in Tag Manager admin, make them match this example naming which at the end was taken directly from Google recommendations. Take into account that forcing the manager to dispatch is up to the OS and SDK to honor it and will consume phone battery then do not abuse from its evil power. Let me know if this post helps you out and any recommendation if needed to add another article with other events. Happy Coding!!

One Response

Leave a Reply