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!
