how to hack amp for lead generation and fast mobile sites

in Search Engine Optimization -

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

Read the TL;DR

Show Full Article

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…

You can add forms and other elements to an amp-html page that aren't supposed to be permitted by using the amp-iframe component. Google has said this acceptable usage.

Powered by TLDR

Join the Search Wilderness Newsletter

Get exclusive internet marketing tips not discussed anywhere else! Trust me, it's worth it.

Also, gain access to my new link building tool for FREE!

Drop a Comment or if you prefer, a beat.

Comment

  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.