How To Fix Drupal AMP Error with Google Analytics

Updated: 20 December, 2022 seen 58
AMP Google Analytics Drupal Development

AMP for Drupal is a really powerful module, that can give your Drupal-powered website an impressive website traffic boost. But it will only work if there are no AMP-related issues - like Custom Javascript error from the Google Analytics module. 

I have been using Drupal AMP since 2016 or 2017 but stopped using it after upgrading my Drupal version from 7 to 9, as there were some bugs with the Drupal AMP module - it just didn't work.  

At the end of 2022, I decided to fix it and get AMP back for Drupal - it took me several days and nights, a lot of clean state servers, MySQL dumps.. but in the end, turned out just a line of code in amp module. Victory, I thought, when noticed ?amp pages working out. Just a few days later I noticed that despite ?amp being up and running it is far from perfect - there was zillions of errors and AMP was just not valid.

turned out I didn't have enabled (or built) an AMP theme. Which I did. Then fixed some minor things with the Advanced Aggregation Module, till was left with the last error standing - custom Javascript from Google.

After several hours of research, I found a working solution (Drupal 9.4 and AMP 8.3.50) 

it involved enabling the Bartik AMP theme and adding the following code to the bartik_amp.theme file

function my_theme_preprocess_html(&$variables) {
  foreach ($variables['page']['#attached']['html_head'] as $key => $value) {
    // Remove any other scripts that are being attached to the page.
    if ($value[0]['#tag'] == 'script' && (!isset($value[0]['#attributes']['type']) || $value[0]['#attributes']['type'] != 'application/ld+json')) {
      unset($variables['page']['#attached']['html_head'][$key]);
    }
  }
}

Warning: this is not part of bartik_amp, hence the "my_theme" prefix in the code sample; it must be adapted to your particular theme machine name. Also, if using the snippet for adjusting AMP Toolbar classes (see below), make sure to put it all under a single "my_theme_preprocess_html" function.

here is a full working bartik_amp.theme file

<?php

 

use Drupal\Core\Template\Attribute;

 

/**

* Implements hook_library_info_alter().

*/

function bartik_amp_library_info_alter(&$libraries, $extension) {

  // This library persists even if listed in libraries-override.

  // This code will pull it out for good.

  if ($extension == 'core' && isset($libraries['html5shiv'])) {

    unset($libraries['html5shiv']);

  }

 

}

 

/**

* Implements hook_preprocess_html().

*

* Reset toolbar classes and add sidebar toggle button to the header.

*/

function bartik_amp_preprocess_html(&$variables) {

foreach ($variables['page']['#attached']['html_head'] as $key => $value) {

    // Remove any other scripts that are being attached to the page.

    if ($value[0]['#tag'] == 'script' && (!isset($value[0]['#attributes']['type']) || $value[0]['#attributes']['type'] != 'application/ld+json')) {

      unset($variables['page']['#attached']['html_head'][$key]);

    }

  }

 

// AMP Toolbar wrapped the toolbar in amp-sidebar, which is always

  // vertical. Change the page classes to reflect that.

  // @see toolbar.html.twig.

  if (!empty($variables['page_top']['toolbar'])) {

    if (!empty($variables['attributes']) && $variables['attributes'] instanceof Attribute) {

      $variables['attributes']->removeClass('toolbar-horizontal');

      $variables['attributes']->addClass('toolbar-vertical');

    }

    else {

      $variables['attributes'] = new Attribute($variables['attributes']);

      $variables['attributes']->addClass(['toolbar-tray-open', 'toolbar-vertical', 'toolbar-fixed', 'toolbar-loading']);

    }

}

}

 

Hope it helps!

Disqus