AMP

Make JReviews lightning fast when loaded in Google mobile search results with automatically generated AMP-optimized versions of listing detail pages.

Overview

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.

The add-on includes comes with an AMP-optimized listing detail template that loads automatically in AMP requests. AMP-rendered listing detail pages are stripped down versions of their desktop counterparts because there are limitations in terms of javascript and CSS that can be loaded on those pages.

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

Requirements

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.

Joomla

The supported paid extensions for Joomla are:

  • jAmp by J!Extensions Store

  • wbAmp by Weeblr

    The paid version is needed to be able to access the API methods.

WordPress

The supported plugin for WordPress is free and developed by Automatic, the company behind WordPress:

  • AMP by Automatic

Getting Started

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.

Google Analytics

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.

Joomla

The AMP extensions for Joomla allow you to enable and add your Google Analytics ID directly in the plugin settings.

WordPress

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 = [];
 	}

	// https://developers.google.com/analytics/devguides/collection/ampanalytics/

 	$analytics['xyz-googleanalytics'] = [
	 	'type' => 'googleanalytics',
	 	'attributes' => [
	 		// 'data-credentials' => 'include',
 		],
		'config_data' => [
			'vars' => [
				'account' => "UA-XXXXX-Y"
			],
			'triggers' => [
				'trackPageview' => [
					'on' => 'visible',
					'request' => 'pageview',
				],
			],
		],
	];
  
  return $analytics;
});

For more information refer to the WordPress AMP Plugin Documentation

Google Maps

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:

<amp-ad
	width=300 
	height=250
	layout="responsive"
	type="adsense"
	data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxx"
	data-ad-slot="xxxxxxxxx">
 </amp-ad>

Joomla Module Positions

When creating a new module in Joomla you can use any of the following module positions on your AMP detail page.

  • jr-amp-page-top
  • jr-amp-page-bottom
  • jr-amp-detail-above-heading
  • jr-amp-detail-below-heading
  • jr-amp-detail-above-fields
  • jr-amp-detail-below-fields
  • jr-amp-detail-above-photos
  • jr-amp-detail-above-videos
  • jr-amp-detail-above-map
  • jr-amp-detail-above-relatedlistings
  • jr-amp-detail-above-user-reviews

WordPress widget positions

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.

Template Customizations

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.

Joomla

components/com_jreviews_addons/amp/views/themes/amp/

WordPress

wp-content/plugins/jreviews_addons/amp/views/themes/amp/

The /listings/detail.amp.thtml template includes other smaller templates that can be found in the /elements folder. The related listings output uses /modules/listings.amp.thtml.

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 .amp extension.

For example if you want to create a different layout for the hotels category with a _hotels suffix, name it detail_hotels.amp.thtml.

The location of the templates in overrides is the same as for the non-AMP template:

Joomla

templates/
`-- jreviews_overrides/
	`-- views/
		`-- themes/
			`-- mysite/
				`-- listings/
                   `-- detail_hotels.amp.thtml

WordPress

In WordPress create the folder in the root of the site

jreviews_overrides/
`-- views/
    `-- themes/
        `-- mysite/
            `-- listings/
               `-- detail_hotels.amp.thtml

Custom Fields

A helper method AmpComponent::isAmpRequest() is available to detect if the current page is an AMP request.

When using the custom fields output format features, you may want, or need, to output something different for the AMP and non-AMP pages. A case in point is when you are using javascript in the output format, that will not work in the AMP version of the page.

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:

if (AmpComponent::isAmpRequest()) 
{
   return false;
}
return $output;

CSS Customizations

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 custom_styles.amp.css.

Like with JReviews CSS customizations you create this empty file inside your custom theme's theme_css folder.

Joomla

templates/
`-- jreviews_overrides/
	`-- views/
		`-- themes/
			`-- mysite/
				`-- theme_css/
					`-- custom_styles.amp.css

WordPress

In WordPress create the folder in the root of the site

jreviews_overrides/
`-- views/
    `-- themes/
        `-- mysite/
            `-- theme_css/
               `-- custom_styles.amp.css

Known Isuses

Joomla Caching

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.