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" and "googleadwords"."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 UI 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 help center. 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 this example, only the Google conversion ID and remarketing-only flag must be set, with the remarketing-only flag set to true.

AdWords call tracking

Phone call tracking is supported for AMP pages to enable conversion tracking in AdWords. To get started, follow the guidance on setting up a call extension for your AdWords account. Once you've created the call conversion, you must extract a number of configuration parameters from the generated code to be used in the AMP tags. This is done either using the Google Tag Manager configuration from the new AdWords experience or the call tracking snippet in the original AdWords experience.

Using Google Tag Manager

To use the conversion fields provided by Google Tag Manager, sign in to your AdWords account and navigate to the measurement conversion account settings. Then, follow these steps:

  1. Click the + to add a new conversion tracker and select the Phone Calls option.
  2. In the dialog, select Clicks on your number on your mobile website and Continue.
  3. Configure the conversion including all relevant fields, then create the tag.
  4. Select the Use Google Tag Manager to review the configuration.
  5. Use the supplied Conversion ID and Conversion Label to configure the AMP call tracker described below.

Using code snippet

AdWords Call Snippet Variable AMP Call Tracking Usage
ak Conversion ID
cl Conversion Label

In this example, the values for ak and cl are 123456789 and _ABcDEFg12hI34567jK respectively.

<script type="text/javascript">
(function(a,e,c,f,g,b,d){var h={ak:"123456789",cl:"_ABcDEFg12hI34567jK"};a[c]=a[c]||function(){(a[c].q=a[c].q||[]).push(arguments)};a[f]||(a[f]=h.ak);b=e.createElement(g);b.async=1;b.src="//www.gstatic.com/wcm/loader.js";d=e.getElementsByTagName(g)[0];d.parentNode.insertBefore(b,d);a._googWcmGet=function(b,d,e){a[c](2,b,h,d,null,new Date,e)}})(window,document,"_googWcmImpl","_googWcmAk","script");
</script>

Configure AMP call tracker

Use the values obtained above in the AMP call tracking configuration URL. As with other AMP modules, it's necessary to add the AMP call tracking module to the header of your page:

<head>
<script async custom-element="amp-call-tracking" src="https://cdn.ampproject.org/v0/amp-call-tracking-0.1.js"></script>
</head>

To enable call conversion tracking, click-to-call links must be decorated with a link to the AdWords call tracking configuration:

<amp-call-tracking config="https://www.googleadservices.com/pagead/conversion/7777777777/wcm?cl=AAAAAAAAAAAAA&tel=1800-123-4567&mode=1" >
  <a href="tel:18001234567">+1-800-123-4567</a>
</amp-call-tracking>

To use this example, replace your Conversion ID (in this example 7777777777) and Conversion Label (in this example AAAAAAAAAAAAA) taken from the conversion tracking code provided during the AdWords conversion setup. Note that the tel URL parameter should match the telephone number in the contained link.

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 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're using Google Analytics already, you might need to update the tag on your pages. To ensure that Google Analytics reporting works correctly with AMP, 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 (adobeanalytics_nativeConfig) method on your new AMP pages, since the non-iframe method will not properly capture session data that spans both 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, 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.

Unsupported website call conversion tracking

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 landing page

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, see the update-cache or update-ping request options.