Reference a Landing Page from Email with CloudPagesURL in Salesforce Marketing Cloud

Author: Florin Valean

Use case

CloudPagesURL is a handy function whenever you want to reference a landing page from an email. A common scenario when CloudPagesURL would be useful is when you want your emails to include a link to a custom unsubscribe page or a subscription centre page/microsite. CloudPagesURL will redirect to the landing page you referenced and it will automatically create an encrypted query string that will pass information to the landing page without exposing any readable values to the end user.

Syntax and observations

This is the syntax for CloudPagesURL, there are two ways of using this ampscript function in an email message - with and without custom parameters:

/* replace the highlighted text with your own values */ /* Page ID can be found on the details page of your cloud page */ %%=CloudPagesURL('PAGE_ID')=%% /* add parameters to be included in the encrypted query string you can add multiple name-value pairs for additional parameters */ %%=CloudPagesURL('PAGE_ID', 'PARAMETER_1_NAME', 'PARAMETER_1_VALUE', 'PARAMETER_2_NAME', 'PARAMETER_2_VALUE')=%%

Notice that in both cases CloudPagesURL function will generate a query string in this format qs=da83ac87f00e246c272f1cfec0267ac099c874546d8fa57b40830d14d41d620741a55151a40cee0d2f66cc03d9303552. The query string is generated at the moment of send and the value of the qs query string parameter is the encryption of all name-value pairs that are being sent. These include your custom parameters, the fields in your sendable data extension that was used for the email send and also the standard personalization strings available in Salesforce Marketing Cloud such as _subscriberkey, jobid, listid, emailaddr, _DataSourceName etc.

Prerequisites

In order to test the functionality of CloudPagesURL function we need to create a landing page in Web Studio. The name and the URL of this page is not important for this exercise but we will need to find the page ID on the details page - it's a numeric value. Let's assume our page ID is 123.

We also need to create an email in Content Builder and include a link to our landing page. We are going to create the link like this:

%%=RedirectTo(CloudPagesURL('123', 'language', 'FR'))=%%

In this case CloudPagesURL will generate an encrypted query string that also includes the language parameter with its value for French.

Notice the use of RedirectTo function. It is recommended to always wrap the call of CloudPagesURL in a RedirectTo when it is used in the href attribute of the <a> tag. If you fail to do so the encryption of the query string may be corrupted and that can result in your landing page throwing a Server Internal Error - Error Code 500.

We also need to create a sendable data extension. Let's call it Test Email with customer key TestEmail. This test data extension will have three attributes:

Attribute nameAttribute data type
SubscriberKeyText (50)
EmailAddressEmailAddress
NameText (30)

SubscriberKey in this data extension relates to Subscribers on Subscriber Key.

We are going to import a record in this data extension:

SubscriberKeyEmailAddressName
Sub-1a@code4.cloudAnna

The email will be sent to this data extension.

Get parameters from query string in the landing page

All personalization strings and all query string custom parameters can be read in the cloud page. There are functions in Ampscript and Server-side java script that can retrieve values from the query string parameters (including encrypted query string).

Ampscript
RequestParameter('PARAMETER_NAME')

Server-side java script
GetQueryStringParameter('PARAMETER_NAME')

Server-side javascript sample code

Put this code in your landing page. For this example we have this code running on the landing page with page ID 123.

<script runat="server"> Platform.Load("Core", "1"); try { /* get the value for language parameter */ var lang = Request.GetQueryStringParameter('language'); if(lang == 'FR') Write('Merci!'); else Write('Thank you!'); } catch(e) { Write(Stringify(e)); } </script>

Notice the use of try-catch block - see this page for more details on how/when to use try-catch.

When this code is triggered from the email we created earlier it will display Merci!

Ampscript sample code

Put this code in your landing page. For this example we have this code running on the landing page with page ID 123.

%%[ var @lang, @message, @subscriberName, @email set @subscriberName = Name set @email = emailaddr /* get the value for language parameter */ set @lang = RequestParameter('language'); if @lang == 'FR' then set @messsage = "Merci beaucoup!" else set @messsage = "Thank you!" endif ]%% %%=v(@message)=%%<br /> This email was sent to %%=v(@subscriberName)=%% at %%=v(@email)=%%

When this code is triggered from the email we created earlier it will display:

Merci!
This email was sent to Anna at a@code4.cloud
Share this page
Stay in touch

Subscribe to the newsletter

p1 p2 p3