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):


})(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:


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


 * 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?

1 Answer 1


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

    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);
  • Unfortunately that did not work. Thanks for the tip thought, I did not know of this issue.
    – pusle
    Commented Aug 15, 2016 at 11:43
  • it should work without jquery, see the edited answer.
    – 4uk4
    Commented Aug 15, 2016 at 12:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.