Using AMP for your AdWords Landing Pages

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.

For more hands-on, step-by-step guidance, follow the AMP foundations and AMP advanced concepts code labs.

You can find sample code and demos of AMP components at AMP by example or at AMP Start.

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-bind: Add custom stateful interactivity based on JavaScript-like events.
  • 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:

  • Localization at runtime, based on the customer settings or location.
  • Experiments or A/B testing from third parties using JavaScript. There is a native amp-experiment component, but it doesn't yet integrate with other companies.

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.

Configuring AMP landing pages with AdWords

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 HTML and JavaScript. But AMP doesn't allow for the inclusion of "raw" JS. Therefore, you can implement these tags by simply using the amp-analytics component with type=googleadwords. The amp-analytics component for Google AdWords has built-in support for both "googleadwords"."conversion tracking" and "goodadwords"."remarketing" attribute sets.

To use the amp-analytics component start by including the required script in the header of your page then configure the amp-analytics AdWords conversion in the page.

AdWords Conversion Tracking Example

To implement AdWords conversion tracking start by creating a website conversion in the AdWords user interface or via the AdWords API. A number of fields from the generated tag must be used in the variables of the amp-analytics configuration. The mapping of variable names is below:

AMP Analytics variable AdWords Conversion variable
googleConversionId google_conversion_id
googleConversionLanguage google_conversion_language
googleConversionFormat google_conversion_format
googleConversionLabel google_conversion_label
googleRemarketingOnly google_remarketing_only

These fields should then be configured via your amp-analytics component script vars section.

<amp-analytics type="googleadwords">
  <script type="application/json">
  {
    "triggers": {
      "onVisible": {
        "on": "visible",
        "request": "conversion"
      }
    },
    "vars": {
      "googleConversionId": "000000000",
      "googleConversionLanguage": "en",
      "googleConversionFormat": "3",
      "googleConversionLabel": "sampleLabel",
      "googleRemarketingOnly": "false"
    }
  }
  </script>
</amp-analytics>

In this example the amp-analytics component is triggered by the 'page visible' event. The conversion could alternatively be configured to be fired by a different event like a button click. Note that in the case of the conversion tracking example above the remarketing only flag is set to false.

AdWords Remarketing Example

AdWords also uses a type of conversion tag for remarketing, for more details refer to the AdWords remarketing documentation. As with the conversion tracking example above a number of variables must be mapped from the AdWords remarketing tag to the amp-analytics tag.

<amp-analytics type="googleadwords">
  <script type="application/json">
  {
    "triggers": {
      "onVisible": {
        "on": "visible",
        "request": "remarketing"
      }
    },
    "vars": {
      "googleConversionId": "000000000",
      "googleRemarketingOnly": "true"
    }
  }
  </script>
</amp-analytics>

In the above example only the google conversion ID and remarketing only flag must be set, with the remarketing only flag set to true in this instance.

AMP pages from organic vs paid Google Search results

AMP pages in Google Search are auto-discovered via the link from your pages but advertisers must explicitly input the AMP page URL in AdWords. In both cases, Google tries to serve the page from the Google AMP cache, as often as possible but in rare occasions may fallback to serving from the origin server.

If you'd like to test how an AMP page appears when delivered from the Google cache inside the Google Search Viewer, input your AMP article in the Structured Data Testing Tool and click the Preview link.

Also, If you'd like to drive AdWords traffic to your AMP landing page but don't want it 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 Analytics

Google Analytics is supported by amp-analytics. For more information about tracking AdWords traffic, see the best practices for setting up Google Analytics.

If you are using Google Analytics already,you might need to update the tag on your pages. To ensure that Google Analytics reporting works correctly with AMP please refer to Google Analytics documentation.

Google Tag Manager

The amp-analytics component also has built in support for 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 article.
      • 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.

Support for Cache Serving

Cache serving is currently available for text ads on Google search results page (excluding Dynamic Search Ads) served on Android Chrome. We are rolling out more coverage throughout the coming months. In addition, cache serving is currently only available for ads that do not redirect clicks through click-tracking technologies. Again, we are working to make this compatible with all click tracking technology providers in the coming months.

Website Call Conversion Tracking Not Supported

Currently, if you use phone call conversion tracking from your website, those conversions will not be reported.

Invalid AMP Page Handling

If the AMP page on your web server becomes invalid, the Google AMP cache will continue to host a stale version of the page which is the same as the last valid version of the AMP page on your web server. This stale cached version of the page would be delivered to the user for 1 to 2 days after which clicks will be directed to the invalid AMP page on your web server.

Updating AMP Content on your Landing Pages

If your AMP page has content that updates frequently (e.g. item prices) and you’d like the Google AMP cache to reflect the latest changes to your AMP pages, please see options to use the update-cache or update-ping request.