GTM Tag for OMF

omftag.js

<script>
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 + '/',
      dataAction   = 'click_serp_omfportal_teaser',
      dataCategory = 'click',
      iconPlayPath = '/de/videos/assets/images/play-icon.png',
      inlineStyle  = 'margin-bottom: 20px;',
      row          = createNode('div', { 'class' : 'row' }),
      videos       = getCategory(categories, categoryId).video_ids.slice(0, 2)
  ;

  generateTeaser();
  generateTeaserProducts();
  // teaser.replaceChild(row, teaser.children[0]);
  teaser.parentNode.insertBefore(row, teaser.nextSibling);
}



function generateTeaser() {
  var col              = createNode('div', { 'class' : 'col-sm-12 col-md-4' }),
      panel            = createNode('a',   { 'class' : 'panel tile-md-3', 'data-action' : dataAction, 'data-category' : dataCategory, 'href' : categoryPath, 'style' : inlineStyle }),
      panelBody        = createNode('div', { 'class' : 'panel-body text-center' }),
      panelBodyIcon    = createNode('img', { 'src'   : iconPlayPath }),
      panelBodyHeading = createNode('h2',  { 'class' : 'font-weight-light' }),
      panelBodyButton  = createNode('button', { 'class' : 'btn btn-info' })
  ;

  panelBodyHeading.textContent = 'Alles zum Produkt in unter 1 Minute';
  panelBodyButton.textContent  = 'Jetzt Videos ansehen';

  panelBody.appendChild(panelBodyIcon);
  panelBody.appendChild(panelBodyHeading);
  panelBody.appendChild(panelBodyButton);
  panel.appendChild(panelBody);
  col.appendChild(panel);
  row.appendChild(col);
}

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', 'data-action' : dataAction, 'data-category' : dataCategory, 'href' : categoryPath, 'style' : inlineStyle }),
        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);
  }
}

function getCategory(categories, categoryId) {
  for (var i = 0; i < categories.length; i++) {
    if (categories[i].id == categoryId) {
      return categories[i];
    }
  }
}

// Helper Function for quick node generation

function createNode(element, options) {
  var node = document.createElement(element);

  for (var option in options) {
    if (options.hasOwnProperty(option)) {
      node.setAttribute(option, options[option]);
    }
  }
  return node;
}
</script>