Overview
In this episode, I explain how to track opens and Subscriber actions of AMP emails with Salesforce Marketing Cloud.
Transcript
Hello and welcome back to mcChat. In this episode, I'll explain how to track AMP emails in Salesforce Marketing Cloud.
Marketing Cloud enables developers to build dynamic and interactive emails with real-time content using the AMP for Email component framework. When you include the Marketing Cloud open tracking code in your AMP email, it's converted to an AMP image component at send-time. However, the same image source URL is used to track both the HTML and the AMP MIME part of emails.
As a result, you won't be able to identify who opened the AMP version of the email versus the HTML version.
However, here's a technique to track opens of AMP emails. If you are already using the amp-list component to retrieve open-time data from a CloudPage code resource, then you can include a server-side function to insert a record into a Data Extension when the email is opened.
But if you're not already using the amp-list component in your email, you'll need to include it. Firstly, create a Data Extension to capture the information you want to track.
Next, use the following code in a CloudPage code resource which returns an empty items array and inserts a record into a Data Extension when the email is opened. Finally, include the following HTML in your email.
When the AMP email is opened, a request is made to the server-side script and a Data Extension record is created with Subscriber and Send related data.
You can also use a similar technique to track email engagement in AMP emails. For example, if a Subscriber adds items to their bag in an email, but doesn't complete the checkout process, then you might want to follow-up with an abandoned checkout email, featuring those items.
To achieve this, you'll need to use the AMP form component to make an XHR request to a code resource page each time the Subscriber adds or removes an item from their bag.
The following code uses the 'on' attribute to install an event handler on the required elements (for example, buttons used to add or remove items). When the event is fired, the setState action updates state variables with the item SKU and bag quantity and submits a form.
And the following code is used to bind state variables (from the event) to hidden input form field values.
When a Subscriber clicks on a button, the form data is posted to a CloudPage code resource, and the following code updates a Data Extension with the bag items.
You can download the code resource file that I’ve used in my two examples here.
Well, thanks for watching and please visit mc.chat for more tips in working with Salesforce Marketing Cloud. See you next time!