Scenario:
In the NPUK project, The client wants to append a script to the SCA website of NPUK for tracking the data from the Dot digital platform. The purpose of the script is to track the cart details and orders made by customers through email campaigns. They already have Dot digital account(both production and sandbox) and they want to integrate with the SCA website.
Solution
So the requirement is to add the script in the <head> tag of the template on all pages and the script needs to be added only when the customer is logged In and the cart has any items.
Also wants to pass values from the website like total amount, grand total, item name CART ID, CART PHASE, etc.
we have also added a code for generating a cart ID since we have no unique ID available in NetSuite for the cart.
The needs to be shown only on the checkout pages and in the Order confirmation page a different format needs to be displayed by passing data from confirmation.
So we have extended the order confirmation view for adding the script needs to be displayed on the order confirmation page only.
Used jQuery to append the script to the template.
We have implemented the code as a custom module since the NPUK sandbox is the SCA Elbrus version.
We can also reuse the code in the latest SCA version with minor modifications as extensions.
Code:
define('WebTracking',
[
'underscore'
, 'jQuery'
, 'Backbone'
, 'Profile.Model'
, 'LiveOrder.Model'
, 'Utils'
, 'Wizard.Step'
, 'OrderWizard.Module.Confirmation'
], function (
_
, jQuery
, Backbone
, ProfileModel
, LiveOrderModel
, Utils
, WizardStep
, OrderWizardModuleConfirmation
) {
'use strict';
return {
mountToApp: function mountoApp(container) {
var cartCheck = false;
//order confirmation view extend starts
_.extend(OrderWizardModuleConfirmation.prototype, {
render: _.wrap(OrderWizardModuleConfirmation.prototype.render, function (e) {
//ROI tracking script starts
var liveOrder = LiveOrderModel.getInstance();
var confirmationThis= this.model.get('confirmation');
var checkoutPrice = confirmationThis.attributes.summary.total;
var itemLength = confirmationThis.attributes.lines.length;
var modelArray = confirmationThis.attributes.lines.models;
var url =""
if (itemLength > 0) {
_.each(modelArray, function (each) {
var productName = each.attributes.item.attributes.storedisplayname2
url += "_dmTrack(" + "\""+"product" +"\", " + "\""+productName +"\""+");";
});
jQuery('body').append(jQuery("<script src=\"https://r1-t.trackedlink.net/_dmpt.js\" type=\"text/javascript\">"+url+"_dmTrack(" + "\"CheckOutAmount\"," +"\""+checkoutPrice+"\""+ ");" + "</script>"));
}
//ROI tracking script ends
var profile = ProfileModel.getInstance();
var login = profile.attributes.isLoggedIn;
var liveOrder = LiveOrderModel.getInstance();
var itemVal = liveOrder.get('lines').models;
var summary = liveOrder.get('summary');
var customerId = profile.attributes.internalid;
var InternalID = liveOrder.get('internalid');
var cartID = "";
var uniqueID = "";
var carPhaseValue = "ORDER+COMPLETE";
var currentStep = this.wizard.currentStep
if (currentStep === "confirmation") {
cartCheck = true;
//for genrating Cart ID starts
uniqueID = (Math.floor(Math.random() * Date.now()).toString(16)).toUpperCase();
carPhaseValue = "ORDER+COMPLETE";
//passing generated ID and customer Id to backend starts
var serviceUrl = Utils.getAbsoluteUrl('services/WebTracking.Service.ss')
jQuery.get(serviceUrl, {
data: uniqueID,
customerId: customerId,
cartCheck: cartCheck
}).then(function (res) {
cartID = res.cartId;
appendScript(cartID);
})
//passing generated ID and customer Id to backend Ends
} else {
cartCheck = false;
}
function appendScript(cartID) {
if (login === "T") {
jQuery('head').append(jQuery(
'<script type="application/javascript">' +
'(function (w, d, u, t, o, c) {' +
'w["dmtrackingobjectname"] = o;' +
'c = d.createElement(t);' +
'c.async = 1;' +
'c.src = u;' +
't = d.getElementsByTagName(t)[0];' +
't.parentNode.insertBefore(c, t);' +
'w[o] = w[o] || function () {' +
'(w[o].q = w[o].q || []).push(arguments);};})' +
'(window, document, "//static.trackedweb.net/js/_dmptv4.js", "script", "dmPt");' +
'window.dmPt("create", "DM-5856679407-01", "scatest2022.tk");' +
'window.dmPt("track");' +
'window.dmPt("identify", ' +
'"' + profile.attributes.email + '"' +
');' +
'window.dmPt("cartInsight", {' +
'"programID": ' + 314808 + ',' +
'"cartDelay": 25,' +
'"cartID": "' + cartID + '",' +
'"cartPhase": "' + carPhaseValue + '",' +
'"currency": "' + profile.attributes.currency.currencyname + '",' +
'"subtotal": ' + summary.subtotal + ',' +
'"discountAmount": ' + summary.discounttotal + ',' +
'"shipping": ' + summary.shippingcost + ',' +
'"taxAmount": ' + summary.taxtotal + ',' +
'"grandTotal": ' + summary.total + ',' +
'"cartUrl": "https://www.scatest2022.tk/cart",' +
'});' +
'</script>'
));
}
}
var confirmation = this.model.get('confirmation')
// store current order id in the hash so it is available even when the checkout process ends.
, new_hash;
if (!_.parseUrlOptions(Backbone.history.fragment).last_order_id) {
this.trackTransaction(confirmation);
new_hash = Utils.addParamsToUrl(Backbone.history.fragment, {
last_order_id: confirmation.get('internalid')
});
Backbone.history.navigate(new_hash, {
trigger: false
});
}
this.confirmation_number = confirmation.get('tranid') || confirmation.get('confirmationnumber');
this.order_id = confirmation.get('internalid');
this._render();
if (!(this.model.get('confirmation') && this.model.get('confirmation').get('internalid'))) {
this.$el.html('<h3>' + _('Your Order has been placed').translate() + '</h3>');
this.$el.append('<p>' + _('Continue Shopping on our <a href="/" data-touchpoint="home">Home Page</a>. ').translate() + '</p>');
}
})
});
//order confirmation view extend ends
//appending scirpt for all pages in the website starts
if (cartCheck === false) {
setTimeout(function () {
var profile = ProfileModel.getInstance();
var login = profile.attributes.isLoggedIn;
var liveOrder = LiveOrderModel.getInstance();
var itemVal = liveOrder.get('lines').models;
var summary = liveOrder.get('summary');
var customerId = profile.attributes.internalid;
var cartID = "";
var uniqueID = "";
var carPhaseValue = "CUSTOMER_LOGIN";
//for genrating Cart ID starts
if (cartCheck) //condition for generating unique ID only when cart is empty.
{
uniqueID = (Math.floor(Math.random() * Date.now()).toString(16)).toUpperCase();
carPhaseValue = "ORDER+COMPLETE";
}
else {
carPhaseValue = "CUSTOMER_LOGIN";
}
//passing generated ID and customer Id to backend starts
var serviceUrl = Utils.getAbsoluteUrl('services/WebTracking.Service.ss')
jQuery.get(serviceUrl, {
data: uniqueID,
customerId: customerId,
cartCheck: cartCheck
}).then(function (res) {
cartID = res.cartId;
var idCheck = _.isEmpty(cartID)
if(idCheck == true){
uniqueID = (Math.floor(Math.random() * Date.now()).toString(16)).toUpperCase();
cartCheck =true;
initialId(uniqueID);
}else{
appendScript(cartID);
cartCheck =false;
}
})
//if carID field is empty setting a new ID
function initialId(uniqueID){
//passing generated ID and customer Id to backend starts
var serviceUrl = Utils.getAbsoluteUrl('services/WebTracking.Service.ss')
jQuery.get(serviceUrl, {
data: uniqueID,
customerId: customerId,
cartCheck: cartCheck
}).then(function (res) {
cartID = res.cartId;
appendScript(cartID);
})
//passing generated ID and customer Id to backend Ends
}
//
//passing generated ID and customer Id to backend Ends
var itemUrl, SKU, itemAmt, itemName, desc, category, other, quantity, unitP, totalItemP, imageUrl;
function appendScript(cartID) {
for (var i = 0; i < itemVal.length; i++) {
var itemA = itemVal[i];
itemAmt = itemA.get('amount');
itemUrl = itemA.get('item').get('_url');
SKU = itemA.get('item').get('itemid');
itemName = itemA.get('item').get('displayname');
desc = itemA.get('item').get('storedisplayname2');
category = itemA.get('itemtype');
other = itemA.get('item').get('urlcomponent');
quantity = itemA.get('quantity');
unitP = itemA.get('rate');
totalItemP = itemA.get('total');
if(itemA.get('item').get('itemimages_detail').urls){
imageUrl = itemA.get('item').get('itemimages_detail').urls[0].url ? itemA.get('item').get('itemimages_detail').urls[0].url : 'N/A';
}
else{
imageUrl ="";
}
if (login === "T") {
jQuery('head').append(jQuery(
'<script type="application/javascript">' +
'(function (w, d, u, t, o, c) {' +
'w["dmtrackingobjectname"] = o;' +
'c = d.createElement(t);' +
'c.async = 1;' +
'c.src = u;' +
't = d.getElementsByTagName(t)[0];' +
't.parentNode.insertBefore(c, t);' +
'w[o] = w[o] || function () {' +
'(w[o].q = w[o].q || []).push(arguments);};})' +
'(window, document, "//static.trackedweb.net/js/_dmptv4.js", "script", "dmPt");' +
'window.dmPt("create", "DM-5856679407-01", "scatest2022.tk");' +
'window.dmPt("track");' +
'window.dmPt("identify", ' +
'"' + profile.attributes.email + '"' +
');' +
'window.dmPt("cartInsight", {' +
'"programID": ' + 314808 + ',' +
'"cartDelay": 25,' +
'"cartID": "' + cartID + '",' +
'"cartPhase": "' + carPhaseValue + '",' +
'"currency": "' + profile.attributes.currency.currencyname + '",' +
'"subtotal": ' + summary.subtotal + ',' +
'"discountAmount": ' + summary.discounttotal + ',' +
'"shipping": ' + summary.shippingcost + ',' +
'"taxAmount": ' + summary.taxtotal + ',' +
'"grandTotal": ' + summary.total + ',' +
'"cartUrl": "https://www.scatest2022.tk/cart",' +
' "lineItems": [ ' +
'{' +
'"sku": "' + SKU + '",' +
'"name": "' + itemName + '",' +
'"description": "' + desc + '",' +
'"category": "' + category + '",' +
'"other": "' + other + '",' +
'"unitPrice": ' + unitP + ',' +
'"salePrice": ' + unitP + ',' +
'"quantity": ' + quantity + ',' +
'"totalPrice": ' + totalItemP + ',' +
'"imageUrl": "' + imageUrl + '",' +
'"productUrl": "' + itemUrl + '",' +
' },' +
' ]' +
'});' +
'</script>'
));
}
}
}
}, 2000);
}
//appending scirpt for all pages in the website ends
}
}
});