Tracking Lytics Web Personalize Experiences in Third Party Tools

You may want to track the way users are interacting with your Lytics web personalize Experiences in other your other marketing tools. Whether it be to capture leads coming in from a form submission, or simply metrics such as conversions and impressions, this information can easily be shared downstream.

In this guide, you will explore three different ways to approach how to send event data from web personalize Experiences to downstream tools. This guide will build off of the custom form guide, utilizing the configuration built in that tutorial.

You can download the complete JavaScript configuration, and API override command for this example from the Github examples repository.

Note: Pathfora has a native integration with Google Analytics. The documentation for this integration outlines how to enable this integration and what data is collected.

There are three ways to approach this problem, the method you choose will vary based on the scope of the data you want to collect and the third party system and its capabilities.

1. Lytics can send real-time tracking event data with no additional development work if the third party is a pre-built integration with an export workflow. Consult the list of supported integrations to see if your tool is already integrated with Lytics.
2. For custom systems, or third parties that Lytics does not already support, you may use the webhook workflow to send event data to a custom endpoint.
3. You may define custom callback functions in your widget's configuration via the SDK or API overrides to utilize a JavaScript library of the tool to send data, or to simply make client-side requests to the third party's API.

Approach one and two are limited in the scope of data that can be tracked, and require an audience to be built in Lytics with an export workflow running for each specific use case you would like to collect data for. Because Lytics export integrations use audience triggers, events are only sent when a user enters or exits an audience. But data is not necessarily sent when a repeat event occurs. For example, if you simply wish to track form submissions from a web personalize experience, and the expectation is that the user will only fill out the form once, approach any of the three approaches would be appropriate. However, if you wanted to specifically track the number of times a user has seen a widget, only the third approach would apply.

The second approach assumes that the required code is written server-side via a custom endpoint, or an existing collector endpoint of the third party tool. Whereas the code required for approach three would be written client-side. Endpoints you call from the client-side must be CORs compatible with your website. You may need to employ a custom middle-man endpoint if the third party system's APIs are private and require secure credentials.

This guide will cover how to send user data collected via the form widget built in the custom form guide. It will show how to build the appropriate audience for approach one and two, and a full JavaScript configuration to support approach three.

To use a pre-built integration or webhooks to send data, you will need to construct an audience of users who have completed the event that you wish to track, so that as new users enter the audience, triggers are sent downstream.

This guide will show you how to build an audience of users who have submitted a form via a widget built through Lytics web personalize Experiences or via the Pathfora SDK.

1. In the Lytics UI, navigate to Data > User Fields.
2. Search for the field Converted with Lytics Campaign. This field is a map, where the keys are the Experience ID (or widget ID if built through the SDK), and the value is the count of times the user has converted on the widget (clicked the CTA - or in this case submitted the form).
3. Click on Create audience with this user field.
4. You will now be dropped into the audience builder. In the Field Key text box, input or select the ID of the Experience or widget you wish to track. For the SDK config included in the example code for this guide, you would select custom-tracking-widget. Then click Select.
5. For the rule, select be at least and enter the value 1 in the text box. This defines the audience as users who have submitted the form one or more times. Click Add Condition.
6. Be sure to name your audience, and click Create to save it.
7. From the audience summary page, click Export to set up the export integration or webhooks.

See the documentation for the specific integration you are using to learn how to configure it. Note that you'll want to send over the custom user fields submitted as part of the widget form. Some integrations require you to select a subset of user fields to export. Webhooks include the full profile as the payload of the POST request, so you should be able to access these fields from your custom endpoint.

Start with the final config from the custom form guide.

  var customTrackingWidget = window.pathfora.Form({
    id: "custom-tracking-widget",
    layout: "slideout",
    position: "bottom-left",
    className: "custom-tracking-widget",
    headline: "Sign up for our Newsletter",
    formElements: [
      {
        "type": "text",
        "required": true,
        "label": "Email Address",
        "name": "email"
      },
      {
        "type": "checkbox-group",
        "required": true,
        "label": "Which feeds would you like to subscribe to?",
        "name": "subscription_feeds",
        "values": [
          {
            "label": "Beauty & Perfumes",
            "value": "beauty"
          },
          {
            "label": "Electronics",
            "value": "electronics"
          },
          {
            "label": "Fashion",
            "value": "fashion"
          }
        ]
      }
    ],
    okMessage: "Subscribe"
  });

  window.pathfora.initializeWidgets([customFormWidget]);

You will use the confirmAction callback, which is called when the user clicks the CTA button on a widget.

  var customTrackingWidget = window.pathfora.Form({
    // widget configuration
    confirmAction: {
      callback: function (event, payload) {
        // make API request with form data
      }
    }
  });

The parameters passed to this function will include the data submitted by the user in the form under a field called data on the second parameter. In this case, payload.data is formatted as an array of objects with each individual form field's name and value. Here is an example of what payload.data might look like:

[
  {name: "email", value: "[email protected]"},
  {name: "subscription_feeds", value: "beauty"},
  {name: "subscription_feeds", value: "electronics"}
]

This example will employ a reduce function to flatten the data structure.

  var customTrackingWidget = window.pathfora.Form({
    // widget configuration
    confirmAction: {
      callback: function (event, payload) {
        // validate the form data exists
        if (!payload.data) {
          return;
        }

        // reformat the data
        var output = payload.data.reduce(function(acc, field) {
          // multiple values - format as an array
          if (acc.hasOwnProperty(field.name)) {
            var existingValue = acc[field.name];
            var arr = Array.isArray(existingValue) ? existingValue : [existingValue];
            arr.push(field.value);
            acc[field.name] = arr;
          // first time seeing value
          } else {
            acc[field.name] = field.value;
          }
          return acc;
        }, {});

        console.log(output);
      }
    }
  });

output now contains the new data structure:

{
  email: "[email protected]",
  subscription_feeds: ["beauty", "fashion"]
}

You may write an algorithm to reformat the data to fit the needs of your system. Now we simply need to send this data to the third party API. You can do so using an XHR request.

  var customTrackingWidget = window.pathfora.Form({
    // widget configuration
    confirmAction: {
      callback: function (event, payload) {
        // validate the data
        // translate the data payload ...

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://yourwebsite.com/custom/endpoint", true);
        xhr.send(JSON.stringify(output));
      }
    }
  });

You can even validate the response from the third party API, and control success and error states of the widget based on the response. Check out the formStates documentation for more information:

var customTrackingWidget = window.pathfora.Form({
  // widget configuration
  formStates: {
    success: {
      headline: "Success",
      msg: "Thanks for signing up, you can expect to receive updates in your inbox soon."
    },
    error: {
      headline: "Error",
      msg: "There was an issue submitting your subscription. Please try again or <a href=\"/contact\">contact us</a> if the issue persists."
    }
  },
  confirmAction: {
    waitForAsyncResponse: true,
    callback: function (event, payload, cb) {
      // validate the data
      // translate the data payload ...

      // make the request to the third party
      var xhr = new XMLHttpRequest();
      xhr.onload = function () {
        // if successful load the form success state
        if (this.status === 200) {
          cb(true);
        // otherwise trigger the form error state
        } else {
          cb(false);
        }
      };
      xhr.open("POST", "http://yourwebsite.com/custom/endpoint", true);
      xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
      xhr.send(JSON.stringify(output));
    }
  }
});

That's all, be sure to test that data is being sent correctly to your endpoint via the Network tab in your Chrome developer tools.

Remember you can download the code for this example to get the full finished JavaScript configuration, and API override. This can act as a starting point for your own custom tracking widget.