Send Google Analytics payload length as a Custom Dimension

The maximum length of a Google Analytics payload is 8192 bytes. It is useful to check if you are approaching this value with some of your hits because if the payload length exceeds this, the hit is never sent to GA.

How can we know the payload size with each hit?

Today i will show you how to send the payload size as a custom dimension to GA with each hit. The tool is Google Tag Manager.

Before starting, creating a new hit-scoped custom dimension in GA is essential, named ‘Hit Payload Length’ and check its index.

Then, create a custom task in GTM, the custom task is to let users modify the request sent to GA before it is sent. We can take Client ID as an example.

Custom task will work with a custom javascript variable. Here is the javacript code which we create in GTM.

function () {
  // clientIdIndex: The Custom Dimension index to where you want to send the visitor's Client ID, my example is 7.
  var clientIdIndex = 7;

  // payloadLengthIndex: The Custom Dimension index to where you want to send the length of the payload of the request,  my example is 18.

  var payloadLengthIndex = 18;

  // DO NOT EDIT ANYTHING BELOW THIS LINE
  var readFromStorage = function (key) {
    if (!window.Storage) {
      // From: https://stackoverflow.com/a/15724300/2367037
      var value = '; ' + document.cookie;
      var parts = value.split('; ' + key + '=');
      if (parts.length === 2) {
        return parts.pop().split(';').shift();
      }
    } else {
      return window.localStorage.getItem(key);
    }
  };

  var writeToStorage = function (key, value, expireDays) {
    if (!window.Storage) {
      var expiresDate = new Date();
      expiresDate.setDate(expiresDate.getDate() + expireDays);
      document.cookie = key + '=' + value + ';expires=' + expiresDate.toUTCString();
    } else {
      window.localStorage.setItem(key, value);
    }
  };

  var globalSendHitTaskName   = '_ga_originalSendHitTask';

  return function (customTaskModel) {

    window[globalSendHitTaskName] = window[globalSendHitTaskName] || customTaskModel.get('sendHitTask');

    // clientIdIndex
    if (typeof clientIdIndex === 'number') {
      customTaskModel.set('dimension' + clientIdIndex, customTaskModel.get('clientId'));
    }
    // /clientIdIndex

    customTaskModel.set('sendHitTask', function (sendHitTaskModel) {

      var originalSendHitTaskModel = sendHitTaskModel,
          originalSendHitTask      = window[globalSendHitTaskName],
          canSendHit               = true;

      try {

        // payloadLengthIndex
        if (typeof payloadLengthIndex === 'number') {
          var _pl_hitPayload = sendHitTaskModel.get('hitPayload');
          _pl_hitPayload += '&cd' + payloadLengthIndex + '=';
          _pl_hitPayload += (_pl_hitPayload.length + _pl_hitPayload.length.toString().length);
          sendHitTaskModel.set('hitPayload', _pl_hitPayload, true);
        }
        // /payloadLengthIndex

        if (canSendHit) {
          originalSendHitTask(sendHitTaskModel);
        }

      } catch(err) {
        originalSendHitTask(originalSendHitTaskModel);
      }

    });

  };
}

The last step is the add the custom task into your tags, we can scroll down to a tag and add a new field, whose value will be the custom task we just created.

After this step, any tags which has this custom task will add the hit payload length as a custom dimension.

How to debug your work?

Verify it through the developer tools on your browser.

  • Open the Network on the developer tool on your browser
  • Click the request to collect
  • Check if there is a payload parameter

With this custom dimension, we can monitor if the payload maximum size will be hit.

If you are interested in or have any problems with GTM, feel free to contact me.

Or you can connect with me through my LinkedIn.

CrUX Dashboard&Data Strategy Lifecycle

Last Blog I demonstrated the data pipeline we can use CrUX to analyze the site performance. This is from a BI developer perspective.

However, for a company, especially the leadership team, what they want is the final dashboard that generated from BI department, so management plan can be gained.

I already wrote how to query from Bigquery and what site speed metrics we can use from the introduction of CrUX blog and public dataset analysis blog.

So this blog I will show you what kind of dashboard we can generate after the steps of data collection from Google public dataset and ETL.

What data visualization tool we need to use?

There are bunches of data visualization tools we can use, e.g., Data Studio, Power BI etc. This time I take Tableau for an example.

I took www.flightcentre.co.nz(blue line) and www.rentalcars.com(red line) as the origin for comparison, set customer’s device is ‘desktop’ (we also can put a filter on it too).

And there are 4 sheets on a dashboard, i.e., Slow FCP Percentage, Fast FCP Percentage, Fast FID Percentage and Slow FID Percentage.

What they actually mean?

  1. Slow FCP Percentage(the percentage of users that experienced a first contentful paint time of 1 second or less)
  2. Fast FCP Percentage(the percentage of users that experienced a first contentful paint time of 2.5 seconds or more)
  3. Fast FID Percentage(the percentage of users that experienced a first input delay time of 50 ms or less)
  4. Slow FID Percentage(the percentage of users that experienced a first input delay time of 250 ms or more)

After this graph, we can roughly see that flightcentre has a higher site speed than rentalcars in user experience.

What we can do in the next step?

After that, we can inform devs and communicate impact according to show exactly the area that the site is falling down. We can point to the fact that it’s from real users and how people actually experiencing the site.

The second part is the data strategy lifecycle in a company.

What is the data strategy lifecycle in a company?

Develop the strategy–>Create the roadmap–>Change management plan–>Analytics lifestyle–>Measurement plan

Perspectives:

  1. Scope and Purpose: What data will we manage? How much does our data worth? How do we measure success?
  2. Data collection: Archiving, what data where and when, single source of truth(data lake), integrating data silos
  3. Architecture: Real time vs Batch, data sharing, data management and security, data modelling, visualization
  4. Insights and analysis: Data Exploration, self-service, collaboration, managing results
  5. Data governance: Identify data owners, strategic leadership. data stewardship. data lineage, quality, and cost
  6. Access and security: RBAC, encryption, PII, access processes, audits, regulatory
  7. Retention and SLAs: Data tiers and retention, SLA’s to the business

Wrapping up

This post explored the CrUX dashboard BI team can generate and the data strategy in a company. In the future, I will write more.

If you are interested in or have any problems with CrUX or Business Intelligence, feel free to contact me.

Or you can connect with me through my LinkedIn.