Magento Accelerated Mobile Pages v1.x Developer Guide and API Reference

In this developer documentation for the Magento AMP Extension, you will find step-by-step instructions, sample code, and API references to fully customize your plugin.

Modifying Default AMP CSS

In order to be able to edit styles on your page, go the following directory and choose the required file:

/app/design/frontend/base/default/template/pramp/head/css

This is the list of the files you can edit:

• style.phtml – file of styles included on all the pages.
• product.phtml – file of styles included on product pages.
• category.phtml – file of styles included on category pages.
• index.phtml – file of styles included on main page.

For example, to make additional changes in product page styles, you need to copy the file:

/app/design/frontend/base/default/template/pramp/head/css/product.phtml

Paste it to your theme directory:

/app/design/frontend/YOUR_THEME/default/template/pramp/head/css/product.phtml

Edit the file according to your requirements.

Including Additional AMP JS

Follow the instructions below to include additional AMP java-script on the page.

By default product page includes AMP carousel js.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

In order to include it on other pages, or if you want to add any additional java-scripts e.g. to support iframe, you need to copy the file below:

/app/design/frontend/base/default/template/pramp/head.phtml

Paste it to your theme directory and edit according to your requirements:

/app/design/frontend/YOUR_THEME/default/template/pramp/head.phtml

For example:
1. You can add this code for iframe support:

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

2. If you need to use the AMP carousel on other pages (besides the product pages) – you need to find the following code in the “head.phtml” file:

<?php if (Mage::app()->getFrontController()->getAction()
    ->getFullActionName() == 'catalog_product_view') : ?>
    <script async custom-element="amp-carousel" 
        src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<?php endif; ?>

and replace it with the following:

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Adjusting AMP Iframe Height

At some point you may want to manually change the height of the Magento AMP iframe that contains the custom options on your AMP Product Pages. There are 2 approaches to do so, please see below:

1) Open the file of your theme:

/app/design/frontend/theme_package/theme_name/layout/local.xml

(where the theme_package/theme_name are the package name and theme name of your specific theme)

Then add the following section into the very bottom of the file:

<amp_catalog_product_view>
    <reference name="product.info">
        <action method="setIframeWidth"><number>300</number></action>
        <action method="setIframeHeight"><number>500</number></action>
    </reference>
</amp_catalog_product_view>

Now change the “setIframeHeight” value as you need.

OR

2) Move the file pramp.xml from:

/app/design/frontend/base/default/layout/

into the folder:

/app/design/frontend/theme_package/theme_name/layout/

(where the theme_package/theme_name are the package name and theme name of your specific theme)

Now you can change the height there by adjusting the value of “setIframeHeight”.

We recommend to make the changes based on the #1 approach, this makes more sense if you plan to update the extension in the future.

Changing Image Size on AMP pages

If you need to change image size on AMP pages (that may look distorted if to compare with your desktop images) – please follow the instructions below.

1) In order to change image size of the images on AMP pages, find “<img …/>” tag and add “data-width-amp” and “data-height-amp” attributes, and specify the required values.

Example:
In order to display “image1” with the size 300?400 px, set by the tag

<img src="www.example.com/media/image1.png" title="Image 1" />

Change it to:

<img src="www.example.com/media/image1.png" title="Image 1" data-width-amp="300" data-height-amp="400"/>

2) Additionally, you can set “layout” attribute with “responsive” value. This allows to extend image width proportionally on AMP pages based on a parent container. In this case you can also set max-width for an element or a container in CSS styles.

Example:

<img src="www.example.com/media/image1.png" title="Image 1" data-width-amp="300" data-height-amp="400" layout="responsive"/>

Adding Custom Elements to AMP pages

Here you will find the instructions on how to add custom elements to AMP pages.

You can add any “amp custom-element” to AMP pages (if AMP custom elements haven’t been added to a page by default):

For example, in order to add custom element “amp-accordion” to the product page, you need to go through the following steps:

1) Open the layout file of your theme to edit it.

/app/design/frontend/theme_packege/theme_name/layout/local.xml

In case you do not have this file, you need to create it.
Add the following code to the file:

<?xml version="1.0"?>
<layout version="0.1.0">
</layout>

2) Edit the layout file: add the following code before closing tag “</layout>” :

<amp_catalog_product_view>
    <reference name="ampjs">
        <action method="addJs">
            <src>https://cdn.ampproject.org/v0/amp-accordion-0.1.js</src>
            <type>amp-accordion</type>
        </action>
    </reference>
</amp_catalog_product_view>

3) Copy the template file to your theme.

/app/design/frontend/base/default/template/pramp/catalog/product/view.phtml

4) Modify the template file: add “<amp-accordion>” element code to page according to requirements of ampproject.org.

5) Save layout and template files and clear Magento cache.

6) It is required to check, whether your AMP page is valid using services for AMP pages testing (for example:validator.ampproject.org). If page is not valid – please fix errors per validator indications, and check the page once again. Repeat this action until you get the valid page message.

You can also edit styles for “amp-accordion component”
In order to do this, please, copy the following file into your theme and edit copied file:

/app/design/frontend/base/default/template/pramp/head/css/product.phtml

Once the changes are performed, you need to check pages validation, as described in step 6.

Automated Script to add Data-width-amp & Data-height-amp attributes to AMP images

In some cases there is an issue with images in product texts, categories, static blocks or static pages, while installing Accelerated Mobile Pages Extension. These images do not have the “width” and “height” attributes indicated, therefore in the AMP mode they have amp default values indicated, this may make these images disproportionate.

This script will automatically run through all products, categories, “text” attributes and images to set the correct extension for the images on the AMP pages.

Guide:

Before you proceed – please make sure to read all the steps carefully:

1. Make Magento database backup before running a script.
2. Download the archive here.
3. Extract files from the archive and upload the “amp-image.php” file into Magento root folder.
4. Go to “https://domain.com/amp-image.php” URL (where “domain.com” is the name of your domain) and wait for the script to execute.
5. Once done – please perform the re-index and clear the Magento cache
6. Check if everything is OK. In case there are some issues, restore the database from the backup you did at the beginning of the process.
   

Setting Google AMP Client in the Magento Extension

Plumrocket AMP Pages Extension supports “Google AMP Client ID API“ that allows you to uniquely identify and analyze a user’s experience across AMP and non-AMP content. In order to set up this service – you need to perform the following customizations for both your AMP and non-AMP pages.

Guide:

1. Include the following code in the <head> of all your AMP pages:

<meta name="amp-google-client-id-api" content="googleanalytics">

Beginning from the AMP extension for Magento 1 version 1.4.4 and AMP extension for Magento 2 version 2.2.4 of AMP extension, this step has been already executed. You can check it by inspecting your HTML content of your AMP pages.
If your Plumrocket AMP extension is of the lower version than the aforementioned versions for Magento 1 or Magento 2 – you can add this code by yourself.

In this case copy your theme to the file:

/app/design/frontend/base/default/template/pramp/head.phtml

Open to edit the file, and find this code:

<meta charset="utf-8">

After this, paste the following code:

<meta name="amp-google-client-id-api" content="googleanalytics">

2. This step depends on the type of desktop pages analytics you use.

a. If you use Google Tag Manager – the following steps should be completed on your existing published tag container(s).

1. Navigate to Tag Configuration > Fields to Set.
2. Set useAmpClientId to true.
3. Save the new tag configuration.
4. Submit the tag.
5. Publish the container.

b .If you use .js analytics – include the following in your Analytics tracking code:

ga('create', 'UA-XXXXX-Y', 'auto', {'useAmpClientId': true}