Wer liefert was?

• Kein Startup mehr: Gegründet 1932
• B2B Marktplatz
• Firmensitz in Hamburg

Der "normale" Anwendungsfall für den GTM ist:

• Performance Verbesserung
• Verwaltung von Pixeln
• Einbindung Tracking Codes
• Anzeige von Werbemitteln

Der Google Tag Manager

Der Tag Manager

Im Tag Manager gibt es 3 Hauptbereiche

Wofür könnte man den Tag Manager noch nutzen?:

• DOM Manipulation
• JavaScript Injektion
• Feature Rollout
• …und mehr

Der "Hack"

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" }
      ];
}

Gist

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

Da im GTM Trigger nur über Variablen funktionieren, musste noch eine weitere JavaScript Funktion angelegt werden:

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

Das Ergebnis

Live Demo!

Bonus