The Third Bear
In order to get approved for AMP, you’ll need to demonstrate that you’ve implemented it correctly with a production-ready sample mailing that you’ll send in to Google and others for review.
That means you’ll need a mailing with your real branding, real content, and at least one real working AMP feature.
ActionKit provides some helpful starting points: an email wrapper with AMP support that comes pre-loaded in your ActionKit instance, and sample code for an AMP email that sends a specific survey and collects responses. However, you’ll need to modify both of these to get to a production-ready sample that’s ready to submit for review.
Below, we’ll walk through all of the steps with painstaking levels of detail. But if you don’t find this as enthralling as we do, just skip to the bottom for a free and simple tool we built that will do it all for you.
Branding the email wrapper
First, let’s look at the email wrapper. To find it, go to your ActionKit admin interface → mailings → email wrappers and look for the one called “AMP Template with Sidebar.”
At minimum, you should add your organization’s logo in the header. With the built-in email wrapper, you can do this with a custom email wrapper fields: just scroll down to the bottom of the page, click “Add another custom field to add”, and look for the one called “Header logo.” Select that and then upload your organization’s logo in the field.
You’ll then end up with an email wrapper that looks something like this:
…which is probably not what you’re going for.
Fixing the logo dimensions
The problem is that ActionKit’s email wrapper has hardcoded image dimensions which probably don’t match your logo’s aspect ratio.
That’s because in AMP — unlike standard HTML — all images need to have a hardcoded width and height attributes to ensure a smoother and faster loading experience for recipients. By specifying these dimensions, the layout of the email remains stable and avoids disruptive content shifts when images load. That results in a more consistent and visually pleasing email for users, especially on mobile devices with less bandwidth.
To fix that, you’ll need to look up the actual dimensions of your logo image, and then edit the AMP Template to use an aspect ratio that matches those dimensions. Specifically, search for the numbers 168, 37, 107, and 24 in the HTML code, and adjust each of those numbers to match your logo’s aspect ratio. (There are six edits needed in total.)
After making that edit, you should end up with an AMP template that looks better:
Embedding a petition
Now you’re ready to move on to the body of your email, where we’ll put in some real content from your organization and illustrate the use of an AMP feature.
Embedding one of your ActionKit forms is a good place to start with AMP. But if you use a page that’s set up to require a lot of user information like name and address, then you’ll need to include those fields in your AMP email’s form — otherwise some of your members won’t be able to submit it.
So for simplicity, we recommend choosing a page that doesn’t require a lot of user inputs.
If you have an evergreen signup form or a current petition that only asks for the user’s email address, pick that.
ActionKit provides some example content for an embedded form as an illustration, but if you use that as a starting point you’ll need to edit some URLs and replace the content of their form. You may find it simpler to start from scratch. Here’s the bare minimum you should include in the “AMP Body” portion of a new draft mailing:
<form method="post" action-xhr="https://act.thirdbearsolutions.com/act/">
<input type="hidden" name="page" value="your-page-name">
<input type="hidden" name="email" value="{{ user.email }}">
<input type="hidden" name="response_type" value="json">
<input type="hidden" name="source" value="mailing">
<input type="hidden" name="mailing_id" value="{{ mailing_id }}">
<p>
Some intro text explaining what the petition is about.
</p>
<input type="submit" value="Submit">
<div submit-success>
<template type="amp-mustache">
Thank you!
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Something went wrong -- reply to this email for help!
</template>
</div>
</form>
Just replace “act.thirdbearsolutions.com” with your ActionKit domain; replace “your-page-name” with your petition’s short name; and grab a bit of intro text from your page to insert into the “Some intro text” paragraph.
This might be a little boring, but it should be a good enough sample to get you through the AMP review process.
“This seems complicated!”
We can help!
We’ve published a free tool that automates everything described above — all you need is a logo and a petition.
Visit https://www.thirdbearsolutions.com/resources/actionkit-amp to use this free tool.