This blog explains, how to retrieve the live data from Marketing cloud when opening the Amp for email, submitting AMP for Email form and retrieving the form values.
Scenario:
Most of the times, companies send unique promotional code to everyone, regardless of whether customer is opening the email or not. In this case lots of promo codes gets wasted.
Let's eliminate this scenario, by showing/claiming coupon from SFMC only when customer opens / clicks the link in AMP for email.
Imagine this is a hot promotional campaign with very limited coupons. So, some customers can’t get coupons. In that case we will show them a message that ‘coupons have been claimed by other customers’ while opening the email.
You will get more idea on the Demo Video at last.
Below are the things will be demonstrated :
Displaying live available coupon count at the time of opening the email.
Rendering different text based upon coupon Count.
Once customer clicks on 'Claim Coupon', coupon gets claimed for that respective email address and displaying the claimed unique coupon number in the same email.
Demo Video:
Setup:
Before we jump into the code, let's create the below elements:
Create a sendable data extension, let's call it as 'TestAMP'.
Create a non-sendable data extension to store the coupons. Let's call it as 'AmpCoupon'.
Add some coupon records in 'AmpCoupon'.
Displaying live available coupon count at the time of opening the email:
Create an email with template + AMP Email and select some template.
Go to AMP section and add the below code in email to display available coupon (view code):
Decoding the code:
Line 1 - Add a GTL (Guided Template Language) delimiter. So that JSON from the cloud will be parsed properly.
Line 8,9 - We need to use the below functions/components from AMP:
Line 48 - Replace 'SFMCCloudPageURL' with the cloud page URL which you will be creating shortly. amp-list component will try to get the JSON data from the specified cloud page.
Line 53 - {{coupon}} value will be replaced with total number of available coupons in the 'AmpCoupon' data extension.
Create a cloud page with code resource as JSON and add the below code (view code):
Decoding the code:
Line 61 to 72 - Trying to retrieve 'AmpCoupon' data extension records using WS Proxy retrieve method with condition Claimed = False.
Line 76 - If the length = 0 then setting couponPresent = False else couponPresent = True.
Line 82 to 89 - Forming JSON. 'coupon' attribute will capture the count of rows. 'couponBoolean' will capture if coupon is present or not.
Output:
Rendering different text based upon coupon Count:
Add the below code in AMP Email section to render text differently based upon coupon count (view code):
Decoding the code:
Line 48, replace the 'SFMCCloudPageURL' with the code resource cloud page URL. When amp-list component tries to load the cloud page, it will return a JSON format with List.
Line 53, 55, 57 & 59 - amp-mustache component try to parse the JSON and display the attribute values. If 'couponBoolean' = True then it will display 'claim fast' section. If it's False then it will display 'Sorry all coupons are claimed' section.
Claim Coupon & Display Coupon:
Add the below code in JSON code resource cloud page (view code):
Decoding the code:
Line 61 - Since we are handling both GET & POST request in the same cloud page URL. Checking if it's a POST method when submitting the Form.
Line 64 - Using ClaimRow ampscript function inside SSJS. There is a nice article written on using ampscript inside SSJS for more reference.
Line 75 - Forming JSON String. If the coupon is present, then it will return the coupon ID. If not, it will return response as 'Sorry no coupons available now'.
Add the below code in AMP Email section (view code):
Decoding the code:
Line 46 - Replace 'SFMCCloudPageURL' with actual JSON code resource URL.
Line 47 - We can also use Ampscript inside AMP section. Here we are populating Email address from the data extension and send it to cloud page to claim the coupon.
Line 51 - On click of claim coupon button, AMP will make a POST call out to SFMC cloud page along with email address. In the cloud page, we are capturing the email address and use claim row function to claim the row and returns the coupon.
If the Form submission is success, then it will get the response JSON values and display the coupon Id.
Output:
Full Code SSJS in Cloud Page:
Full Code AMP Email:
I hope now you have some idea on how to implement AMP for Email. This is just a tip of iceberg. But AMP for email could do a lot of things!!
This blog covers only the AMP section of email. Only clients like Gmail, mail.ru & Yahoo mail currently supports. So, you will also need to create a fall-back email content in normal section to send it for other clients. You can have a Claim Button in email and on click of that button, you can redirect them to a cloud page and show the coupon there.
Also once testing has been done in Preview section, to make it live you would need to raise a ticket to Google to white-list your sender profile for sending AMP for Email using this link.
Additional Resources:
Nice video on AMP for Email from Eliot.
AMP for Email Forms in SFMC from Ivan.
AMP for Email best practices from Salesforce.
Please feel free to let me know if you find this article useful and leave your feedback/comment in case of any queries.
Happy Learning!