Skip to content

Instantly share code, notes, and snippets.

@taylor-rowe
Last active November 24, 2020 21:25
Show Gist options
  • Save taylor-rowe/90b51abbcd8ca3978aec to your computer and use it in GitHub Desktop.
Save taylor-rowe/90b51abbcd8ca3978aec to your computer and use it in GitHub Desktop.
A simple script to track viewport size and orientation on page load or when either changes
(function() {
//first we will find the current width and height and declare a few variables that we'll use later
var vW = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var vH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var orientation = null;
var viewRange = null;
//enter the pixel values that trigger your responsive design
var breakpoints = [480, 992, 1200];
//give each range a name, the first value will be lower than the first number above
//the second value will be in between the first two, etc... feel free to add more than three.
var breakpointNames = ['extra small', 'small', 'medium', 'large'];
//this function will be used later to find which range we are in
function _getView(width){
var i = x = breakpoints.length;
while(i--){
if (width >= breakpoints[i] && i == x-1){
return breakpointNames[i+1];
} else if (width < breakpoints[i] && width >= breakpoints[i-1]){
return breakpointNames[i];
} else if (width <= breakpoints[i] && i == 0){
return breakpointNames[i];
}
}
}
//this function tells you if the user is using a portrait or landscape orientation
function _getOrientation(width, height) {
return (width > height) ? 'landscape' : 'portrait'
}
//this function updates Google Tag Manager when a breakpoint is reached or when the orientation changes
function _pushView(type, range, orientation) {
if (type == 'view') {
dataLayer.push({
'event': 'viewport',
'viewport-range': range,
'orientation': orientation
});
}
if (type == 'orientation') {
dataLayer.push({
'event': 'orientation',
'viewport-range': range,
'orientation': orientation
});
}
}
//a cross browser event listener
function addListener(element, type, callback) {
if (element.addEventListener) element.addEventListener(type, callback);
else if (element.attachEvent) element.attachEvent('on' + type, callback);
}
//now let's take a look at the current situation and push it to the dataLayer immediately
orientation = _getOrientation(vW, vH);
viewRange = _getView(vW);
dataLayer.push({
'event': 'tracking-ready',
'viewport-range': viewRange,
'orientation': orientation
});
var timer;
//listen for changes in viewport
addListener(window, 'resize', function() {
//we don't want this running excessively, so we are only going to run it every once and a while
if (timer) window.clearTimeout(timer);
timer = window.setTimeout(function() {
//we know what the viewport was before, but what is it now that the window has changed? Let's find out.
var currentWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var currentHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var currentOrientation = _getOrientation(currentWidth, currentHeight);
var currentViewRange = _getView(currentWidth);
//If we are in a new range or a new orientation, let's notify the dataLayer
if (currentViewRange != viewRange) {
_pushView('view', currentViewRange, currentOrientation)
}
if (currentOrientation != orientation) {
_pushView('orientation', currentViewRange, currentOrientation)
}
//now that we've tracked the change, let's reset our baseline
viewRange = currentViewRange;
orientation = currentOrientation;
}, 100);
})
})();
@jvrunion
Copy link

Nice little script!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment