AMP Email is a new technology to allow interactive elements in an email message. A user doesn’t need to click a link in that email and open a webpage to view the rich content, instead an AMP email is capable of running dynamic content inside the email.
AMP Email also called Dynamic email is recently introduced by Google. Currently it is only supported by few providers including Gmail, Yahoo, Outlook and Mail.ru. However, it is slowly pushing the boundaries forward. With the big players already supporting AMP technology in emails, soon it will be adopted everywhere.
Here I will explain how we can implement AMP email within a Ruby on Rails application and allow users to receive dynamic content within email messages.
Prerequisites
To work with AMP emails, I assume you already have a working Ruby on Rails application hosted publicly and you can access your application by typing its domain name. As testing AMP email requires passing your domain with DKIM and SPF authentication, you cannot test from localhost. Hence, domain setup and working application is necessary.
If you don’t have a working Ruby on Rails application, I suggest you to create a rails application first and deploy your application to a server or Heroku. Once, your application is deployed and you can access it from a domain or sub-domain, you are ready to implement AMP emails.
You also need a Gmail account and dynamic emails settings turned on. In the gmail settings, you need to go to Developer settings and add your domain to receive dynamic emails.
Step 1 — Configure application to send emails
If you don’t have emails configured in your application, then you need to configure email settings first, so your application is able to send emails. You can use API from any email automation service such as — Sendgrid, Mailgun, Mailjet, Mailchimp etc. to configure email settings. Most of the services also have a free account, so you can test emails from your application. You can find a gem for each service and can configure email settings installing that gem. For eg. — You can install this gem provided by Mailjet and use its service in your application.
Step 2 — Verify DKIM and SPF Authentication Settings
Once you are able to test emails sending out correctly from your application, you need to verify domain authentication with both SPF and DKIM pass. AMP Email has strict requirements, so you cannot ignore this step.
Above, I have a screen from Mailjet, which shows the SPF and DKIM authentication page, currently not validated. Both settings need to pass for AMP email. Remember, your-domain.com is a fake domain I used to mask my actual domain above.
Now you need to add both TXT records as shown above in your DNS zone editor file. Following is a screenshot of my DNS records file, which shows the TXT records for SPF and DKIM verification:
It might take few minutes to propagate DNS changes. After that you can go back to your email service provider and click Refresh button to verify Domain Authentication. Below is a screenshot from Mailjet after passing authentication:
With this step finished, let’s move ahead to next step for adding feature to support AMP email in the application.
Step 3 — Add Mime Type
To support AMP emails in Ruby on Rails application, we need to add Mime Type to rails initializers. Open config/initializers/mime_types.rb file and add text/x-amp-html mime type to the file. The file should look like this:
Step 4— Create a Mailer in your application
In the terminal, change directory to your project and create a simple Amp mailer with following commands:
$> rails g mailer AmpThis will create a mailer a file inside at app/mailers/amp_mailer.rb. It will also create mailer view files and test/spec files if you haven’t skip test files.
Let’s add a method to app/mailers/amp_mailer.rb file as follow:
Now inside your app/views/amp_mailer folder, we need to add three files.
- test_email.amp.erb
- test_email.html.erb
- test_email.text.erb
We will also add test content to all three files:
Notice the content of test_email.amp.erb, we have used amp tags. You can go to AMP website to learn more about AMP tags and test more AMP elements in the mailer view.
Now we have our mailer ready, we need a link to click and send an AMP email.
Step 5— Add Interface for sending emails
Let’s add a link to send an AMP email. You can add a button to any view file in your application. To make it simple, let’s add a button at the top of the homepage. Don’t worry, we will remove that button and all the test code once we successfully verify that AMP email is working. So, open your application’s index page view file and add following code to it:
<%= link_to 'Send Test Email', test_email_path, remote: true %>Now we need to add test_email route. Open config/routes.rb file and let’s add a route entry to test email.
match '/test_email', to: 'amp#test_email', via: :getThis creates a route path named test_email_path which will point to AmpController’s test_email action. Which means, now we have to create a controller file named AmpController. Again, once everything is tested, you can remove AmpController and use your existing controller actions to send emails. In the terminal, type following code to generate AmpController:
$> rails g controller Amp --no-helper --no-assetsThis will generate AmpController and skip helper and assets files. Now we have to add test_email action to AmpController and add code to deliver email. Here is the controller file with test_email action:
Also let’s add a view file as app/views/static/test_email.js.erb. We will add a simple alert message to the js.erb file to notify that email has been sent.
Step 6 — Final configurations
As the final steps, we need to make a small change in ApplicationMailer.
The email should be sent from your domain. Also :parts_order is necessary to set like shown above, so ‘text/html’ part is set at the end. Some email clients like Mail, Outlook will display last email piece by default. If this is not set, then ‘text/x-amp-html’ will stay at the end and those email clients may display amp tags in the output. You can find more information about order here.
Step 7— Testing
Once the changes are done, you need to deploy the changes to the server. Once deployed, reload the application. You should see the Send Test Email button on the home page. Clicking the link should send email to your gmail inbox. Open gmail in a browser should display Amp email correctly. If you open the same email in Mail / Outlook client (mobile or computer), it should display the HTML version of the email.
All right, that’s it! We have successfully configured AMP emails using Ruby on Rails ActionMailer. Now it’s time to remove test files and code if you want, or you can modify to perform real implementation of AMP emails.
Next steps
Once you have working application with AMP emails, now you can dig more into AMP tags and features and test more. Gmail’s AMP Playground is a good place to test your AMP tags. You can also test AMP email here.
Once you are ready to send AMP emails to real customers, you need to register with Google. You can find more information about it here.
Cheers!!