AMP is a Google-backed project with the aim of speeding up the delivery of
content through the use of stripped down code known as AMP HTML. Put simply,
AMP is a way to build web pages for static content (pages that donʼt change
based on user behavior), that allows the pages to load (and pre-render in Google
search) much faster than regular HTML. - hallaminternet.com
The focus of the add-on is on listing detail pages which have the most SEO
value to be indexed in search results.
To access features like submitting reviews, favorites, claims, etc. users need to click through to the full version page to be able to use them.
In addition to displaying standard listing information like author, date, summary, description and custom fields, the AMP template also has the following features:
- Social sharing buttons
- A photo slider
- A video slider with video playback
- Related listing widgets
- A static google map
- User and editor reviews
- Several Joomla module and WordPress widget positions that allow you to display ads as well as any other AMP-supported content you want to include on the page
- Optimized Open Graph, Twitter Card and Schema.org markup
The add-on requires using a sitewide AMP solution. When the add-on detects an AMP request for a listing detail page, it takes over the page and uses its own template which can produce much richer results than the standard version of an AMP page.
The supported paid extensions for Joomla are:
The supported plugin for WordPress is free and developed by Automatic, the company behind WordPress:
The Add-on doesn't have an administrative interface or configuration options because they are not needed. Instead it uses the existing JReviews configuration to simplify the setup process.
Read the documentation of the 3rd party AMP solution you choose to get familiarized with the configuration options offered by that solution.
The WordPress AMP plugin doesn't have any configuration options, so many things
need to be implemented through filters directly in your theme's functions.php file. For more information refer to the plugin's documentation.
Once you install the add-on, and one of the above-mentioned required solutions, you can load the detail pages with the /amp at the end of the URL to view the AMP version of the page.
According to Google you should use a separate property to measure AMP traffic. If you use a single property to measure both AMP and non-AMP traffic, use the data source dimension or a custom dimension to distinguish them.
The AMP extensions for Joomla allow you to enable and add your Google Analytics ID directly in the plugin settings.
Edit your WordPress theme's functions.php file to add the necessary filter that will output the Google Analytics tracking code. Replace the account value with your own Google Analytic's account.
add_filter( 'amp_post_template_analytics', function($analytics)
if (! is_array( $analytics ))
$analytics = ;
$analytics['xyz-googleanalytics'] = [
'type' => 'googleanalytics',
'attributes' => [
// 'data-credentials' => 'include',
'config_data' => [
'vars' => [
'account' => "UA-XXXXX-Y"
'triggers' => [
'trackPageview' => [
'on' => 'visible',
'request' => 'pageview',
For more information refer to the WordPress AMP Plugin Documentation
If you use MapsPro, the add-on can display Google Static Maps on the AMP listing detail pages. If you set a referrer restriction for the Google Maps browser API key, then you also need to allow the ampproject.org domain the allowed referrers list so the maps work when accessed through the Google AMP Cache.
Validating AMP Pages
AMP pages come with a built-in tool to validate your pages. Just append #development=1 to the end of any AMP page and open the Chrome Dev Tools console to check for validation errors.
Alternatively you can use the AMP online validator which can give you more specific information about any errors found on the page.
To validate structured data, use the rich results testing tool
If you want to customize the output of the AMP listing detail pages you can do it through the theme file and custom CSS.
Inserting Ads & Banners
The AMP version of the detail page has several positions available to insert ads, banners, or other information external to the detail page itself.
Ads in AMP require a different format than what you would normally use in your site. AMP supports a large number of Ad networks. You can refer to the AMP documentation to check the format needed for the network you use.
For Adsense you can create a responsive ad in your Adsense account, and then use the ad's slot number and your client id in the following format:
Joomla Module Positions
When creating a new module in Joomla you can use any of the following module positions on your AMP detail page.
When creating a widget in WordPress you have access to similar positions as in Joomla, but they are easily selectable from the WordPress widgets interface so you can just assign your Widget to one of the existing JReviews AMP positions.
AMP Listing Detail Page
All the same rules that apply to JReviews theme file customization also apply to the Add-on. You will find the theme files inside the Add-ons' amp theme folder.
/listings/detail.amp.thtml template includes other smaller templates that can be found in the
/elements folder. The related listings output uses
You can have different suffixed templates for different layouts. Copy the templates you want to customize to your overrides theme and add the suffix before the
For example if you want to create a different layout for the hotels category with a
_hotels suffix, name it
The location of the templates in overrides is the same as for the non-AMP template:
In WordPress create the folder in the root of the site
A helper method
AmpComponent::isAmpRequest() is available to detect if the current page is an AMP request.
To hide the output of a custom field only in AMP pages you can use the PHP formatting setting of the field and use the following code:
The total size of custom CSS styles in an AMP page cannot exceed 50 kilobytes so it's important keep your custom style overrides nice and short.
For this reason, the CSS customizations should be kept separate and require creating a separate amp-specific file named
Like with JReviews CSS customizations you create this empty file inside your custom theme's
In WordPress create the folder in the root of the site
When the Joomla configuration cache is enabled, the cached version of the AMP page does not always work correctly. This happens because the Joomla configuration cache doesn't cache the entire page. Instead it caches individual parts of the page like module and component output. This prevents the JReviews content plugin from executing and loading the necessary assets for the page.
The solution is to use the Joomla Cache Plugin which caches the entire page, and renders it exactly as it did on the first page load before being cached.