Enable Google Analytics 4 (SCA Vinson – 2019.1)

Prepare your SuiteCommerce Advanced (SCA) implementation of Google Analytics 4 (GA4) without Google Tag Manager (GTM) as described in the following steps. You need to create new folders, files, and modules, so be sure to complete all of the required steps as outlined in the following procedures:

• Prepare GoogleAnalytics4@1.0.0 Folders Structure

• Create GoogleAnalytics4.json File

• Create GoogleAnalytics4.js File

• Create ns.package.json File

• Add GoogleAnalytics4 Module

• Add entryPoints Module to Application Dependencies

• Test and Deploy Your Customizations

Prepare GoogleAnalytics4@1.0.0 Folders Structure

1. Go to .../Modules/suitecommerce.

2. In the suitecommerce folder, create a new folder called GoogleAnalytics4@1.0.0.

3. In the GoogleAnalytics4@1.0.0 folder, create folders and files using the following structure:

                   Modules/
   └── suitecommerce/
       └── GoogleAnalytics4@1.0.0/
           ├── Configuration/
           │   └── GoogleAnalytics4.json
           ├── JavaScript/
           │   └── GoogleAnalytics4.js
           └── ns.package.json 
   
                 

Create GoogleAnalytics4.json File

1. Go to the Configuration folder in the structure you created in Prepare GoogleAnalytics4@1.0.0 Folders Structure.

2. Create and save the json file, GoogleAnalytics4.json, with the following code:

                   {
       "type": "object",
       "subtab": {
           "id": "analyticsFour",
           "title": "Google Analytics 4",
           "docRef": "bridgehead_4667032443",
           "description": "Google Analytics 4",
           "group": "integrations"
       },
       "properties": {
           "tracking.googleAnalyticsFour.propertyID": {
               "group": "integrations",
               "subtab": "analyticsFour",
               "type": "string",
               "title": "Google Analytics 4 ID",
               "description": "Enter the Google Analytics 4 Tracking ID. SuiteCommerce Advanced inserts this property into each page of the application. To locate the tracking ID, login to your Google Analytics 4 account and go to Admin > Data Streams > select your data stream > MEASUREMENT ID.",
               "default": ""
           },
           "tracking.googleAnalyticsFour.domainName": {
               "group": "integrations",
               "subtab": "analyticsFour",
               "type": "string",
               "title": "Google Analytics 4 domain",
               "description": "Enter the domain used for Google Analytics. The value you enter depends on which application you want to use Google Analytics",
               "default": ""
           },
           "tracking.googleAnalyticsFour.domainNameSecure": {
               "group": "integrations",
               "subtab": "analyticsFour",
               "type": "string",
               "title": "Google Analytics 4 secure domain",
               "description": "Enter the secure domain used for Google Analytics 4. Possible values are the same as the Google Analytics Domain property.",
               "default": ""
           }
       }
   } 
   
                 

Create GoogleAnalytics4.js File

1. Go to the JavaScript folder in the structure you created in Prepare GoogleAnalytics4@1.0.0 Folders Structure.

2. Create the JavaScript file, GoogleAnalytics4.js, with the following code:

                   // @module GoogleAnalytics4
   (function(win, name) {
       // @class GoogleAnalytics4 @extends ApplicationModule
       // ------------------
       // Loads google analytics 4 script and extends application with methods:
       // * trackPageview
       // * trackEvent
       // * trackTransaction
       // Also wraps layout's showInModal
       define('GoogleAnalytics4', [
           'Tracker',
           'underscore',
           'jQuery',
           'Backbone',
           'Utils',
           'SC.Configuration'
       ], function(Tracker, _, jQuery, Backbone, Utils, Configuration) {
           var dataLayerName = name + 'DataLayer';
           var GoogleAnalytics4 = {
               // @method doCallback Indicates if this module do a callback after some particular events
               // @return {Boolean}
               doCallback: function() {
                   return !!win[name];
               },
   
               // @method trackPageview
               // @param {String} url
               // @return {GoogleAnalytics4}
               trackPageview: function(url) {
                   if (_.isString(url)) {
                       url = url.split('?')[0];
                       win.gtag('event', 'page_view', { page_location: url, page_title: url });
                   }
   
                   return this;
               },
   
               trackLogin: function(event) {
                   win.gtag('event', 'login', {
                       method: event.category,
                       event_callback: event.callback
                   });
   
                   return this;
               },
   
               trackRegister: function(event) {
                   win.gtag('event', 'sign_up', {
                       method: event.category,
                       event_callback: event.callback
                   });
   
                   return this;
               },
               trackCheckoutAsGuest: function(event) {
                   win.gtag('event', 'checkout_as_guest', {
                       method: event.category,
                       event_callback: event.callback
                   });
   
                   return this;
               },
   
               // @method trackEvent
               // @param {TrackEvent} event
               // @return {GoogleAnalytics}
               trackEvent: function(event) {
                   if (event && event.category && event.action) {
                       win.gtag('event', 'generic_event', {
                           category: event.category,
                           action: event.action,
                           label: event.label,
                           value: parseFloat(event.value) || 0,
                           page: event.page || "/" + Backbone.history.fragment,
                           event_callback: event.callback
                       });
                   }
   
                   return this;
               },
   
               // @method trackTransaction
               // Based on the created SalesOrder we trigger each of the analytics
               // ecommerce methods passing the required information
               // @param {Tracker.Transaction.Model} @extends Backbone.Model transaction
               // @return {GoogleAnalytics|Void}
               trackTransaction: function(transaction) {
                   var transaction_id = transaction.get('confirmationNumber');
   
                   var purchase = {
                       transaction_id: transaction_id,
                       value: transaction.get('subTotal'),
                       tax: transaction.get('taxTotal'),
                       shipping: transaction.get('shippingCost') + transaction.get('handlingCost'),
                       currency:
                           (SC.ENVIRONMENT.currentCurrency && SC.ENVIRONMENT.currentCurrency.code) ||
                           '',
                       affiliation: Configuration.get('siteSettings.displayname'),
                       items: []
                   };
   
                   transaction.get('products').each(function(product, index) {
                       purchase.items.push({
                           item_id: product.get('id'),
                           item_name: product.get('name'),
                           affiliation: Configuration.get('siteSettings.displayname'),
                           currency:
                               (SC.ENVIRONMENT.currentCurrency &&
                                   SC.ENVIRONMENT.currentCurrency.code) ||
                               '',
                           index: index,
                           item_category: product.get('category') || '',
                           item_variant: product.get('options'),
                           price: product.get('rate'),
                           quantity: product.get('quantity')
                       });
                   });
   
                   win.gtag('event', 'purchase', purchase);
   
                   return this;
               },
   
               // @method addCrossDomainParameters
               // @param {string} url
               // @return {String} url
               addCrossDomainParameters: function(url) {
                   // We only need to add the parameters if the URL we are trying to go
                   // is not a sub domain of the tracking domain
                   if (_.isString(url)) {
                       url = Utils.addParamsToUrl(url, {
                           client_id: win[name].client_id,
                           session_id: win[name].session_id
                       });
                   }
   
                   return url;
               },
   
               // @method loadScript
               // @return {jQuery.Promise|Void}
               loadScript: function(id) {
                   return jQuery.getScript(
                       '//www.googletagmanager.com/gtag/js?id=' + id + '&l=' + dataLayerName
                   );
               },
   
               // @method mountToApp
               // @param {ApplicationSkeleton} application
               // @return {Void}
               mountToApp: function(application) {
                   var tracking = Configuration.get('tracking.googleAnalyticsFour');
   
                   // if track page view needs to be tracked
                   if (tracking && tracking.propertyID && !SC.isPageGenerator()) {
                       win[dataLayerName] = win[dataLayerName] || [];
                       win.gtag =
                           win.gtag ||
                           function() {
                               win[dataLayerName].push(arguments);
                           };
                       var domains = [];
                       if (tracking.domainName) {
                           domains.push(tracking.domainName);
                       }
                       if (tracking.domainNameSecure) {
                           domains.push(tracking.domainNameSecure);
                       }
   
                       if (domains.length) {
                           win.gtag('set', 'linker', {
                               domains: domains
                           });
                       }
   
                       var configOptions = {
                           send_page_view: false
                       };
   
                       var client_id = Utils.getParameterByName(win.location.href, 'client_id');
                       var session_id = Utils.getParameterByName(win.location.href, 'session_id');
   
                       if (client_id && session_id) {
                           configOptions.client_id = client_id;
                           configOptions.session_id = session_id;
                       }
   
                       win.gtag('js', new Date());
                       win.gtag('config', tracking.propertyID, configOptions);
   
                       // Please keep this statement here or the first pageView on site load
                       // will not be triggered (ApplicationSkeleton.Layout._showContent)
                       Tracker.getInstance().trackers.push(GoogleAnalytics4);
   
                       // the analytics script is only loaded if we are on a browser
                       application.getLayout().once('afterAppendView', function() {
                           GoogleAnalytics4.loadScript(tracking.propertyID)
                               .done(function() {
                                   win[name] = {};
                                   win.gtag('get', tracking.propertyID, 'client_id', function(client_id) {
                                       win[name].client_id = client_id;
                                   });
                                   win.gtag('get', tracking.propertyID, 'session_id', function(session_id) {
                                       win[name].session_id = session_id;
                                   });
                               })
                               .fail(function(jqXhr) {
                                   jqXhr.preventDefault = true;
                                   console.warn('Google Analytics 4 was unable to load');
                               });
                       });
                   }
               }
           };
   
           return GoogleAnalytics4;
       });
   })(window, 'ga4'); 
   
                 

Create ns.package.json File

1. Go to the GoogleAnalytics4 folder in the structure you created in Prepare GoogleAnalytics4@1.0.0 Folders Structure.

2. Create and save the json file, ns.package.json, with the following code:

                   {
       "gulp": {
           "javascript": ["JavaScript/*.js"],
           "configuration": ["Configuration/*.json"]
       }
   } 
   
                 

Add GoogleAnalytics4 Module

1. Open the distro.json file in the root SCA development directory and add the GoogleAnalytics4 module to the list of modules. The following sample shows the value to add to the list of existing values that follow the “modules” key:

                   {
      ...
      "modules": {
         "suitecommerce/GoogleAnalytics4": "1.0.0",
         ...
      },
      ...
   } 
   
                 

2. Save your changes.

Add entryPoints Module to Application Dependencies

1. Open the distro.json file in the root SCA development directory and add “GoogleAnalytics4” to the dependencies attribute in the entryPoints for the Shopping, Checkout and MyAccount applications. The following sample shows what your updated code will look like:

                   {
      ...
       "tasksConfig": {
         ...
           "javascript": {
               "entryPoints": [
                   {
                       "names": ["SC.Shopping.Starter.js"],
                       "exportFile": "shopping.js",
                       "dependencies": [
                           "GoogleAnalytics4",
                           ...
                       ]
                   },
               ...
            ...
         ...
      ...
   } 
   
                 

2. Save the distro.json file.

Test and Deploy Your Customizations

Follow the instructions provided in Test SCA Customizations on a Local Server and Deploy SCA Customizations to NetSuite to test and deploy your customizations.

Related Topics

Guide to Enable Google Analytics 4

Enable Google Analytics 4 (SCA 2019.2 – 2022.1)

Enable Google Analytics 4 (Denali – Mont Blanc)

General Notices