Append HTML Google Tracking Tags on Confirmation Page of Ecommerce

THR-145

Appending the HTML code in the order confirmation page which is displayed after the webstore checkout and in the head tag of every page. This is achieved as an extension.

Entry point file

define(
	'JJ.GOOGLE_ADD_TRACK_NZ.GOOGLEADD'
,   [
		'JJ.GOOGLE_ADD_TRACK_NZ.GOOGLEADD.View',
		//'OrderWizard.Module.Confirmation'
	]
,   function (
		GOOGLEADDView, //OrderWizardModuleConfirmation
	)
{
	'use strict';

	return  {
		mountToApp: function mountToApp (container)
		{
			// using the 'Layout' component we add a new child view inside the 'Header' existing view 
			// (there will be a DOM element with the HTML attribute data-view="Header.Logo")
			// more documentation of the Extensibility API in
			// https://system.netsuite.com/help/helpcenter/en_US/APIs/SuiteCommerce/Extensibility/Frontend/index.html
			
			/** @type {LayoutComponent} */
			var layout = container.getComponent('Layout');
			var checkout = container.getComponent("Checkout")

				if (layout) {
					jQuery('head').append(jQuery("<!-- Global site tag (gtag.js) - Google Ads: 856088714 --> <script async src='https://www.googletagmanager.com/gtag/js?id=AW-856088714'></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-856088714'); </script> "));

				}
				if (checkout) {
					checkout.addChildView('Google.tracker', function () {
						console.log("transactionid");
						return new GOOGLEADDView({
							container: container
						});
					});
				}


		}
	};
});

View file

// @module JJ.GOOGLE_ADD_TRACK_NZ.GOOGLEADD
define('JJ.GOOGLE_ADD_TRACK_NZ.GOOGLEADD.View'
,	[
	'jj_google_add_track_nz_googleadd.tpl'
	
,	'Backbone'
    ]
, function (
	jj_google_add_track_nz_googleadd_tpl
	
	
	,	Backbone
)
{
    'use strict';
	// @class JJ.GOOGLE_ADD_TRACK_NZ.GOOGLEADD.View @extends Backbone.View
	return Backbone.View.extend({

		template: jj_google_add_track_nz_googleadd_tpl

	,	initialize: function (options) {
			  console.log("options",options);
			  this.id = options.container.layout.currentView.currentStep.wizard.model.attributes.confirmation.attributes.tranid;
			  this.total = options.container.layout.currentView.currentStep.wizard.model.attributes.confirmation.attributes.summary.total;
			  console.log("xxxx",this.id);
			  console.log("xxxx",this.total);
		}

	,	events: {
		}

	,	bindings: {
		}

	, 	childViews: {

		}

		//@method getContext @return JJ.GOOGLE_ADD_TRACK_NZ.GOOGLEADD.View.Context
	,	getContext: function getContext()
		{
			//@class JJ.GOOGLE_ADD_TRACK_NZ.GOOGLEADD.View.Context
			this.message = this.message || 'Hello World!!'
			return {
				transactionid: this.id,
				total: this.total
			};
		}
	});
});

Template file


<head>
<!-- Global site tag (gtag.js) - Google Ads: 856088714 --> 
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-856088714"></script> 
<script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-856088714'); </script>
<!-- Event snippet for Purchase: New Zealand conversion page --> 
<script> gtag('event', 'conversion', { 'send_to': 'AW-856088714/83LKCJX1lZIDEIrBm5gD', 'value': '{{total}}', 'currency': 'NZD', 'transaction_id': '{{transactionid}}' }); </script>
</head>

Leave a comment

Your email address will not be published. Required fields are marked *