Commit 82030e06 authored by mxh's avatar mxh
Browse files

#3174864 Added event handling for initialized ad slots.

parent cfffa679

modules/ad_entity_adtech_v2/ad_entity_adtech_v2.libraries.yml

+2 −2
Original line number Diff line number Diff line
@@ -13,10 +13,10 @@ layout_rules: 
  dependencies:

    - core/jquery.ui.sortable



helper:

init:

  header: true

  js:

    js/ad_entity.helper.js: {}

    js/adtech.init.js: {}

  dependencies:

    - ad_entity/base

    - core/drupalSettings

modules/ad_entity_adtech_v2/ad_entity_adtech_v2.module

+6 −3
Original line number Diff line number Diff line 
<?php



/**

 * @file

 * Module file.

 * The ad_entity_adtech_v2 module file.

 */



use Drupal\ad_entity\Render\Markup;



/**

 * Implements hook_ad_entity_module_info().

 */
@@ -82,7 +85,7 @@ function ad_entity_adtech_v2_page_attachments(&$attachments) { 
    }

    $attachments['#attached']['drupalSettings']['ad_entity_adtech_v2']['page_targeting'] = $tmp['settings']['targeting'];

  }

  $attachments['#attached']['library'][] = 'ad_entity_adtech_v2/helper';

  $attachments['#attached']['library'][] = 'ad_entity_adtech_v2/init';

}



/**

modules/ad_entity_adtech_v2/ad_entity_adtech_v2.theme.inc

+2 −2
Original line number Diff line number Diff line
@@ -6,7 +6,7 @@ 
 */



use Drupal\Core\Template\Attribute;

use Drupal\Component\Utility\Crypt;

use Drupal\Component\Utility\Html;



/**

 * Preprocess implementation for a default AdTech Factory tag view.
@@ -22,7 +22,7 @@ function template_preprocess_adtech_v2_default(array &$variables) { 
  $global_settings = $config->get('adtech_v2_factory');



  // Generate attributes.

  $id         = 'adtech-v2-' . Crypt::randomBytesBase64(8);

  $id = Html::getUniqueId($ad_entity->id());

  $attributes = new Attribute(['id' => $id]);

  $attributes->addClass('adtech-v2-factory-ad');

  $attributes->addClass('adtech-v2-default-view');

modules/ad_entity_adtech_v2/js/ad_entity.helper.js→modules/ad_entity_adtech_v2/js/adtech.init.js

+296 −0
Original line number Diff line number Diff line 
/**

 * @file

 * JS implementation for extracting channel and layout data from page targeting.

 * JS implementation for initializing atf-* dataLayer variables.

 */

(function (adEntity, settings) {

(function (window, adEntity, settings) {



  adEntity.adTech = adEntity.adTech || {};

  window.dataLayer = window.dataLayer || [];

  window.googletag = window.googletag || {};

  window.googletag.cmd = window.googletag.cmd || [];



  /**

   * Init.

   * Initialize function.

   *

   * @param settings

   */

  adEntity.init = function (settings) {

    if (settings.hasOwnProperty('ad_entity_adtech_v2')) {

      settings = settings.ad_entity_adtech_v2;



      let channel = null;

      let content_type = null;

      let global_targeting = null;

      let use_lazy_load = 0;

      let targeting = settings.hasOwnProperty('page_targeting') ? settings.page_targeting : null;

      targeting = targeting ? targeting : {};

      let global_settings = settings.hasOwnProperty('global_settings') ? settings.global_settings : null;



      if (null !== global_settings) {

        let layout_rules = global_settings.hasOwnProperty('layout_rules') ? global_settings.layout_rules : null;

        global_targeting = global_settings.hasOwnProperty('page_targeting') ? global_settings.page_targeting : null;

        global_targeting = global_targeting ? JSON.parse(global_targeting) : {};

        use_lazy_load = global_settings.hasOwnProperty('data_atf_use_lazy_load') ? global_settings.data_atf_use_lazy_load : null;



        if (null !== layout_rules) {

          layout_rules.sort(this.weightComparator);

          content_type = this.getLayout(layout_rules, targeting);

  adEntity.adTech.init = adEntity.adTech.init || function (settings) {

    var buffer = {};

    if (!settings.hasOwnProperty('ad_entity_adtech_v2')) {

      return;

    }

    buffer = {use_lazy_load: null, content_type: null};

    buffer.settings = settings.ad_entity_adtech_v2;

    if (!buffer.settings.hasOwnProperty('page_targeting')) {

      buffer.settings.page_targeting = {};

    }



    if (buffer.settings.global_settings) {

      if (!this.globalPageTargeting && buffer.settings.global_settings.page_targeting) {

        this.globalPageTargeting = JSON.parse(buffer.settings.global_settings.page_targeting);

      }



      if (buffer.settings.global_settings.data_atf_use_lazy_load) {

        buffer.use_lazy_load = true;

      }



      if (buffer.settings.global_settings.layout_rules) {

        buffer.layout_rules = buffer.settings.global_settings.layout_rules;

        if (Array.isArray(buffer.layout_rules)) {

          buffer.layout_rules.sort(this.weightComparator);

          buffer.content_type = this.getLayout(buffer.layout_rules, buffer.settings.page_targeting);

        }

      }

    }

    // In case that channel value is empty on page targeting,

    // we use the one used in global entity settings.

          channel = this.getChannel(targeting);

          if (null === channel) {

            channel = this.getChannel(global_targeting);

    buffer.channel = this.getChannel(buffer.settings.page_targeting);

    if (!buffer.channel && this.globalPageTargeting) {

      buffer.channel = this.getChannel(this.globalPageTargeting);

    }



    window.googletag.cmd.push(function () {

      window.googletag.pubads().addEventListener('slotRenderEnded', function (event) {

        var eb = {id: event.slot.getSlotElementId()};

        var helpers = adEntity.helpers || null;

        if (!helpers || !eb.id || !adEntity.adContainers) {

          return;

        }

        eb.slot_el = window.document.getElementById(eb.id);

        if (!eb.slot_el) {

          return;

        }

        eb.i = 0;

        eb.el = eb.slot_el.parentNode;

        while (eb.i < 5 && eb.el && !eb.container) {

          for (eb.containerId in adEntity.adContainers) {

            if (adEntity.adContainers.hasOwnProperty(eb.containerId)) {

              eb.container = adEntity.adContainers[eb.containerId];

              if (eb.container.ad_tag && eb.container.ad_tag.el && eb.container.ad_tag.el === eb.el) {

                break;

              }

            }

      this.insertIntoDataLayer('atf-useLazyLoad', (1 === use_lazy_load) ? 'true' : null);

      this.insertIntoDataLayer('atf-contentType', content_type);

      this.insertIntoDataLayer('atf-channel', channel);

      this.insertIntoDataLayer('atf-targeting', targeting);

            eb.container = null;

          }

  };

          eb.el = eb.el.parentNode;

          eb.i++;

        }

        if (!eb.container) {

          return;

        }

        eb.el = eb.container.el;

        helpers.removeClass(eb.el, 'not-initialized');

        helpers.addClass(eb.el, 'initialized');

        eb.container.data('initialized', true);

        if (event.isEmpty === true) {

          helpers.addClass(eb.el, 'empty');

          helpers.removeClass(eb.el, 'not-empty');

        }

        else {

          helpers.addClass(eb.el, 'not-empty');

          helpers.removeClass(eb.el, 'empty');

        }

        helpers.trigger(eb.el, 'adEntity:initialized', true, true, { container: eb.container });

      });

    });



    this.insertIntoDataLayer('atf-useLazyLoad', buffer.use_lazy_load);

    this.insertIntoDataLayer('atf-contentType', buffer.content_type);

    this.insertIntoDataLayer('atf-channel', buffer.channel);

    this.insertIntoDataLayer('atf-targeting', buffer.settings.page_targeting);

  }.bind(adEntity.adTech);



  /**

   * Inset data into dataLayer.

   * Inserts data into dataLayer.

   *

   * @param tag

   * @param value

   *

   */

  adEntity.insertIntoDataLayer = function (tag, value) {

     window.dataLayer = window.dataLayer || [];

      if (undefined === value || '' === value || null === value) {

  adEntity.adTech.insertIntoDataLayer = function (tag, value) {

    var buffer = {};

    if (typeof value === 'undefined' || '' === value || null === value) {

      return;

    }

      let tmpObj = {};

      tmpObj[tag] = value;

      window.dataLayer.push(tmpObj);

  };

    buffer[tag] = value;

    window.dataLayer.push(buffer);

  }



  /**

   * Compare function for layout rules (weight property).

   *
@@ -67,9 +123,10 @@ 
   * @param b

   * @returns {number}

   */

  adEntity.weightComparator = function (a, b) {

  adEntity.adTech.weightComparator = function (a, b) {

    return (a.weight > b.weight) ? 1 : ((b.weight > a.weight) ? -1 : 0);

  };



  /**

   * Get the current page channel.

   *
@@ -77,7 +134,7 @@ 
   *

   * @returns {string}

   */

  adEntity.getChannel = function (containerTargetingData) {

  adEntity.adTech.getChannel = function (containerTargetingData) {

    var channel = null;

    if (containerTargetingData.hasOwnProperty('channel')) {

      channel = containerTargetingData.channel;
@@ -89,31 +146,28 @@ 
    }

    return channel;

  };



  /**

   * Get the layout string value.

   *

   * @param layout_rules

   * @param containerTargetingData

   *

   * @returns {*}

   * @returns {string|null}

   */

  adEntity.getLayout = function (layout_rules, containerTargetingData) {

    var layout = null;

  adEntity.adTech.getLayout = function (layout_rules, containerTargetingData) {

    var buffer = {layout: null, i: 0};



    if (null !== layout_rules) {

      for (var index in layout_rules) {

        if (layout_rules.hasOwnProperty(index)) {

          var rule = layout_rules[index];

          var tmpLayout = this.processRule(rule, containerTargetingData);

          if (null !== tmpLayout && tmpLayout.length > 0) {

            return tmpLayout;

          }

        }

    for (buffer.i = 0; buffer.i < layout_rules.length; buffer.i++) {

      buffer.layout = this.processRule(layout_rules[buffer.i], containerTargetingData);

      if (buffer.layout && buffer.layout.length) {

        return buffer.layout;

      }

    }



    return layout;

  };

    return null;

  }.bind(adEntity.adTech);



  /**

   * Process the provided rule.

   *
@@ -121,7 +175,7 @@ 
   * @param containerTargetingData

   * @returns {*}

   */

  adEntity.processRule = function (rule, containerTargetingData) {

  adEntity.adTech.processRule = function (rule, containerTargetingData) {

    if (!rule.hasOwnProperty('rule_type')) {

      return null;

    }
@@ -140,23 +194,25 @@ 
        return this.processLayoutRuleEntityType(rule, containerTargetingData, 'taxonomy_term');



    }

  };

  }.bind(adEntity.adTech);



  /**

   * Process the "default" value rule.

   *

   * @param ruleConfig

   * @returns {*}

   */

  adEntity.processLayoutRuleDefault = function (ruleConfig) {

  adEntity.adTech.processLayoutRuleDefault = function (ruleConfig) {

    return ruleConfig.hasOwnProperty('layout') && '' !== ruleConfig.layout ? ruleConfig.layout : null;

  };



  /**

   * Process the url Regex rule.

   *

   * @param ruleConfig

   * @returns {*}

   */

  adEntity.processLayoutRuleUrlRegex = function (ruleConfig) {

  adEntity.adTech.processLayoutRuleUrlRegex = function (ruleConfig) {

    if (ruleConfig.hasOwnProperty('regex')) {

      var currentUrl = document.location.href;

      try {
@@ -171,6 +227,7 @@ 
    }

    return null;

  };



  /**

   * Process the entity type rule.

   *
@@ -179,7 +236,7 @@ 
   * @param entityType

   * @returns {*}

   */

  adEntity.processLayoutRuleEntityType = function (ruleConfig, containerTargetingData, entityType) {

  adEntity.adTech.processLayoutRuleEntityType = function (ruleConfig, containerTargetingData, entityType) {

    var entityTypeBundle = this.getEntityTypeBundle(containerTargetingData, entityType);

    if (null !== entityTypeBundle && ruleConfig.hasOwnProperty('type')) {

      if (ruleConfig.type.hasOwnProperty(entityTypeBundle) && ruleConfig.type[entityTypeBundle] !== 0) {
@@ -187,7 +244,8 @@ 
      }

    }

    return null;

  };

  }.bind(adEntity.adTech);



  /**

   * Get the bundle type of the provided entity type, if it is of the correct

   * type.
@@ -196,7 +254,7 @@ 
   * @param entityType

   * @returns {*}

   */

  adEntity.getEntityTypeBundle = function (containerTargetingData, entityType) {

  adEntity.adTech.getEntityTypeBundle = function (containerTargetingData, entityType) {

    var entityTypeBundle = null;

    var entityTypeValue = containerTargetingData.hasOwnProperty('entitytype') ? containerTargetingData.entitytype : false;

    if (false !== entityTypeValue) {
@@ -204,6 +262,7 @@ 
    }

    return entityTypeBundle;

  };



  /**

   * Replace the tokens on the

   *
@@ -212,7 +271,7 @@ 
   * @param entityTypeBundle

   * @returns {*}

   */

  adEntity.replaceEntityTypeRuleTokens = function (ruleConfig, entityType, entityTypeBundle) {

  adEntity.adTech.replaceEntityTypeRuleTokens = function (ruleConfig, entityType, entityTypeBundle) {

    var layout = ruleConfig.layout;



    switch (ruleConfig.rule_type) {
@@ -232,6 +291,6 @@ 
  };



  // Add data to dataLayer.

  adEntity.init(settings);

  adEntity.adTech.init(settings);



}(window.adEntity, drupalSettings));
 
}(window, window.adEntity, window.drupalSettings));

modules/ad_entity_adtech_v2/js/default.view.js

+20 −9
Original line number Diff line number Diff line
@@ -13,7 +13,11 @@ 
      var container;

      var container_id;

      var ad_el;

      var ad_tag;



      // The contained ad tags will be loaded by ATF SDK automatically.

      // There is no way to manually pass ad tags to the SDK, thus here

      // the contained ad tags will just be collected for later event binding.

      for (container_id in containers) {

        if (containers.hasOwnProperty(container_id)) {

          container = containers[container_id];
@@ -23,6 +27,13 @@ 
          }



          this.numberOfAds++;

          ad_tag = {

            el: ad_el,

            data: function (key, value) {

              return ad_entity.helpers.metadata(this.el, this, key, value);

            }

          };

          container.ad_tag = ad_tag;

        }

      }

    },