Implementing An End-to-End Scenario in SFMC Web Studio

I wanted to write a blog about Cloud Pages and basic AMPScripts covering an end to end Use Case, as I could not find something similar when I initially started working in SFMC.

Cloud Pages are HTML pages hosted in the SFMC server and support the following scripting languages:

• Client Side – Javascript, JQuery, any framework built on Javascript
• Server Side – AMPScript, Server Side JavaScript(SSJS)

I have taken a very basic and very frequent use case to create a landing page to be used as a basic subscription form for the customers. My example works for a setup with Marketing Cloud Connector, submitting the form will Create/Update data in Salesforce. The logic can be easily updated if the subscriber data has to reside in SFMC Data Extensions or Any other supported CRM or Database. Please note, AMPScript methods for Salesforce will only work for a SFMC instance connected to Salesforce.

I will breakdown the code to explain a bit, and provide a link to the file in GitHub.

AMPScript Logic:

1. It basically captures the Below Input Values:

• Email (Required, since you definitely need email to be able to send newsletter based on the subscription)
• First Name
• Last Name

2. Checks if a Person Account (Contact) already exists in Salesforce with the provided email. Based on the result, it either creates a new Person Account (Contact) record in Salesforce with the provided values or updates the Person Account (Contact) record in Salesforce. I have added additional comments to explain the important parts of the code.

    %%[
      //The logic will execute in page load as well as after the form submission, since it has no conditions
      //Variable Declaration
      var @firstName, @lastName, @email, @submitted, @subscriberRows, @subscriberRow, @UpdateAccount, @NewAccount, @RecordTypeId, @PersonAccountId
      //Variable Initialization, you can also initialize the variables in declaration
      set @firstName = ""
      set @lastName = ""
      set @email = ""
      set @submitted = "false"
      SET @RecordTypeId = "xxxxxxxxxxxxxxxxxx" //This variable will be used later on the creation of the Account record. Make sure you use RecordtypeID in your create calls when you have person account enabled
      //IF ELSE block in AMPScript
      //The below code block executes when we submit the form, as the value of submitted variable is set to true on the button click. 
      IF RequestParameter("submitted") == "true" THEN
        SET @email = QUERYPARAMETER('email')
        SET @firstName = QUERYPARAMETER('firstName')
        SET @lastName = QUERYPARAMETER('lastName')
        //RetrieveSalesforceObjects is used to query salesforce objects. The first parameter is the name of the object, the second parameter is the name of the fields to be returned, third parameter is the where condition. You can include more than one condition , but all of them will be evaluated with AND operator
        SET @subscriberRows = RetrieveSalesforceObjects(
          "Account",
          "Id,FirstName,LastName,Subscribed__pc",
          "PersonEmail", "=", @email )
        // Condition to check if the query has returned any rows
        IF RowCount(@subscriberRows) >= 1 THEN
          //getting the first record from the returned records
          SET @subscriberRow = Row(@subscriberRows, 1)
          // getting a specific field from the row
          SET @PersonAccountId = Field(@subscriberRow, "Id")
          //UpdateSingleSalesforceObject is used to update a single salesforce record. First parameter is the name of the object. Second parameter is the id of the record to be updated. After it the fields to be updated should be included in name value pairs.
          SET @UpdateAccount = UpdateSingleSalesforceObject('Account',@PersonAccountId,'Subscribed__pc',"true","FirstName", @firstname,"LastName", @lastname)
        ELSE
          //The else block is executed when no matching rows are found on Account object. It is going to create a new Account record with CreateSalesforceObject call. The first parameter is name of the object, second parameter is number of fields in your insert call. After that we have the fields in name value pair. if successful the call will return the id of the newly created record.
          SET @NewAccount = CreateSalesforceObject(
                  "Account",4,
                  "FirstName", @firstname,
                  "LastName", @lastname,
                  "PersonEmail", @Email,
                  "Subscribed__pc","true",
                  "RecordTypeId", @RecordTypeId)
        ENDIF
        SET @submitted = "true"
      ENDIF
    ]%%

SSJS : I have included the above AMPScript block inside a Server Side Javascript block to be able to capture any exceptions from the AMPScript Execution.

<!-- Server Side Javascript, we have a try catch block to print the errors from the AMPScript Execution -->
      <script runat="server">
        //Loads the the Core server-side JavaScript library
        Platform.Load("core","1");
        try {
      </script>
      <!-- Insert AMPSCript Here -->
      <script runat="server">
        }
        //catch block will catch any error from the AMPScript execution
        catch (err) {
            Write("Error Message: " + Stringify(err.message) +        Stringify(err.description));
        }
    </script>

AMPScript can also be included within HTML. You can render specific part of the page using IF ELSE block. These are useful, to display confirmation message to the customers after they submit the form

%%[ IF @submitted == "true" THEN ]%%
        <div id="successDiv">
          <span>Thank you for submitting your details.</span>
        </div>
      %%[ ENDIF ]%%

Link to Github : Repo

Thank you for reading our blog. I will try to write next blog about incorporating the cloud pages into another website, and also passing parameters from the parent html. This is a frequent use case, when a company is launching a new campaign, and would like to capture the customer’s response to the campaign from their existing website.

Stay Safe.