SkyGlue JavaScript code is executed after a webpage and its Google Analytics code are loaded completely. However, a Google Analytics pageview is fired when a webpage starts to loads. In order to track additional data as custom dimensions for the pageview hit, a Google Analytics CustomTask is needed to populate the custom dimension values before the initial pageview hits are launched by Google Analytics.

You can set up the CustomTask using JavaScript in Google Tag Manager or in your Google Analytics JavaScript tag.

1. Set up customTask in Google Tag Manager (GTM)

You can add a customTask in a Google Universal Analytics tag under “More Settings” ->”Fields to Set”. Type “customTask” as Field Name. Click the “+” icon to open the “Choose a variable” window. Click the “+” icon on the upper right to open the “Variable configuration window.

Choose “Custom JavaScript” as the variable type.  Copy/Paste the following code to the textbox field. Please make sure to change the custom dimension slot numbers to match your Google Analytics setup.

function() {
  return function(model) {
    var cd_gaClientId = 'dimension1';
    var cd_sgClientId = 'dimension2';
    var cd_hitTimeStamp = 'dimension3';
    var cd_sessionId = 'dimension4';
    var cd_regiteredId = 'dimension5';
    
    var gaClientId = model.get('clientId');
    //set the custom dimension for GA client ID
    model.set(cd_gaClientId, gaClientId);
    //set the custom dimension for SkyGlue client ID
    var gaClientIdParts = gaClientId.split(".");
    var sgClientId = gaClientIdParts[1] + gaClientIdParts[0].substring(0,4);
    model.set(cd_sgClientId, sgClientId);
    //set the custom dimension for hit timestamp
    var currentTime = new Date().getTime();
    model.set(cd_hitTimeStamp, currentTime);
    //set the custom dimension for session Id
    var sessionId = currentTime;
    model.set(cd_sessionId, sessionId);
    //set the custom dimension for regitered user Id
    var cookieName="__sgrid";
    var results = document.cookie.match ( '(^|;) ?' + cookieName + '=([^;]*)(;|$)' );
    if (results){
        model.set(cd_regiteredId, unescape( results[2] ) );
    }
  }
}

The following screenshot shows how to add the customTask in Google Tag Manager.

The following screenshot shows how to add the definition of the custom JavaScript variable. The complete code is in the code box above.

2. Set up CustomTask in Google Analytics JavaScript

If you set up Google Analytics using analytics.js on your website directly, you can add the following code in the code box to your existing Google Analytics code between ga create and ga pageview calls.

ga(‘create’, ‘UA-XXXXX-Y’, ‘auto’);

  ga('set', 'customTask', function(model) {
    //Change the dimension indexes to match your setup
    var cd_gaClientId = 'dimension1';
    var cd_sgClientId = 'dimension2';
    var cd_hitTimeStamp = 'dimension3';
    var cd_sessionId = 'dimension4';
    var cd_regiteredId = 'dimension5';
    
    //set the custom dimension for GA client ID
    var gaClientId = model.get('clientId');    
    model.set(cd_gaClientId, gaClientId);
    
    //set the custom dimension for SkyGlue client ID
    var gaClientIdParts = gaClientId.split(".");
	var sgClientId = gaClientIdParts[1] + gaClientIdParts[0].substring(0,4);
    model.set(cd_sgClientId, sgClientId);
    
    //set the custom dimension for hit timestamp
    var currentTime = new Date().getTime();
    model.set(cd_hitTimeStamp, currentTime);
    
    //set the custom dimension for session Id
    var sessionId = currentTime;
    model.set(cd_sessionId, sessionId);
    
    //set the custom dimension for regitered user Id
    var cookieName="__sgrid";
    var results = document.cookie.match ( '(^|;) ?' + cookieName + '=([^;]*)(;|$)' );
    if (results){
        model.set(cd_regiteredId, unescape( results[2] ) );
    }
   });

ga(‘send’, ‘pageview’);