20 July, 2017 seen 403
I might be late to the party of implementing AMP for my Drupal powered website, as AMP have been around for a while already, it was just tonight I finally managed to implement and validate AMP for this blog.
In this article I'll share some of my notes on how to implement AMP for Drupal, compare load times before and after and of course will touch a topic of…
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!