Google Tag Manager

Google Tag Manager – Utility variable for linear progress of scroll depth and Youtube video triggers

Introduction

The following tip is based on the capability to create an utility variable through a Google Tag Manager custom Javascript variable, described in the following smart (as usual) article from Simo Ahava : GTMTips: Create Utility Variables By Returning Functions

In the case below, the utility variable will be used by an intermediary variable, defining the wished parameters instance, regarding the final context of use of the variable.


Use case: Scroll depth and Youtube video playback

Scroll depth and Youtube video triggers require to fill a comma separator list of wished progress pourcentages, pixels or time thresholds.


Google Tag Manager - Scroll trigger

For most cases, you fill directly this required list with few values (ex: 0,25,50,75,100) to trigger an analytics tracking and display it as a horizontal bar chart on your reporting.

For other advanced cases, you need more intermediary values, as example if you wish to create a scroll depth heatmap for a specific experimental page with linear interval progress (cf. an interesting Twitter discussion with Lee Hurst and Michael Howe-Ely about related reporting on Google Data Studio).
So, it could be convenient to delegate the generation of the comma separator list to our utility variable (…be lazy to automate…).
of course, you can also add it as part of utility variables of your reuseable and customizable GTM recipe.


Flow of GTM configuration

#1 Creation of the utility variable

The following custom Javascript variable receives first value, last value and and constant interval as input parameters ; and returns the wished progress values list.

If there is no parameter when you call this utility variable, it returns the default value “0,25,50,75,100”.

Let’s create it using “CSUTIL – Linear interval as comma sep list” as variable name.



function() {
  	return function(from, to, interval)
  	{
		// Returned var
		var commaList = "";
		
		// Default parameters for 0,25,50,75,100 value
		var finalFrom     = (typeof (from)     == "number" ) ? from     : 0 ;
		var finalTo       = (typeof (to)       == "number" ) ? to       : 100 ;
		var finalInterval = (typeof (interval) == "number" ) ? interval : 25 ;
		
		// Adding each value following the requested interval and beginning by the first value
		for(currPos = finalFrom ; currPos < finalTo ; currPos = currPos + finalInterval)  commaList += currPos+",";
		
		// Last value
		commaList = commaList + finalTo;
		
		return commaList;
	}	
}

#2 Creation of utility variable instance

Now, we use the utility variable to get a list beginning with 0, ending with 100, and an inteval of 5 for intermediary values.

Let’s create it using “CS – Scroll depth list by 5” as variable name.


Google Tag Manager - Instance of utility variable

function()
{
  return {{CSUTIL - Linear interval as comma sep list}}(0,100,5);
}

#3 Trigger update

At last, we just need to use our instance variable to configure the scroll depth or Youtube video trigger


Google Tag Manager - Scroll depth trigger

Voilà!

Checking with GTM preview…


Google Tag Manager - Preview

Faire le minimum pour avoir le maximum