A simple script to track viewport size and orientation on page load or when either changes

viewport-tracking.js

(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);

  })

})();