code.talks 2016
Head of Web Development @ "Wer liefert was"
jensblond
jensblond
Damals
Heute
Der "normale" Anwendungsfall für den GTM ist:
Im Tag Manager gibt es 3 Hauptbereiche
Es gibt einen Haufen vordefinierter Tags, wie z.B. Google Analytics, Adwords, Criteo, usw. Aber man kann auch eigenes HTML definieren (inkl. JavaScript)
Auch die Variablen haben ein ganzes Set an vordefinierten Variablen, z.B. URL, DataLayer und auch JavaScript
Trigger steuern das Abfeuern der Tags, hier kann auf alle Variablen zugegriffen werden.
Wofür könnte man den Tag Manager noch nutzen?:
Ich will 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"
}]
}]
}
Die Video Daten:
Eine Funktion, die einfaches JSON zurück gibt
Im GTM: Variable als Custom JavaScript Typ
Mapping:
URL zu Category ID
Da es nur eine bestimmte Anzahl an Videos für bestimmte Kategorien gab, mussten die Teaser anhand der Kategorie URLs ausgesteuert werden. Dazu wurde die Category ID benötigt.
Mapping:
URL zu Category ID und visibility
Im GTM: Custom JavaScript
function () {
return [
{ path: '/de/firmen/apparate-und-behaelterbau', visibility: true, id: "94401" },
{ path: '/de/firmen/armaturen', visibility: true, id: "89738" },
{ path: '/de/firmen/automatisierungstechnik', visibility: true, id: "87071" },
{ path: '/de/firmen/dichtungen', visibility: true, id: "90322" },
{ path: '/de/firmen/laborgeraete', visibility: true, id: "76541" },
{ path: '/de/firmen/messtechnik', visibility: true, id: "94814" },
{ path: '/de/firmen/pumpen-fuer-die-chemische-industrie', visibility: true, id: "83832" },
{ path: '/de/firmen/ventile', visibility: true, id: "90045" },
{ path: '/de/firmen/waermetauscher', visibility: false, id: "62316" }
];
}
Mapping Parser
Da es natürlich auch URL Parameter in den Suchergebniss Seiten gibt, musste ich hier mit Regulären Ausdrücken arbeiten.
function() {
var inputVariable = {{Page URL}}, // Variable aus dem GTM
defaultVal = [],
categories = {{OMF Mapping}}; // mapping table
for (var i = 0, len = categories.length; i < len; i++) {
var regex = new RegExp(categories[i].path);
if (regex.test(inputVariable)) {
return categories[i];
}
}
// { path: '/de/firmen/laborgeraete', visibility: true, id: "76541" }
return defaultVal;
}
Sichtbarkeit
function() {
return {{OMF parser}}.visibility
}
Da im GTM Trigger nur über Variablen funktionieren, musste noch eine weitere JavaScript Funktion angelegt werden:
Trigger
Custom JavaScript (OMF visibility)
Der eigentliche Tag:
JavaScript-DOM-Injection-voodoo
Im GTM: Tag als Custom HTML Tag
<script>
var category_id = {{OMF category id}};
var video_ids = {{OMF data}};
var videos = get_video_ids(video_ids, category_id).slice(0,4);
var row = div_with_class('row product-teaser-row');
for (var i=0, len=videos.length; i < len; i++) {
var icon = document.createElement('i'),
img = document.createElement('img'),
button = document.createElement('button'),
link = document.createElement('a'),
teaser_media_foreground = div_with_class('teaser-media-foreground'),
teaser_media = div_with_class('teaser-media product-teaser-media'),
text_info = div_with_class("text-info teaser-hover-underline text-truncate"),
panel_body = div_with_class('panel-body'),
col_xs_3 = div_with_class('col-xs-6 col-sm-3');
icon.setAttribute('class', 'icon icon-chevron-right');
button.setAttribute('class', 'btn btn-info teaser-btn');
button.innerHTML = 'Video ansehen';
button.appendChild(icon);
teaser_media_foreground.appendChild(button);
img.setAttribute('src', 'https://img.youtube.com/vi/' + videos[i].id + '/mqdefault.jpg');
img.setAttribute('class', 'teaser-media-background product-teaser-resize-image intro-ani-base fn-image-unveil');
teaser_media.appendChild(img);
teaser_media.appendChild(teaser_media_foreground);
text_info.innerHTML = videos[i].company_name;
panel_body.appendChild(teaser_media);
panel_body.appendChild(text_info);
link.setAttribute('class', 'panel panel-sm teaser');
link.setAttribute('href', 'https://www.youtube.com/watch?v=' + videos[i].id);
link.appendChild(panel_body);
col_xs_3.appendChild(link);
row.appendChild(col_xs_3);
}
var result_list = document.getElementsByClassName('product-teaser-row')[0].parentNode.childNodes;
result_list[0].parentNode.insertBefore(row, result_list[3] || result_list[result_list.length - 1]);
function div_with_class(classname) {
div = document.createElement('div');
div.setAttribute("class", classname);
return div;
}
function get_video_ids(categories, category_id) {
for (var i = 0; i < categories.length; i++) {
if (categories[i].id === parseInt(category_id)) {
return categories[i].video_ids
}
}
}
</script>
Der eigentliche Tag:
JavaScript-DOM-Injection-voodoo
Im GTM: Tag als Custom HTML Tag