Add Js code for Google measuing checkout in checkout

Question

I want to measure checkout page using tag manager Enhanced Ecommerce.

I refered https://developers.google.com/tag-manager/enhanced-ecommerce#checkout.

How to add this script.

Thanks.

Answer 1

app/design/frontend/{Vendor}/{theme}/requirejs-config.js

var config = {
 map: {
 '*': {
 measuringcheckout: 'js/measuring_checkout'
 }
 }
};

app/design/frontend/{Vendor}/{theme}/web/js/measuring_checkout.js

define(['jquery'], function($){
 "use strict";
 //your Google script
 return function onCheckout()
 {
 alert('Google measuring checkout OK');//just for JS loading test
 dataLayer.push({
 'event': 'checkout',
 'ecommerce': {
 'checkout': {
 'actionField': {'step': 1, 'option': 'Visa'},
 'products': [{
 'name': 'Triblend Android T-Shirt',
 'id': '12345',
 'price': '15.25',
 'brand': 'Google',
 'category': 'Apparel',
 'variant': 'Gray',
 'quantity': 1
 }]
 }
 },
 'eventCallback': function() {
 document.location = 'checkout.html';
 }
 });
 }
});

app/design/frontend/{Vendor}/{theme}/Magento_Checkout/templates/onepage.phtml

<script type="text/javascript">
 require(['jquery', 'measuringcheckout'], function(,ドル onCheckout) {
 onCheckout();
 });
</script>

You should also:

• clean the cache

• clean var/view_preprocessed content

• clean pub/static content

• deploy the static content : php bin/magento setup:static-content:deploy -f

I don't test it, but it should work.

• Mahi M: @Prince its throws some error.
• PЯINCƎ: What's that error ?
• Mahi M: 'eventCallback': function() { document.location = 'checkout.html'; }
• Mahi M: Its redirect to checkout.html. after that its throws ..magento2/checkout/checkout.html 404 error
• Mahi M: Its need to redirect checkout.html or other page?