Matrix Item Options Not Displaying With Google Tag Manager Enabled

In some cases, not all selected matrix item options appear in the Product Details Page. This can occur on sites using Google Tag Manager. To correct this error, apply the patch described here to extend GoogleTagManager.js and overwrite the trackProductView() method.

In addition to making these changes, you must create an ns.package.json file and update your distro.json file for any custom modules you include. You can download the code samples described in this procedure here: MatrixItemDisplayGTM.zip.

Step 1: Extend the GoogleTagManager.js File

If you have not done so already, create a directory to store your custom module.

Following best practices, name this directory extensions and place it in your Modules directory. Depending on your implementation and customizations, this directory might already exist.
Open your extensions directory and create a custom module to maintain your customizations.

Give this directory a unique name that is similar to the module being customized. For example:

Modules/extensions/GoogleTagManager.Extension@1.0.0/
In your new module, create a subdirectory named JavaScript.
In your JavaScript subdirectory, create a new JavaScript file.

Give this file a unique name that is similar to the file being modified. For example:

Modules/extensions/GoogleTagManager.Extension@1.0.0/JavaScript/GoogleTagManager.Extension.js

Open this file and set it up to overwrite the trackProductView() method of the GoogleTagManager.js file.

Your file should match the following code snippet:

                define(
   'GoogleTagManager.Extension'
,   [
   'GoogleTagManager'
,   'Tracker'
,   'underscore'
   ]

,   function (
   GoogleTagManager
,   Tracker
,   _
   )

{

   'use strict';

         _.extend(GoogleTagManager.prototype,
         {
            trackProductView: function (product)
            {
               var item = product.getItem();

               if (this.item && this.item.get('itemId') === item.get('_id'))
               {
                  item.set('category', this.item.get('category'), { silent: true });
                  item.set('list', this.item.get('list'), { silent: true });
               }

               var eventName = 'productView'
               ,   selected_options = product.get('options').filter(function (option)
                  {
                     return option.get('value') && option.get('value').label;
                  })
               ,   price = product.getPrice()
               ,   eventData = {
                  'event': eventName
               ,   'data': {
                     'sku': product.getSku()
                  ,   'name': item.get('_name')
                  ,   'variant': _.map(selected_options, function (option)
                        {
                           return option.get('value').label;
                        }).join(', ')
                  ,   'price': ((price.price) ? price.price : 0).toFixed(2)
                  ,   'category': item.get('category') || '' // as we do not support categories this is just the url
                  ,   'list': item.get('list') || ''
                  ,   'page': this.getCategory()
                  }
               };

               this.item = null;

               //Triggers a Backbone.Event so others can subscribe to this event and add/replace data before is send it to Google Tag Manager
               Tracker.trigger(eventName, eventData, item);
               this.pushData(eventData);

               return this;
            }
         });   
});

Save the file.

Step 2: Prepare the Developer Tools for Your Customizations:

Open the GoogleTagManager.Extension @1.0.0 module.
Create a file in this module and name it ns.package.json.

Modules/extensions/GoogleTagManager.Extension@1.0.0/ns.package.json

Build the ns.package.json file using the following code

                {
    "gulp": {
        "javascript": [
            "JavaScript/*.js"
        ]
    }
}

Save the ns.package.json file.
Open the distro.json file.

This file is located in the top-level directory of your SuiteCommerce Advanced source code.

Add your custom module to the modules object to ensure that the Gulp tasks include your extension when you deploy.

Your code should look similar to the following example:

                {
    "name": "SuiteCommerce Advanced Elbrus",
    "version": "2.0",
    "buildToolsVersion": "1.3.0",
    "folders": {
        "modules": "Modules",
        "suitecommerceModules": "Modules/suitecommerce",
        "extensionsModules": "Modules/extensions",
        "thirdPartyModules": "Modules/third_parties",
        "distribution": "LocalDistribution",
        "deploy": "DeployDistribution"
    },
    "modules": {
        "extensions/GoogleTagManager.Extension": "1.0.0",
        "extensions/MyExampleCartExtension1": "1.0.0",
                 //...

Add GoogleTagManager.Extension as a dependency to the following entry points of the JavaScript object:

SC.Shopping.Starter
SC.MyAccount.Starter
SC.Checkout.Starter

Your code should look similar to the following example:

                //...
"javascript": [
    {
        "entryPoint": "SC.Shopping.Starter",
        "exportFile": "shopping.js",
        "dependencies": [
            "Backbone.View.Plugins",
                     //...
                     "GoogleTagManager.Extension"
                  ],
         //...
         },
    {
        "entryPoint": "SC.MyAccount.Starter",
        "exportFile": "myaccount.js",
        "dependencies": [
            "Backbone.View.Plugins",
                        //...
                        "GoogleTagManager.Extension"
                  ],
         //...
         },
    {
        "entryPoint": "SC.Checkout.Starter",
        "exportFile": "checkout.js",
        "dependencies": [
            "Backbone.View.Plugins",
                        //...
                        "GoogleTagManager.Extension"
                  ],
         //...
         },
//...

Save the distro.json file.

Step 3: Test and Deploy Your Extension:

Test your source code customizations on a local server (see Test SCA Customizations on a Local Server) or deploy them to your NetSuite account (see Deploy SCA Customizations to NetSuite). If you are currently running SCA on a local server, your changes should appear on your local site immediately.
Confirm your results.

Upon successful deployment, all selected matrix item options should appear in the Product Details Page.

Step 1: Extend the GoogleTagManager.js File

Step 2: Prepare the Developer Tools for Your Customizations:

Step 3: Test and Deploy Your Extension:

Related Topics