Using API Event in Journey Builder with Custom CloudPage Form

Question

We designed a cloudpage with a simple form (bootstrap CSS utilized) that has 2 'textarea' types of fields (so, basically, free comment areas). Since this survey will be sent to our subscribers existing in a dedicated data extension for whom we already have relevant data, including emailAddress, we'd like those who fill out the survey to enter a journey as they would if we'd used the SF SmartCapture form.

Now, I was told by an SF expert that the easiest solution would be to use the API entry event in Journey Builder, as opposed to triggered sends in Email Studio which I have used in the past (involving AMPscript code or WSProxy, etc.). Anyway, is there a way to do this elegantly with Journey Builder?

I already created a journey with an API event as trigger and selected a target DE. This type of an event generated automatically an event definition key.

Also, here's the code we used to design the CloudPage and the form: (I'm not pasting the entire html, no need):

    %%[ /* Page 1 */
    VAR @externalID, @url
    SET @externalID=RequestParameter('CustomerID')
    SET @url=CloudPagesURL(1691,'CustomerID', @externalID)
    ]%%
<!-- HTML - form part - page 1 -->
<div class="optin-form">
             <form action="%%=CloudPagesURL(1691)=%%" method="GET">
               <div class="form-group">
    <label for="textArea1">Question 1?
</label>
    <textarea class="form-control" name="textArea1" id="textArea1" rows="8"></textarea>
  </div>
               <div class="form-group">
    <label for="textArea2">Question 2? 
</label>
    <textarea class="form-control" name="textArea2" id="textArea2" rows="8"></textarea>
  </div>
                <div class="btn-wrapper">
                  <button class="btn btn-default" type="submit">Submit</button>
                </div>
                <input type="hidden" name="CustomerID" value="%%=v(@externalID)=%%">
              </form>

              </div>
            </div>
          </div>
        </div>
      </div>
    %%

Page 2

/*Page 2 AMPscript - validation */

    %%[

    VAR @externalID, @extID, @url, @textArea1, @textArea2

    SET @externalID=RequestParameter('CustomerID')


    SET @textArea1 = RequestParameter('textArea1')
    SET @textArea2 = RequestParameter('textArea2')

    IF NOT EMPTY(@textArea1) THEN
    UpsertDE('Key_Priorities', 1, 'CustomerID', @externalID, 'Employee_life', @textArea1)
    ENDIF

    IF NOT EMPTY(@textArea2) THEN
    UpsertDE('Key_Priorities', 1, 'CustomerID', @externalID, 'Customer_life', @textArea2)
    ENDIF

    SET @url=CloudPagesURL(1690, 'CustomerID', @externalID)

    ]%%
<!-- html page 2- form continue-->
<div class="background-gradiant">
  <form action="%%=CloudPagesURL(1690)=%%" method="post">
      <div class="container">
        <div class="row">
          <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
          </div>
          <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 background-white">

            <div class="title-h3" style="color: #000000;">Thank You!</div>

Answer 1

This is correct, you will need to fire an entry event through API and the easiest way to do this is using SSJS. To send events using the API:

• Define the event and its properties (If defining the event in Marketing Cloud, make note of the Event Definition Key for API)
• Use a valid OAuth access token to authorize requests to the Marketing Cloud REST APIs.
• Using the POST /events resource, POST the required fields and event properties to the API.

Here's the script that should be placed on your processing page, so that it loads after form submission. You will need to pass all the data required for authentication and in the body of the fireEntryEvent request, pass all the form data that is required in your data extension. Note, that the fireEntryEvent will automatically insert the data into your target data extension, so you won't need the UpsertDE AMPscript function anymore.

<script runat="server">
Platform.Load("Core", "1");
try {

    //get email address posted through the form - do this for all the required fields
    var email = Request.GetQueryStringParameter("email");  

    //authenticate to get access token
    var authEndpoint = 'https://xxx.auth.marketingcloudapis.com/'  //provide authentication endpoint
    var payload = {
        client_id: "xxx",     //pass client Id
        client_secret: "xxx", //pass client secret
        grant_type: "client_credentials"
    };
    var url = authEndpoint + '/v2/token'
    var contentType = 'application/json'

    var accessTokenRequest = HTTP.Post(url, contentType, Stringify(payload));
    if (accessTokenRequest.StatusCode == 200) {
        var tokenResponse = Platform.Function.ParseJSON(accessTokenRequest.Response[0]);
        var accessToken = tokenResponse.access_token
        var rest_instance_url = tokenResponse.rest_instance_url
    };

    //make api call to fire entry event 
    if (email != null && accessToken != null) {
        var headerNames = ["Authorization"];
        var headerValues = ["Bearer " + accessToken];
        var jsonBody = {
            "ContactKey": email,   //pass contact key value
            "EventDefinitionKey": "xxx",   //provide event api definition key
            "Data": {
                "email": email    //pass all required data for the related data extension
            }
        };

        var requestUrl = rest_instance_url + "/interaction/v1/events";
        var fireEntryEvent = HTTP.Post(requestUrl, contentType, Stringify(jsonBody), headerNames, headerValues);
    };
} catch (error) {
    Write("<br>error: " + Stringify(error));
}
</script>