Adding javascript to module and access drupalSettings without jQuery

Question

I am trying to create a Drupal 8 version of the Mautic Drupal module. Currently I have just ported the Drupal 7 version as is, and the script for Mautic forms along with the tracking pixel is printed in a block. Mautic now uses a tracking script and I want to update the module to use it. The tracking script looks like this (notice the Mautic base url required):

js/mautic_drupal_tracking_code.js

(function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;
    w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),
        m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
})(window,document,'script', + drupalSettings.mautic_drupal.mautic_drupal_tracking_code.base_url + '/mtc.js','mt');

mt('send', 'pageview');

The script is showing on the page, but as I am trying to avoid jQuery, I can not find out how to access the drupalSettings variable.

My module code is updated and not in sync with the github repo. Here are a description of the files:

mautic_drupal.libraries.yml

mautic_drupal_tracking_code:
  version: VERSION
  js:
    js/mautic_drupal_tracking_code.js: {}
  dependencies:
    - core/drupalSettings

mautic_drupal.module

/**
 * Implements hook_page_attachments_alter().
 *
 * @param array $page
 */
function mautic_drupal_page_attachments_alter(array &$page) {
  $config = \Drupal::service('config.factory')->get('mautic_drupal.settings');
  $mautic_url = trim($config->get('base_url'), ' \t\n\r\0\x0B/');

  if ($mautic_url != '') {
    $page['#attached']['drupalSettings']['mautic_drupal']['mautic_drupal_tracking_code']['base_url'] = $mautic_url;
    $page['#attached']['library'][] = 'mautic_drupal/mautic_drupal_tracking_code';
  }
}

On the site, the script is showing, and the base url setting is set. But alas, I can not access the settings in my javascript, I can only find examples of how to do that in jQuery scripts.

Is this possible to do in pure javascript?

Answer 1

You can try to set a weight on the js file:

  js:
    js/mautic_drupal_tracking_code.js: { weight: -18 }

There is a core issue, that the dependencies don't get the correct priority. The weight is a workaround for this:

Replace custom weights with dependencies in library declarations

If you can't get drupalSettingsLoader.js running in the correct order, you can for testing purpose put the code to load the json array at the top of your custom js:

(function () {

  'use strict';

  var settingsElement = document.querySelector('head > script[type="application/json"][data-drupal-selector="drupal-settings-json"], body > script[type="application/json"][data-drupal-selector="drupal-settings-json"]');

  window.drupalSettings = {};

  if (settingsElement !== null) {
    window.drupalSettings = JSON.parse(settingsElement.textContent);
  }
})();