Display One Tap in AMP pages

  • One Tap is added to AMP pages using an intermediate iframe.

  • The intermediate iframe is embedded using the <amp-onetap-google> component.

  • A script and the <amp-onetap-google> component need to be included in AMP pages to display Google One Tap.

  • The data-src attribute in <amp-onetap-google> points to the intermediate iframe's URI.

To add One Tap to your Accelerated Mobile Pages,

  1. Add One Tap into an intermediate Iframe hosted by your own website.

  2. Embed the intermediate iframe, instead of One Tap, into your AMP pages using the <amp-onetap-google> component.

Place the following code snippet into any AMP pages that you want Google One Tap to display:

<script custom-element="amp-onetap-google" src="https://cdn.ampproject.org/v0/amp-onetap-google-0.1.js" async></script>
<amp-onetap-google
  layout="nodisplay"
  data-src="https://example.com/onetap_iframe.html">
</amp-onetap-google>

Set the data-src attribute to the URI of your intermediate iframe.