Table of Contents

 

Overview

https://www.ampproject.org/

The Accelerated Mobile Pages (AMP) Project is an open source initiative, initiated by Google, and is meant to help make web pages faster and easier to use for end users on mobile devices.

Essentially, in specific platforms (such as, in Google’s search results on mobile), the browser will look for a fast AMP link in the source code of the webpage and, if found, will redirect to that faster version of the page, which is cached on Google's own servers. This faster page is much more convenient and friendly to mobile users.

This technology is specific to your sites own content and will not cache third party or integrated content.


NOTE: This is new technology, in its infancy, and the implementation of multiple elements are planned in stages that will occur frequently as will this support document.


NOTE: AMP does not support HTML style coding. If your asset has HTML code for a video, or style such as Italics, Color, Bold, etc. the Asset will not be AMP compatible. TownNews.com has built in some support for HTML code to be stripped out when AMP is enabled on the Asset.


NOTE: For more information on AMP, check out the AMP Project Site FAQ.


Participation

Participating in the AMP project is optional. Media sites who do not want to participate simply do not need to enable it (it is not enabled by default).

AMP and other external mobile platforms are still in the very early stages and TownNews.com has not yet defined any specific Best Practice recommendations for their implementation. However, we do know of a few pros and cons which you may want to consider while making the decision to participate:

PROS

  • Due to increase in speed, users will likely look at more pages, creating more ad impressions and generating more revenue for the media site.
  • Sites who are participating in AMP will be featured on a rotating carousel at the top of some AMP search pages. They are also utilized in some native apps (like Google's native app). There may be other places where AMP is used in the future.
  • AMP pages are very user friendly to mobile users and are likely to increase mobile traffic.

CONS

  • Since the AMP pages are geared toward smartphones, there are likely to be fewer ad spots.
  • All code is vetted and incorporated into libraries hosted at Google, and there are likely to be third-party vendors, scripts, or ad networks that are not supported.
  • Although Google has just released a subscription and metering capability as part of the AMP platform, it is not yet available in TownNews.com's implementation. If you are a hard paywall site, you may not want to participate at this time.

NOTE: AMP is only available on our Flex templates.


NOTE: To use AMP, in addition to the Implementation Steps below, you must add the custom property Name = google_amp | Value = on in your Site Settings (go to Settings / Site and click on Custom Properties then on Add.


NOTE: AMP is now supported in Google Tag Manager (GTM). To set that up, in Settings / Site, add the Custom Property - Name = google_tagmanager_amp | Value = Your GTM ID (Container ID). You will need to create a New Container for AMP specifically. Setting up GTM for AMP in BLOX CMS will disable all other Trackers for your site. For more information, Click here.


Content Filtering

In an effort to increase the number of AMP pages indexed by Google, Body Copy is filtered. Content Filtering will remove the following that is applied using the Text Editor:

  • Underline
  • Align Left
  • Align Right
  • Align Center
  • Blockquotes

Bold, italics, and heading fonts will remain. This change will cover all users who are only using the standard features built into the text editor.

Google Maps API Key

For AMP sites and Secure (HTTPS) sites, in order for a Google Map to be supported, Google requires a Google Map API Browser Key. To obtain a Google Map API Browser Key for your site, (Click Here). To add that API Key to BloxCMS, (Click Here).


NOTE: If you are a new site switching to Flex and want this, you can also ask your Project Manager for assistance in setting this up.


NOTE: While the Requirement is now enforced, sites not using this will see a warning message.  There will not be an announcement when legacy support finally ends and those sites not updated to this requirement will lose the functionality of Google Maps.


NOTE: A Google Map API Browser Key is required to use AMP. To get set up with a Google Map API Browser KeyClick Here.


Asset Types

At this time only Article Assets are supported. Only Article Assets which have a Related Child Image Asset will be converted to AMP-compatible. This is a requirement from Google. Many publishers in the industry are working to ensure that all of their top news has some kind of image (even a file or relevant stock image) for this reason.

The following Asset Types are supported as long as they are related as a child or sibiling to an Article Asset:

Related Content Breakout BoxesChild/Sibling Assets
BioAudio
CorrectionFlash
FactHTML
HighlightsLink
InfoPDF
QuestionPoll
QuoteTable
ReferVideo
UpdateYouTube
 Zip
 Collection

NOTE: AMP does not support the standard display for most Child Assets. All assets with exception to Audio and Zip will be displayed similar to Parent View (compact summary card).


NOTE: If you pull the Related Assets into the Article Asset as a Child Asset, they will appear inline but only as a Link using the Title of the Related Asset and it will open in the same browser window.


NOTE: Video Assets, including remote videos, are supported by AMP but Related Assets to a Video Asset are not.


A Video Asset will show the Author and Flags at the top left under the Title and Keywords will be on the bottom left below the Caption. If you have an image using the Mugshot Presentation, the image will be displayed above the Article. It will be 320px tall and center aligned. Best Practice would be to use a vertical image.

Ad Networks

Because integration with third-parties is very strict, the only Ad Networks that are available are OAS and Google DFP. Ad Manager is not yet compatible (though we are investigating ways to make it available).

Implementation

TownNews.com’s integration with Google’s AMP technology makes setup extremely easy! Essentially, the administrator of the media site just has to fill out some URL property fields, and then wait for Google to index their site. Enabling AMP is way to make your site content more mobile friendly.

To enable AMP, log into your BLOX CMS Admin. In the upper left corner, go to Design / Blocks and open the Root URL for your site. Under Page Customizations, expand Alternative Mobile Platforms.

+2 
GoogleAMP_PageCustomizations.jpg

AMP - (Required) This property will enable Google Accelerated Pages integration and will serve AMP-ready pages when appropriate on all relevant content (the default is that AMP pages are not enabled).

AMP Header Logo - This option is required by Google and configures a default site logo which is shown in the header of AMP pages. Click on Set Image to Browse your network or computer to set the image. Image size of 300 x 30 pixels is required.

AMP Footer Logo - This option is available so you can position a logo in the Footer section on AMP Pages. Click on Set Image to Browse your network or computer to set the image. Image size of 300 x 30 pixels is required.

AMP Publisher Logo - (Required) Google requires a Publisher's Logo for their site that is exactly 300 x 30 pixels. Whatever image you set here will be applied as your Header, Footer, or Publisher Logo. If you have a Site Header, which is a separate field so that sites can differentiate them, if desired. If the logo is not 300 x 30 pixels, Google will not index your site. A maximum image size for this logo is 600 x 60.

AMP Terms of Use - (Required) This option will create a Terms of Use link in the footer. You can use your current site Terms of Use but the URL must be entered into this field.

AMP Privacy Policy - (Required) This option will create a Privacy Policy link in the footer.

AMP Paid Recommendation- This option gives you four possible settings. This option does not affect Outbrain content on your site. This is specific to the AMP content.

  • Both Widgets - This uses both Content from your site and sponsored content.
  • Include Only Content From This Site - Utilizes the widget to pull content from your site.
  • Include Only Sponsored Content - Utilizes the widget to pull in sponsored content.
  • Disabled - Will not display any additional content.

NOTE: For Terms of Use and Privacy Policy, these are written by the site and the URL from the location of them is entered into these fields respectively.


NOTE: AMP will automatically use the Google Analytics account set up in Statistics / Analytics. If your site has implemented custom analytics, you may need to add some custom code to your AMP pages as well (using the opt points below).


NOTE: A Google Map API Browser Key is required to use AMP. To get set up with a Google Map API Browser Key, Click Here.


AMP Navigation Sidebar - This property defines the URL's that are displayed in the navigation on AMP pages.

  • Show all top-level and sub-URL's
  • Show only top-level URL's
  • Disabled

AMP Flying Carpet Ad - By enabling this option, BLOX will turn the fixed-big-ad-top or fixed-big-ad-top-asset Ad Positions into a flying carpet parallax ad spot with a mandatory size of 300 x 600 pixels. Please make sure your DFP ad unit is configured to show only 300 (Height) x 600 (Width) pixels size ads in this position.

AMP Sticky Ad - By enabling this option, BLOX will include a sticky banner ad across the bottom of the page on 100% of the pages in this section. Please make sure your DFP ad unit is configured to show only 320 x 50 pixels size ads in this position. The AMP specific ad region name is fixed-amp-sticky.

AMP Google Tag Manager ID - This property defines an AMP Google Tag Manager ID. By enabling this option, BLOX doesn't add the Google Analytics code to AMP template pages.

Third Party Analytics Support

There are three third party Analytic vendors that are supported. To integrate them, go to Page Customizations/Third-Party Integration and enter the appropriate values.

  • Name = chartbeat | Value = 12345
  • Name = comScore_2 | Value = 12345
  • Name = QuantCast | Value = 12345

UTL & CSS Customizations

 The AMP pages will have four "opt" points. Currently, the following is available.

  • amp_headBottom() - Just above the closing head tag.
  • amp_footerTop() - Just below the opening footer tag.
  • amp_footerBottom() - Just above the closing footer tag.
  • amp_customCssOverwrites() - Add this macro to your site component, containing your custom CSS.

NOTE: AMP templates are iterating very quickly as new updates are made by both Google and TownNews.com. Please make the minimum number of changes possible to ensure compatibility going forward.


Frequently Asked Questions

How long has AMP been available?

  • AMP was developed and launched in the Spring of 2016. TownNews.com is releaseing software updates in order to offer support. The software, functionality, and this document Will Change as more of the AMP technology is implemented. TownNews.com first software release is June 14, 2016.

Are Inline Related Assets on Articles supported in AMP?

  • Yes.  The Article Designer Tools that allow you to further customize and style or modify the layout look of an Article asset will work for AMP articles.

What is a Carousel?

  • A Carousel on a mobile device is the equaivalent to a Newsbox on a computer when using Google Search. The Carousel will have navigation functionality so you can swipe thru it.

How can I validate if my content is AMP compliant?

  • Validation of content using AMP is done with Google Web Tools. This should already be set up. If not, click here.

Are the Analytics available for AMP content?

  • Analytics are provided but they are only available using Google Analytics.

How long does it take for my AMP content to appear in mobile browsers?

  • Your site is indexed by Google (and other sources) on a daily basis. Indexing can take up to 18 hours depending the amount of content on your site. Once your site is indexed, the cached content is stored on Google's servers. When the content is called by a user, it is delivered instantly in real-time.

How can I see what my content will look like once it is converted to AMP?

  • If you enable AMP, you can add ".amp" at the end of the URL in your browser at the end before ".html" to see the AMP version of the page. An example would be http://www.example.com/article-content-id=abcd1234.amp.html.
  • When you look at the Article Asset in the AMP Version, a link will appear at the bottom of the Content that says, "View on your-site.com."
+2 
GoogleAMP_LinkRelCodeFront

How can I tell if Article Asset is AMP ready?

  • If your site is enabled for AMP, you can right click on an Article Asset in your browser. Select the option to view the Source Code and find "amphtml" in a link rel="amphtml" tag, with the URL is hyper-referenced (href="url") to that Link Rel. Therefore, that Article Asset was indexed and meets the criteria for AMP and is cached on the Google server(s). Google will reference the Link Rel URL it embeds in the code and serve that version of the content up on Mobile devices.
+2 
GoogleAMP_LinkRelCode

What type of Assets can be Related and what type of Assets can Related Assets be Related to?

  • All Asset Types can be Related but only to an Article Asset. A Video Asset is supported by AMP but not any Related Assets to a Video Asset, (See Asset Types).

How is Related Child Assets displayed on the mobile device using AMP?

  • Content is pulled inline using Article Assets and Child Related Image Assets.

Will my Article Assets be converted to AMP if I use a Paywall?

  • If your site is a 100% Paywall site, do not use AMP. AMP does not support Paywalls at this time and therefore, cannot cache content behind it. This will be made available later.

Does AMP distort PageViews in Google Analytics?

  • PageViews are recorded both on your Site and on AMP pages. If a page that has been viewed on your Site and is also viewed in AMP by a User, BLOX will unify the ClientID and record a single PageView in Google Analytics.

Troubleshooting

  • The AMP Carousel is only available on mobile phones.
  • The carousel only shows up when a search triggers Google’s “news box” card, which does not happen on every search.
  • Remember that only pages with photos will work with AMP, and only Article Assets.
  • Ensure that your site is enabled with Google’s Webmasters Tools. In that application, it will show which articles have errors and which have been correctly indexed as AMP pages. Pages with custom code which is not compatible with AMP may generate an error.
  • You can add .amp before the .html in order to get the front end to “fake” it and see what the individual amp page would look like. For example, www.example.com/news/article_uuid.amp.html.
  • Sometimes an article will not show up as an AMP page (or will show up as an error in Google Webmaster Tools) because there is custom code or CSS attached to the article itself. View the article with Google’s testing tool to see any errors or warnings: https://search.google.com/structured-data/testing-tool/u/0/.