ANALYTICS HACK CHALLENGE 2015
Head of Web Development @ "Wer liefert was"
jensblond
jensblond
The "normal" use-cases of the GTM are:
Why not use the GTM for:
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) {
…
}
…for me :)