how to hack amp for lead generation and fast mobile sites

in AMP, Search Engine Optimization

Accelerated Mobile Pages (Google AMP) Hack to Add Lead Capture Forms

Update 5/15/2017: Refer to my new post about how to implement forms in AMP.

I’ve been working a lot with Google’s Accelerated Mobile Pages (AMP) Project as of late. The platform has a lot of restriction and doesn’t permit things such as third-party JavaScript and html form tags (so, lead-capture forms aren’t supposed to be possible within the AMP framework), but there is a weird workaround…

iframes ARE supported within amp-html, and they can include third party JavaScripts, form tags (useful for lead capture or a comment system like Disqus), and even produce pop-ups.

To do this, you need to add the amp-iframe extended component to your <head>:

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

And then add an amp-iframe tag in your body. It must be at least 600px or 75% of the first viewport away from the top. The URL in the iframe has to be an https url and must not be on the same domain (or at least subdomain).

In order to add some magic and enable things such as pop-up functionality, you will have to add some values to the sandbox attribute of amp-iframe.

For example:

You may want to add sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms".

This would allow you to include lead capture forms and pop-ups to your amp-html page.

Available values for the sandbox attribute (within HTML5):

Value Description
allow-forms Re-enables form submission
allow-pointer-lock Re-enables APIs
allow-popups Re-enables popups
allow-same-origin Allows the iframe content to be treated as being from the same
origin
allow-scripts Re-enables scripts
allow-top-navigation Allows the iframe content to navigate its top-level browsing context

Table Source: W3Schools

That’s it. The iframe is loaded asynchronously, but it should work as long as the project permits it.

Thanks to Conrad O’Connell for helping me prove this would actually work.

Update: It’s Google approved!

Source:

Coming Soon…

Update 10/31/2016

Forms are now supported using the amp-form extension. Like other AMP extensions, you will need to include another JavaScript file in the head of your AMP page: <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>. For more information, reference the documentation

Update 5/15/2017

Refer to my new post about how to implement forms in AMP.

Write a Comment

Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Hey Paul,

    It’s a really useful tip! I think as a non-tech guy I started to understand the technical side of AMP. I did research on this topic and put together a detailed guide on Google AMP. I also used this article as a resource (check it out here: http://blog.momentum.ai/google-accelerated-mobile-pages)

    Honestly, I didn’t fall in love with AMP, because I don’t want to say goodbye to my tracking tools. Even it’s the price of speed.

  2. What if AMP is being used for a website that takes in sensitive information over forms? Say the Banking/Finance/Medical businesses?
    Will this information go to Google servers before it goes to the company, since AMP will be cached?