Use the GTM for Feature Rollout

ANALYTICS HACK CHALLENGE 2015

Jens Hinrichs

Head of Web Development @ "Wer liefert was"

jensblond

jensblond

The "normal" use-cases of the GTM are:

  • Increase of Speed
  • Maintenance
  • Tracking codes
  • Displaying Ads

The Google Tag Manager

Why not use the GTM for:

  • Manipulating the DOM
  • Injecting JavaScript
  • Feature Rollout

The "Hack"

I want Videos!

function() {
  return [{
    "id": 76541, // our category id
    "category_slug": "laborgeraete",
    "name": "Laborgeräte",
    "url": "https://www.wlw.de/de/firmen/laborgeraete", // Landingpage
    "video_ids": [{
      "id": "VTTXWOoWg2c", // Youtube ID
      "company_name": "BRAND GMBH + CO KG",
      "product_name": "Liquid Handling Station"
    }, {
      "id": "WIeFUXPVeb4",
      "company_name": "KS Schneider Elektronik GmbH",
      "product_name": "S-Serie"
    }, {
      "id": "yFBOR6ufkx8",
      "company_name": "Heraeus Deutschland GmbH & Co. KG",
      "product_name": "Laborgeräte"
    }, {
      "id": "_rBphIJROEY",
      "company_name": "Hirschmann Laborgeräte GmbH & Co. KG",
      "product_name": "rotarus"
    }]
  }]
}

The video data:

A function that returns your JSON

In GTM: Variable as Type Custom JavaScript

Mapping:

URL to Category ID

In GTM: Simple Lookup Table

URL Matching:

RegEx for visibility of the teaser

In GTM: Variable {OMF SERP} as type Custom Javascript

function() {
  var inputVariable = {{Page URL}},
      defaultVal = false,
      categories = [
        { path: '/de/firmen/apparate-und-behaelterbau', visibility: true },
        { path: '/de/firmen/armaturen', visibility: true },
        { path: '/de/firmen/automatisierungstechnik', visibility: true },
        { path: '/de/firmen/dichtungen', visibility: true },
        { path: '/de/firmen/laborgeraete', visibility: true },
        { path: '/de/firmen/messtechnik', visibility: true },
        { path: '/de/firmen/pumpen-fuer-die-chemische-industrie', visibility: true },
        { path: '/de/firmen/ventile', visibility: true },
        { path: '/de/firmen/waermetauscher', visibility: false }
      ];

  for (var i = 0, len = categories.length; i < len; i++) {
    var regex = new RegExp(categories[i].path);
    if (regex.test(inputVariable)) {
      return categories[i].visibility;
    }
  }

  return defaultVal;
}

This Variable is used in the Trigger…

Trigger:

Uses the {OMF SERP} Variable

In GTM: Trigger

This Trigger is used for the firing tag…

Tag:

The whole JavaScript DOM-Injection voodoo

In GTM: Tag with type Custom HTML Tag

var teaser = document.getElementsByClassName('result-company')[1];

if (teaser) {
  var categories   = {{OMF video json}},
      categoryId   = {{OMF Category Id}},
      categorySlug = getCategory(categories, categoryId).category_slug,
      categoryPath = '/de/videos/' + categorySlug + '/',
      iconPlayPath = '/de/videos/assets/images/play-icon.png',
      row          = createNode('div', { 'class' : 'row' }),
      videos       = getCategory(categories, categoryId).video_ids.slice(0, 2);

  generateTeaser();
  generateTeaserProducts();
  teaser.parentNode.insertBefore(row, teaser.nextSibling);
}

function generateTeaserProducts() {
  for (var i = 0; i < videos.length; i++) {
    var col              = createNode('div', { 'class' : 'col-sm-6 col-md-4' }),
        panel            = createNode('a', { 'class' : 'panel panel-sm tile-md-3', 'href' : categoryPath, 'style' : 'margin-bottom: 20px;' }),
        panelBody        = createNode('div', { 'class' : 'panel-body' }),
        panelBodyHeading = createNode('h5', { 'class' : 'text-info' }),
        thumbnail        = createNode('div', { 'class' : 'teaser-media' });

    panelBodyHeading.textContent = videos[i].product_name;
    thumbnail.appendChild(createNode('img', { 'class' : 'teaser-media-background', 'src' : 'https://img.youtube.com/vi/' + videos[i].id + '/mqdefault.jpg' }));
    thumbnail.appendChild(createNode('img', { 'class' : 'teaser-media-foreground', 'src' : iconPlayPath }));
    panelBody.appendChild(panelBodyHeading);
    panel.appendChild(thumbnail);
    panel.appendChild(panelBody);
    col.appendChild(panel);
    row.appendChild(col);
  }
}
// Generates the "teaser"
function generateTeaser() {
  …
}
// Returns the JSON node of the given category
function getCategory(categories, categoryId) {
  …
}
// Helper Function for quick node generation
function createNode(element, options) {
  …
}

The Result

Fragen?

Don't forget to vote

…for me :)

https://slides.com/jensblond/gtm-hack

Made with Slides.com