Using with dfp module

It should be possible to handle the script invocations the DFP module does (mainly via template files) .

So you would replace all

<script type='text/javascript'>

with

<script data-type="application/javascript" type="text/plain" data-name="dfp">

assuming your Klaro service machine name is `dfp`.

If that does not work out you could wrap the scripts into functions, you could call on consent given from the Klaro callback code configuration. But the first approach is the easiest, if it works.

Thanks @szeidler, that's what I end up doing. But rather than editing the template directly, it's done in a way that if at some moment klaro is not used, the templates will work. I'll ping also dfp guys to check it out, maybe they could propose some other way...

Dfp adds the remote js script https://securepubads.g.doubleclick.net/tag/js/gpt.js using an inline script, but adding the klaro attributes to the inline script didn't help, so I need to add the klaro data attributes to this remote js

, so via preprocess, if we are using klaro to consent the service, a new variable 'gads_dataset' is added:

/**
 * Implements hook_preprocess_HOOK() for dfp templates.
 */
function dfp_klaro_preprocess_dfp_js_head_top(&$variables)
{
  /** @var \Drupal\klaro\Utility\KlaroHelper $helper */
  $helper = \Drupal::service('klaro.helper');

  $service = $helper->matchKlaroApp($variables["google_tag_services_url"]);
  if ($service) {
    $variables['gads_dataset'] = [
      'type' => 'text/javascript',
      'name' => 'dfp_admanager',
      'src'  => $variables["google_tag_services_url"],
    ];
  }
}

These new variable will be used in current theme template dfp-js-head-top.html.twig, it's done in a way that if at some moment klaro is not used the templates will work too:

<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
  // Add a place to store the slot name variable.
  googletag.slots = googletag.slots || {};

  (function() {
    var useSSL = 'https:' == document.location.protocol;
    var src = (useSSL ? 'https:' : 'http:') +
      '//{{ google_tag_services_url }}';

    {% if async_rendering -%}
    var gads = document.createElement('script');
    gads.async = true;
    {% if gads_dataset -%}
      {% for property, value in gads_dataset -%}
        {% if property != 'src' -%}
          gads.dataset['{{ property }}'] = '{{ value }}';
        {%- endif %}
      {%- endfor %}
    {%- endif %}
    {% if gads_dataset['src'] -%}
      gads.dataset.src = src;
    {% else -%}
      gads.src = src;
    {%- endif %}
    var node = document.getElementsByTagName('script')[0];
    node.parentNode.insertBefore(gads, node);
    {% else -%}

    document.write('<scr' + 'ipt
    {% if gads_dataset -%}
      {% for property, value in gads_dataset -%}
        {% if property != 'src' -%}
          data-{{ property }}="{{ value }}"
        {%- endif %}
      {%- endfor %}
    {%- endif %}
    {% if gads_dataset['src'] -%}
      data-src="' + src + '"
    {% else -%}
      src="' + src + '"
    {%- endif %}
    ></scr' + 'ipt>');
    {%- endif %}

  })();
</script>

The short tag template is also controlled by klaro, this time the image attribute is defined with class Attribute, this way we could use the klaro helper to rewrite the attributes. The rewrite is done, like the previous template, if klaro dfp service is enabled.

/**
 * Implements hook_preprocess_HOOK() for dfp templates.
 */
function dfp_klaro_preprocess_dfp_short_tag(&$variables)
{
  /** @var \Drupal\klaro\Utility\KlaroHelper $helper */
  $helper = \Drupal::service('klaro.helper');

  $variables['image_attributes'] = new Attribute(array(
    'src' => $variables['url_ad'],
  ));

  $service = $helper->matchKlaroApp(TagInterface::GOOGLE_TAG_SERVICES_URL);
  if ($service) {
    $variables['image_attributes'] = $helper->rewriteAttributes($variables['image_attributes'], $service->id());
  }
}

So the dfp-short-tag.html.twig in current theme is like:

<a href="{{ url_jump }}">
  <img {{ image_attributes }}>
</a>

Then I create a common function to be used in dfp_js_head_bottom, and dfp_slot_definition_js and dfp_tag preprocess functions. Used to rewrite the script attributes to comply with klaro requirements if service is enabled.

/**
 * Adds the klaro attributes to each script preprocessed by dfp.
 */
function _dfp_klaro_preprocess_dfp(&$variables)
{
  /** @var \Drupal\klaro\Utility\KlaroHelper $helper */
  $helper = \Drupal::service('klaro.helper');

  $variables['script_attributes'] = new Attribute(array(
    'type' => 'application/javascript',
  ));

  $service = $helper->matchKlaroApp(TagInterface::GOOGLE_TAG_SERVICES_URL);
  if ($service) {
    $variables['script_attributes'] = $helper->rewriteAttributes($variables['script_attributes'], $service->id());
  }
}

/**
 * Implements hook_preprocess_HOOK() for dfp templates.
 */
function dfp_klaro_preprocess_dfp_js_head_bottom(&$variables)
{
  _dfp_klaro_preprocess_dfp($variables);
}

/**
 * Implements hook_preprocess_HOOK() for dfp templates.
 */
function dfp_klaro_preprocess_dfp_slot_definition_js(&$variables)
{
  _dfp_klaro_preprocess_dfp($variables);
}

/**
 * Implements hook_preprocess_HOOK() for dfp templates.
 */
function dfp_klaro_preprocess_dfp_tag(&$variables)
{
  _dfp_klaro_preprocess_dfp($variables);
  // to be able to show box to allow show content
  $variables['tag_attributes'] = new Attribute(
    array(
      'class' => ['dfp-tag-slot'],
    )
  );
}

So their template dfp-js-head-bottom.html.twig, dfp-slot-definition-js.html.twig will be a copy of the original but replacing the hardcoded script attributes with the twig script_attributes variable:

<script {{ script_attributes }}>

Note that the preprocess function dfp_klaro_preprocess_dfp_tag will also append the new class dfp-tag-slot to each dfp tag, this way we could add this class in classes with additional wrapper field in klaro service settings, so then a box to let user load the content will be there. The template dfp-tag.html.twig is like this:

<div id="{{ tag.placeholderId }}" {{ tag_attributes }}>
    {% if tag.isSlugHidden == false and tag.slug %}
        <div>
            {{ tag.slug }}
        </div>
    {% endif %}
    <script {{ script_attributes }}>
    {% if tag.isAsyncMode %}
        googletag.cmd.push(function() {
    {% endif %}
            googletag.display('{{ tag.placeholderId }}');
    {% if tag.isAsyncMode %}
        });
    {% endif %}

    </script>
</div>

Finally the config of the klaro service is like this:

status: true
dependencies: {  }
id: dfp_admanager
label: 'Google Ads'
description: 'Integrates DFP Google Publisher Tags onto the site'
default: false
purposes:
  - advertising
cookies: {  }
required: false
opt_out: false
only_once: false
info_url: 'https://admanager.google.com/home/'
privacy_policy_url: 'https://policies.google.com/privacy'
javascripts:
  - 'https://securepubads.g.doubleclick.net/tag/js/gpt.js'
  - 'https://pubads.g.doubleclick.net/gampad'
  - securepubads.g.doubleclick.net/tag/js/gpt.js
callback_code: "window.dataLayer = window.dataLayer || [];\r\nfunction dfp_gtag() {\r\n  dataLayer.push(arguments);\r\n}\r\nif (consent){\r\n\r\n                // we grant ad storage and personalization\r\n                dfp_gtag('consent', 'update', {\r\n                    'ad_storage': 'granted',\r\n                    'ad_user_data': 'granted',\r\n                    'ad_personalization': 'granted'\r\n                })\r\n} else {\r\n                // we decline ad storage and personalization\r\n                dfp_gtag('consent', 'update', {\r\n                    'ad_storage': 'denied',\r\n                    'ad_user_data': 'denied',\r\n                    'ad_personalization': 'denied'\r\n                })\r\n}"
wrapper_identifier:
  - dfp-tag-slot
attachments: {  }
weight: -5

Note that the callback code will be:

window.dataLayer = window.dataLayer || [];
function dfp_gtag() {
  dataLayer.push(arguments);
}
if (consent){
                // we grant ad storage and personalization
                dfp_gtag('consent', 'update', {
                    'ad_storage': 'granted',
                    'ad_user_data': 'granted',
                    'ad_personalization': 'granted'
                })
} else {
                // we decline ad storage and personalization
                dfp_gtag('consent', 'update', {
                    'ad_storage': 'denied',
                    'ad_user_data': 'denied',
                    'ad_personalization': 'denied'
                })
}

So it will implement consent mode V2 changes as told in https://klaro.org/docs/tutorials/google_tag_manager (The dfp_gtag is used because gtag function is not defined yet, because the script is executed before the gtag.js in google_tag module.

Wow, good work!

But why the module owners do not use the Drupal-way of placing their javascripts? Then you could just some values for "Attachments" and you are ready.

Maybe you can ask them to work with Drupal standard. Else you can open a MR with your code as sub module which can be enabled if dfp is used.

Thank you again for your work with this module.

I requested to merge part of the proposal in dfp project.

However, reading the notes in https://klaro.org/blog/klaro-and-the-new-google-requirements-for-cmps-tcf- it seems that implementing google consent to satisfy ad personalization purposes makes no sense if what is wanted is to implement adsense and admanager as this will never happen for what could be read in https://klaro.org/blog/klaro-and-the-new-google-requirements-for-cmps-tcf- ...

Anyway, that work is there if sometime in the future google is forced to change the way is trying to comply with gprd within their ads service...