There’re a lot of discussions going on around Google-backed AMP (Accelerated Mobile Pages) project, more and more reputable websites and web platforms are adopting them, while others claim that AMP kills the web and/or their site. I will let you weigh the pros and cons and decide whether AMP is right for you, at the end of the day you can always switch back to your regular mobile/responsive version of the site, thankfully it’s pretty easy to do in Drupal.
In this post, I will cover the steps needed to set up AMP for your content in Drupal 7, including installation, configuration, and customizations of the modules and themes, validation and analytics, as well as a couple of workarounds and features that can be problematic to set up.
1. Install modules
-
- Install (don’t enable for now) AMP module. You can find it here
- Install and enable Composer manager module
2. Install enable AMP base theme
You can find the theme here
3. Create custom subtheme
using example subtheme from “ampsubtheme_example” source files from the base theme and put it in your “themes” directory
-
- Enable your subtheme
- Adjust theme settings on the theme settings admin page appearance/settings/your_custom_AMP_theme
4. Enable AMP module
-
- Composer manager should download all the required dependencies automatically and put them in the /sites/all/vendor directory. You can check the result/status at admin/config/system/composer-manager page
- If dependencies were not downloaded for some reason and autoloader needs to be run once again, try clicking the “Rebuild composer.json file” button.
5. Configure AMP module
-
- Enable AMP only for dynamic content types (blog, news, articles). You can do it by going to “Custom Display Settings” in the content type “Manage display” page and checking a checkbox for AMP and save changes. After enabling AMP display, content becomes available on URLs such as `node/1?amp` or `node/article-title?amp`, and your regular non-AMP pages will have links to their AMP URLs with rel=”amphtml” which allow Google automatically discover them as it crawls your site.
- You can then select fields and change display settings for AMP display mode. And then choose respective formatters (e.g. AMP image for image fields, AMP text for body etc.)
- Select your subtheme on AMP configuration page
- Set rules for preprocess in “AMP configuration” tab
- Set logo and company name in “AMP metadata” tab
6. Re-assign blocks
-
- Go to blocks interface for your theme and select which blocks you want on your AMP pages (you may want to remove/disable most of the blocks you use on non-amp version of the site)
- Make sure all active blocks have valid AMP code that follows AMP Specification for HTML and styles and don’t have custom JavaScript. Some help and demos here
7. Add/re-add and fix menus
-
- AMP doesn’t allow having custom JavaScript so it’s pretty hard to make your Drupal menus look nice and be user-friendly. You can choose to not to have them at all or provide a set of plain links instead or spend some time on figuring out a custom solution.
- Our custom solution is using js-based amp-sidebar component (see more here ) with some additional code to make it work with Drupal menu system. See below:
In page header (in custom page.tpl.php) add hamburger button that triggers sidebar menu:
<a on="tap:sidebar.toggle" class="hamburger"> <span></span> <span></span> <span></span> </a>
Below main page wrapper (same custom page.tpl.php file) add sidebar menu:
<?php if (isset($amp_sidebar)): ?> <?php print $amp_sidebar; ?> <?php endif; ?>
In subtheme template.php file add a hook to preprocess the page and create an AMP menu variable that contains your “Main menu” links wrapped in HTML tags required for the AMP sidebar:
function amp_subtheme_preprocess_page(&$vars) {
$links = menu_tree_output(menu_tree_all_data(variable_get('menu_main_links_source', 'main-menu')));
$amp_all_links = '';
foreach ($links as $key => $value) {
if (isset($links[$key]['#title']) && isset($links[$key]['#href'])) {
$title_link = $links[$key]['#title'];
$url = url(drupal_get_path_alias($links[$key]['#href']));
$amp_all_links .= '<li class="menu-item"><a href="' . $url . '">' . $title_link . '</a></li>';
}
}
$prefix_amp_sidebar = '<amp-sidebar id="sidebar" layout="nodisplay" side="right"><a href="#" class="close-thick" on="tap:sidebar.close"></a><ul class="amp-sidebar-menu">';
$suffix_amp_sidebar = '</ul></amp-sidebar>';
$amp_sidebar = $prefix_amp_sidebar . $amp_all_links . $suffix_amp_sidebar;
$vars['amp_sidebar'] = $amp_sidebar;
}
8. Adjust styles and templates
for your subtheme as needed
-
- Further adjust styling and try to make AMP version of the site look as good and engaging as regular non-AMP version
- Note that custom CSS has a maximum size of 50K and that AMP does not allow custom JS
9. Validate pages
-
- Add ?amp#development=1 to a page URL and open browser console to see validation results and/or errors
- Use Google Search console (or other tools) to see stats about valid/invalid pages
- Fix issues (in our case, there were issues with images – they caused validation errors or got removed completely by the AMP library. We had to clean up some old embed images inline styles as well as fix paths to image files in order to fix them)
10. Enable Google Analytics
-
- Make sure you have AMP analytics submodule enabled and Google property ID added in settings
- Note that you may need to adjust some things in order to get your AMP traffic captured properly in Google Analytics reporting. You can find more details here