Faster landing pages typically lead to more conversions and AMP is a great way to create attractive Google Ads landing pages that load more quickly. amp.dev provides web developers with resources they need to create attractive, high performing pages. This step-by-step guide describes how to use Google Ads and other advertising technology in your AMP pages.
Step 1: Create and validate AMP pages
Create AMP pages
To learn how to create a basic AMP page, start with the AMP Project's Create your first AMP page tutorial. For more hands-on, step-by-step guidance, complete the Convert HTML to AMP and Add advanced AMP features tutorials. You can find sample code and templates of AMP components at AMP Websites Examples and AMP Templates.
The list below describes some components used on AMP pages—refer to the complete list of components for reference.
- amp-bind: Add custom stateful interactivity based on JavaScript-like events.
- amp-form: Create landing pages that require input from the user.
- amp-list: Fetch content dynamically from a CORS JSON endpoint.
- amp-carousel: Image carousel for scrolling an image gallery.
- amp-lightbox: Display full-screen view of a component when it's been interacted with.
- amp-call-tracking Dynamically replaces a phone number in a hyperlink for call tracking.
- amp-mustache: Allows rendering with Mustache.js.
- amp-date-picker: Provides a widget to select dates. The date picker can render as an overlay relative to input fields, or as a static calendar widget.
Validate AMP pages
During development you'll want to make sure your AMP pages are valid. AMP offers several different methods 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.
You can also use AMPBench, which is an open source web application and service to validate as well as debug issues around deployment of AMP pages.
For support with AMP testing, visit the AMP Project's Getting Support page.
Step 2: Set up AMP for conversion tracking and analytics
Google Ads conversion tracking
Use the amp-analytics component to track Google Ads conversions. Follow the steps in Set up Google Ads conversion measurement for AMP landing pages to learn how to set this up.
Google Analytics
Google Analytics is one of the supported analytics solutions by amp-analytics. To enable sessions to be unified across AMP and non-AMP pages, follow the steps in Set up Google Analytics session unification for AMP.
Google Tag Manager
The amp-analytics component has built-in support for Google Tag Manager. In addition to Google Ads conversions, you can use Google Tag Manager to add remarketing, DoubleClick Floodlight, Google Universal Analytics, and similar measurement products. Refer to the full list of compatible tags.
Adobe Analytics (formerly known as Omniture)
Adobe Analytics offers two methods for implementing their website performance
tracking solution with
amp-analytics
component: iframe (adobeanalytics_nativeConfig) and non-iframe
(adobeanalytics) implementation. Read about the pros/cons and implementation
details of each
approach.
Integrating other common Google Ads-related technologies
You can use the amp-analytics component to track user actions and events. AMP analytics comes with native support from over 40 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; for details, refer to the variable substitution documentation.
Step 3: Enable AMP serving in the Google Ads UI
While AMP pages in Google Search are auto-discovered via the link from your pages, advertisers must explicitly input the AMP page URL in Google Ads. Read How to Use AMP with Google Ads for details on setting up AMP URLs in Google Ads UI.
Cache serving is currently available for text ads on Google search results pages served on most major browsers including Android Chrome, Android Google Search App, and Mobile Safari. We are rolling out more coverage throughout the coming months.
If you'd like to test how an AMP page appears when delivered from the Google AMP cache inside the Google Search Viewer, input your AMP article in the Search AMP test tool and click Preview link.
Also, if you'd like to drive Google Ads traffic to your AMP landing page but
don't want them to appear in organic search results, add Disallow directives for
the relevant AMP pages to your robots.txt as you would for any regular web
page.
Updating AMP content on landing pages
When a user requests an AMP document from the Google AMP Cache, the cache automatically requests updates in order to be able to serve fresh content for the next user once the content has been cached. With this model, updates to AMP documents propagate automatically and quickly; few users will notice the non-updated version after your update. Additionally, if needed, the update-cache API can be used to update or remove content from the AMP cache.
The AMP project is adding new functionality and components every day. If you find functionality that's missing, you can contribute or request it to be added by opening a GitHub issue.
Invalid AMP page handling
When a page turns invalid, the AMP Cache would discover that within the span of a few requests and start redirecting to the AMP page served origin. It can take 1 to 2 days to revert to AMP cache serving.