How to Configure Integration with Google Analytics

You can easily configure integration with Google Analytics to get web statistics, analyze control panel traffic, your audience, and content consumption.

How It Works

You must be registered in Google Analytics and Google Tag Manager and have an account where all statistics can be reviewed. Obtain the tracking code in Tag Manager and set it on the brand level in CloudBlue Commerce.

UX1 UI then automatically reports all user activities to Google and you can use Google Analytics to analyze the data received from UX1.

General Steps to Configure CloudBlue Commerce Integration with Google Analytics

Complete the following steps:

  1. Create your account in Google Analytics.

    Note: You will be responsible for the data you send to Google Analytics; please read both the Google Privacy Policy and Terms of Service carefully.

  2. After account registration, create your Google Tag Manager (GTM) container and set it up.

  3. After the GTM container is created, you will see the GTM code snippet that you need to copy and paste into your CloudBlue Commerce control panel. See below an example of a code snippet:

How to Add GTM Code in CloudBlue Commerce

To add the GTM code in CloudBlue Commerce, complete the following steps:

  1. In the CloudBlue Commerce control panel, go to System > Settings > Brands.
  2. Click the name of the brand for which you want to set up tracking.

  3. Switch to the Web-analytics Integration tab.

  4. Click Edit, paste the tracking code, and Submit.

Important: You need to replace the symbol & in the tracking code with &, otherwise the screens that are not adapted for UX1 will be displayed blank in UX1.

How to Set Up a GTM Container for Data Collection

To set up your GTM container, you need to create variables, a trigger, and a tag.

Before adding variables, you must find out your Google Analytics Property ID. It is required to define the Universal Analytics ID (UA ID) that is a constant variable which contains your Google Analytics Property ID and where the GTM will send your data.

To get your Google Analytics Property ID, go to https://analytics.google.com, open your account settings, and find your Google Analytics Property ID.

Copy your UA ID and return to https://tagmanager.google.com to set up variables.

Now create variables to use in your tracking tags:

  1. In the Tag Manager panel, go to Variables and click New. Define the name of your variable as UA ID and choose the Constant type. Paste the previously copied UA ID into the Value field and save the variable.

  2. Configure a custom variable to prevent sending personal information to Google Analytics as it is strictly prohibited by Google Terms of Service. To create a new user-defined variable, go to Variables and click New. Name the new variable as JS Remove PII From Hit and choose the Custom JavaScript type. Paste the following JavaScript code:

    function() {
  return function(model) {
    // Add the PII patterns into this array as objects
    var piiRegex = [{
      name: 'EMAIL',
      regex: /[^\/]{4}@(?!domain\.com)[^\/]{4}/gi
    },{
      name: 'NAME',
      regex: /((firstname=)|(lastname=)|(surname=))[^&\/\?]+/gi
    },{
      name: 'NAME_2',
      regex: /((firstName)|(lastName)|(globalsApsId)|( paAccountId))[^&\/\?]+/gi
    }];
    
    var globalSendTaskName = '_' + model.get('trackingId') + '_sendHitTask';
    
    // Fetch reference to the original sendHitTask
    var originalSendTask = window[globalSendTaskName] = window[globalSendTaskName] || model.get('sendHitTask');
  
    var i, hitPayload, parts, val;
    
    // Overwrite sendHitTask with PII purger
    model.set('sendHitTask', function(sendModel) {
      hitPayload = sendModel.get('hitPayload').split('&');
      for (i = 0; i < hitPayload.length; i++) {
        parts = hitPayload[i].split('=');
        // Double-decode, to account for web server encode + analytics.js encode
        val = decodeURIComponent(decodeURIComponent(parts[1]));
        piiRegex.forEach(function(pii) {
          val = val.replace(pii.regex, '[REDACTED ' + pii.name + ']');
        });
        parts[1] = encodeURIComponent(val);
        hitPayload[i] = parts.join('=');
      }
      sendModel.set('hitPayload', hitPayload.join('&'), true);
      originalSendTask(sendModel);
    });
  };
}

    As a result, you will get the following response:

  3. Create a custom variable to track pageviews. To do this, go to Variables and click New.

  4. Create a Data Layer variable and name it eventCategory.

  5. Add three more Data Layer variables with the following names: eventAction, eventLabel and eventValue.
  6. Configure the Page URL built-in variable.

    1. Go to Variables and click Configure.

       

    2. Select the Page URL variable from the list.

Now you have configured the variables and you are ready to set up a trigger to track page views. Complete the following steps:

  1. In the Tag Manager panel, go to Triggers and click New to create a new trigger.

  2. Specify the trigger name (we suggest that you use the name viewShown trigger) and select the Custom Event type. Specify the event name: viewShown. This trigger must be invoked on all custom events.

Add one more trigger with the name panelBootstrapped, also of the Custom Event type.

After the triggers are created, you need to create a tag.

  1. In the Tag Manager panel, go to Tags to create a new tag. We suggest Page views.
  2. Select the Universal Analytics tag type.
  3. Select the Pageview track type.
  4. Activate the Enable overriding settings in this tag option.

  5. Specify your UA ID variable as the Tracking ID.

  6. Now click More Settings > Fields to Set and set the following:

  7. Finally, add triggers for the tag and save it.

As a result, you have created variables, triggers, and a tag. The final step is to publish the configured container and start tracking.

To publish the GTM container, complete the following steps:

  1. In Tag Manager, click Submit in the upper right corner of the screen.

  2. Define the version name and description, then click Publish.

After your GTM container is published, open your UX1 panel in one browser tab and your real-time reports in your Google Analytics account in another tab. Ensure that Google Analytics is tracking activities in UX1.

© 2024 Ingram Micro, Inc. All Rights Reserved. Privacy Policy, Terms of Use and Legal