<aside> 💡 About the following steps: This tutorial explains how to save the registrant’s session ID on Livestorm as a custom field and then to store this session ID from Livestorm to Marketo in the program member.

</aside>

Intro

If you're using Marketo as your Marketing Automation Tool, it is possible for you to connect it to Livestorm. You can send data from Livestorm to Marketo using our native integration. But if you have an event with several sessions, you may also want to store the registrant’s session ID from Livestorm to Marketo in the Program Member.

In this article, we'll show you how to store the session ID on Livestorm as a custom people attribute. Then we’ll show you how to store this session ID from Livestorm to Marketo in the program member.

How to:

💭 Step 1 : Save the Session ID as a custom field on Livestorm when someone registers to an Event on Livestorm.

⚠️ NB: This code works for the detailed registration page. The custom field won’t be visible to the registrant on the registration form.

1. On your workspace, create a new people attribute in order to save the session ID.

For this, go to your workspace > Account Settings > People Attributes

Name your custom attribute (Session ID in the example below)

• Save the slug of the Session ID custom attribute for later.

  (In the example below, the generated slug is session_id)

• The attribute type must be Text

1. Once this is done, we are going to add some custom code to the registration pages.

Copy the script below and replace the value of sessionIdSlugName by the slug of your custom attribute. 👇

Replace

⇒ const sessionIdSlugName = "ADD SLUG HERE";

By

⇒ const sessionIdSlugName = "**session_id**"; (or by whatever your slug is)

<script>

window.addEventListener("load", function () {
  // Declaring variables
  const sessionIdSlugName = "ADD SLUG HERE"; // Update by the slug of the custom session ID field
  let urlSessionVal = "";

  //Function to wait for the session ID Block to appear/exist in the DOM
  function waitForSessionBlock(selector) {
    return new Promise((resolve) => {
      if (document.querySelector(selector)) {
        return resolve(document.querySelector(selector));
      }

      const sessionBlockObserver = new MutationObserver((mutations) => {
        if (document.querySelector(selector)) {
          resolve(document.querySelector(selector));
        }
      });

      sessionBlockObserver.observe(document.body, {
        childList: true,
        subtree: true,
      });
    });
  }

  // Function to update the value of Session ID Input
  const changeSessionIdValue = (input, value) => {
    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLInputElement.prototype,
      "value"
    ).set;
    nativeInputValueSetter.call(input, value);

    var inputEvent = new Event("input", { bubbles: true });
    input.dispatchEvent(inputEvent);
  };

  // Function to observe Modal mutation and set value to the Session ID input field

  async function modalMutationObserved(mutationList, observer) {
    for (const mutation of mutationList) {
      if (mutation.type === "childList") {
        const sessionBlock = await waitForSessionBlock(
          `div[data-form-field='${sessionIdSlugName}']`
        );

        if (sessionBlock) {
          sessionBlock.style.display = "none";
          let queryString = window.location.search;
          let urlParams = new URLSearchParams(queryString);
          urlSessionVal = urlParams.get("s");
          const sessions = window.event_type.sessions;

          //declaring the session ID input
          const sessionIdInput = document.querySelector(
            `input[data-testid='${sessionIdSlugName}']`
          );

          if (urlSessionVal === null) {
            changeSessionIdValue(sessionIdInput, sessions[0].id);
          } else {
            changeSessionIdValue(sessionIdInput, urlSessionVal);
          }

          //Declaring the session Date field to observe changes (new session selected)
          const sessionDate = document.querySelector(
            "div[data-testid='form-input-sessions'] span.content.truncate"
          );

          // Listening for changes on the session Date
          sessionDate.addEventListener("DOMSubtreeModified", function () {
            queryString = window.location.search;
            urlParams = new URLSearchParams(queryString);
            urlSessionVal = urlParams.get("s");

            changeSessionIdValue(sessionIdInput, urlSessionVal);
          });
        }
      }
    }
  }

  const config = { childList: true, subtree: true };
  const modalNode = document.querySelector("#teleport-end");
  const modalObserver = new MutationObserver(modalMutationObserved);

  modalObserver.observe(modalNode, config);
});

</script>

1. Enable this custom code on the registration pages.

2. In your event > Registration settings, add the previously created custom attribute as a registration field.

Now, when a participant registers to your event, the session ID should be saved as a custom registration field.

💭 Step 2 : Configure Marketo to store the Session ID in the program member.

⚠️ NB: For the next steps - Marketo and Livestorm should already be configured in order to send Data from Livestorm to Marketo. See related documentation: https://support.livestorm.co/article/231-connect-marketo-livestorm

Create a custom field Livestorm_eventid for your leads

On Marketo:

1. In Admin > Data Management > Field Management, click on New Custom Field.
2. Fil in the form with the following information and click on Create:
   • Object: Person
   • Type: String
   • Name: Livestorm_eventid
   • API Name: livestormeventid

1. If you haven’t already, please also create custom fields to store the session ID for your leads, one as a Person and one as a Program Member:

For example :

Object ⇒ Person

• Name: Livestorm_sessionid

Object ⇒ Program Member

• Name: Livestorm_session_id

On Marketo, create a Livestorm Webhook:

On Marketo:

1. In Admin > Integration > Webhooks, click on New Webhook.
2. Fill in the form with the following information and click on Save.
   • Webhook name: Get Livestorm People Attributes
   • URL: https://api.livestorm.co/v1/events/{{lead.Livestorm_eventid:default=edit me}}/people?filter[email]={{lead.Email Address:default=edit me}}
   • Request Type: GET
   • Request Token Encoding: Form/Url
   • Response Type: JSON

1. Click on Webhook actions > Set Customer Header and add the following properties to your header
   • Authorization: [your API Key]
   • Content-Type: application/json

1. Edit Response Mapping and add the following properties:
   • Response Attribute: data[0].attributes.registrant_detail.fields[n].value
   • Marketo Field: livestorm_sessionid (add the Marketo field you previously created to save the session ID as a Person object)

⚠️ [n] needs to be replaced by the index where the value of the session ID is found on the “fields” array, in the response of the API call.

As an example, in the following response, the value of the session ID is found at Index 3 so [n] should be replaced by [3] in the webhook.

{
  "data": [
    {
      "id": "9d16b12f-44de-4af5-b6b3-aca94765baza",
      "type": "people",
      "attributes": {
        "role": "participant",
        "created_at": 1670342127,
        "updated_at": 1670342188,
        "timezone": "Europe/Paris",
        "first_name": "Hello",
        "last_name": "Marketo",
        "email": "lea.ohana+hellomarketo@livestorm.co",
        "avatar_link": null,
        "registrant_detail": {
          "event_id": "d6a8f5f5-63da-4841-b314-7032fb7d1f98",
          "created_at": 1670342127,
          "updated_at": 1670342188,
          "fields": [
            { // INDEX 0
              "id": "email",
              "type": "text",
              "value": "lea.ohana+hellomarketo@livestorm.co",
              "required": true
            },
            { // INDEX 1
              "id": "first_name",
              "type": "text",
              "value": "Hello",
              "required": true
            },
            { // // INDEX 2
              "id": "last_name",
              "type": "text",
              "value": "Marketo",
              "required": true
            },
            { // INDEX 3 ==> SESSION ID. That's the index we're looking for
              "id": "session_id",
              "type": "text",
              "value": "8227eabf-4762-4aa5-83b9-f65109d2d01d",
              "required": false,
              "custom": true
            }
          ]
        }
      }
    }
  ]

Create a Smart Campaign Triggered by “Program Status is changed”

1. In Marketing Activities, select your program and click on New > New Smart Campaign

2. In your new Smart Campaign, under Smart List, select the trigger “Program Status is Changed” and select your program.

Update the Flow in your Smart Campaign

1️⃣ Change the Data Value

1. In your smart campaign, in Flow, add an action Change Data Value with the following information:

• Attribute: Livestorm_eventid
• New value: input the ID of the Livestorm event you’d like to register contacts from.

2️⃣ Call the Webhook previously created

In your flow, add the action Call Webhook

• Select the Webhook “Get Livestorm People Attributes”

3️⃣ Change Program Member Data

The last step consists in changing the Program Member Data in order to store the session ID at the program member level.

In your flow, select the action Change Program Member Data and add the following information:

• Program: Name of your program
• Attribute: Livestorm_session_id (add the Marketo field you previously created to save the session ID as a Program Member Object)
• New Value: {{lead.Livestorm_sessionid}} (add the Marketo field you previously created to save the session ID as a Person Object)

<aside> 🎉 Et voilà. If you connect your Livestorm event to your Marketo program, the session ID should now be stored on Marketo at the program member level. (Don’t forget to enable the custom code on Livestorm and to add the Session ID as a registration field, as explained on Step 1).

</aside>

⬇️