tagDiv AMP Plugin Tutorial

The Google AMP project is an open-source initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms.

Discover the new standards on page loading speed and mobile optimization with the tagDiv AMP plugin. We took the Google AMP plugin, tailored it to perfectly integrate with all the features you love in Newspaper theme. Everything is optimized to work seamlessly, enhancing the capabilities of this template to give you a new definition of performance.

This is available starting with the version 8.7 +

How to install the tagDiv AMP plugin

First,  you must access the Newspaper Plugins section, which contains all of the theme’s specific plugins. Then, simply press the Install button for the AMP plugin.

AMP plugin in Newspaper 8.7

AMP settings

After installing the plugin, the Theme Panel will feature a brand new menu at the very bottom of the screen, containing all of the AMP settings provided.

What settings can you make?

Post Type Support:

By default, once you have installed it, the tagDiv AMP plugin becomes active on posts. For pages, you have to activate it by switching ON the option.

AMP Settings Post Type

Important note: The AMP template will only work on pages that do not use any page builder. Only pages that are created using the standard tiny mce editor will be valid AMP pages.

Colors:

In this section, you can select a separate theme accent color for your AMP pages. Also, there are color options for different areas such as menu, footer, subfooter, icons, and text.

 

Ads:

We have also provided an ad section so you can specify different ads for the AMP template. The standard ads placed in the ad spots of the theme ad section will not work on the AMP template. That is why there is a special section destined for AMP ads.

 

There are a total of 5 ads you can place on the AMP template: A header ad, a footer ad, and 3 article ads.

In order to create specific AMP ads, the theme allows AdSense or non-AdSense ads.

For AdSense ads please only use the data-ad-client and the data-ad-slot of your AdSense code like the below example:

  • Step 1: Select the google adsese ad type
  • Step 2: Place the data-ad-client and data-ad-slot in the designated fields
  • Step 3: Select between a fixed and a responsive ad size.

 

For Non AdSense ads, please use the following steps:

  • Step 1: Select the ‘Custom Banner’ ad type
  • Step 2: Place your HTML based ad code in the ‘Custom Ad’ section of the theme panel.

 

Excerpts:

The AMP template also features a Related articles section as the default desktop theme. You can change the title’s length for this section, as in control the number of words you want your titles to display. If you do not want the theme to cut your article titles, you can leave this section empty.

 

Analytics: 

This section allows you to place the AMP analytics code in the template header, that allows you to track user interactions with AMP pages.

For proper functionality of the AMP Analytics code, the following implementation is required:

For more on the JSON configuration supplied for Google Analytics, see Adding Analytics to your AMP pages.

In order to test your site with the plugin and see the results live, you can simply add “/amp” at the end of your URL, as mentioned here.