Faster landing pages typically lead to more conversions, and AMP is a great way to create attractive AdWords landing pages that load more quickly. The AMP Project provides web developers with resources they need to know to create attractive, highly functional pages. This guide describes how to use AdWords and other advertising technology in your AMP pages.
Creating and validating AMP pages
For an overview of creating AMP pages, start with the official AMP project tutorial.
During development you'll want to make sure your AMP pages are valid. AMP offers many different ways to validate your documents. The most common way to validate an AMP page is by using the web validator or the Google Webmaster Tools Validator. You can also use the Chrome browser plugin and developer console, or integrate the amphtml-validator npm module in your build.
And if you need support, there are a number of options available.
Commonly used landing page features in AMP
AMP was originally developed for static content, but it's evolved over time to accommodate more dynamic use cases. The list below describes components that allow you to add dynamic functionality to your AMP pages:
- amp-form: Create landing pages that require input from the user.
- amp-carousel: Create an image carousel with standard controls for scrolling an image gallery.
- amp-lightbox: Display a full-screen view of a component like an image when it's interacted with.
- live-list: Render a live stream of content into the landing page.
- amp-call-tracking Dynamically replaces a phone number in a hyperlink to enable call tracking.
- amp-mustache allows rendering Mustache.js.
When AMP might not be a good fit
Although you can think of an AMP page as just a web page, AMP doesn't support some common web development use cases. Here is some functionality that is not well-suited for AMP:
- Per-request server-side logic.
- Localization at runtime, based on the customer settings or location.
Configuring AMP landing pages with AdWords
Recommended landing page navigation
Although AMP works well for subsequent pages in the user journey, we recommend using a non-AMP landing page if you have complex checkout flows or similar. If you have a case where you’d like to measure a conversion or place a remarketing pixel on the AMP landing page itself, you can use the AMP + AdWords conversion tracking component built into amp-analytics described below.
Conversion tracking and remarketing
Tags for conversion tracking and remarketing are usually given as snippets of
Therefore, you can implement these tags by simply using the amp-analytics
type=googleadwords. The amp-analytics component for Google
AdWords has built-in support for both
"goodadwords"."remarketing" attribute sets.
AMP pages from organic vs paid Google search results
When AMP pages are served as part of Google organic search results, they are typically served from the Google AMP cache or from your server. In contrast, AdWords pages are always delivered from your server.
If you expect your AdWords AMP pages to appear in organic search results, ensure that all AMP functionality works as expected when delivered from the Google AMP cache inside the Google Viewer: input your AMP article in the Structured Data Testing Tool and click Preview link.
If you don't want your new AMP landing pages to appear in organic search results, simply place robot.txt exceptions like you would for any regular web page.
Integrating common AdWords-related technologies
Tracking user actions and events with amp-analytics
You can use AMP analytics to track user actions and events. AMP analytics comes with native support from over 20 analytics vendors. The framework is flexible and allows you to measure and trigger URLs using custom configurations to send analytics information to your own servers or to vendors where native AMP support isn't available. If you're using a technology that isn't currently supported, ask your vendor to add support.
AMP analytics also allows for flexible variable substitution; see the variable substitution documentation for details.
Google Tag Manager
Adobe Analytics (Formerly known as Omniture)
- Adobe Analytics offers two methods for implementing their website performance tracking solution with AMP: iframe (“adobeanalytics_nativeConfig”) and non-iframe (“adobeanalytics”) implementation.
- It's important to make sure that your implementation leverages the iframe
(aka adobeanalytics_nativeConfig) method on your new AMP pages, since the
non-iframe method will not properly capture session data that spans your domain and the AMP cache's domain. Additionally, the non-iframe method can result in inflated visit/visitor counts, and is incompatible with the latest Adobe Marketing Cloud integrations.
- If you opt to use the iframe method, here are instructions on how to implement Adobe Analytics within an AMP page: AMP article.
- If you need to modify your implementation to transition from the
non-iframe to the iframe method, see the AMP
- Switching implementation methods will not affect your ability to access your historical data, but there may be some variance in the data collection, as visitor inflation will be reduced when moving from the non-iframe method to the iframe method of implementation.
- In addition, please be aware that Safari browser limitations may result in some anomalies even when using the iframe method of implementation. These anomalies are surfaced when a visitor using Safari and who has never been to the original domain visits an AMP page for the first time, then later visits the normal (non-AMP) site. In this scenario, the visitor would be counted as two visitors in Analytics, assuming the AMP and the main site are in the same report suite. However, if the visitor had been to publisher.com's main site before visiting the AMP, it will still count as only one visitor in reporting.