NOTE: this article describes how to implement and customize your Segment integration from scratch. It’s recommended for technical users with JavaScript knowledge. A more turnkey approach is to use Digioh’s Segment Track & Traits App instead. If you plan to target Digioh Boxes to specific user traits or audiences, we support that but you’ll need to contact Digioh support.

Segment is a powerful CDP platform to collect, clean, and control customer data. With the Segment API in Digioh, you can capture valuable first-party data from web forms, landing pages, and subscriber paywalls, then send it to Segment. When your users enter their email in a form, you can identify that user, tying their Segment persona to an actual person.

There are two ways to integrate Digioh form submissions with Segment:

1. Use the Segment JavaScript library from Digioh Custom JS
2. Use the server-to-server API as a Digioh form submission Integration

Unfortunately, the Segment JavaScript library is blocked by several major ad blockers, so if you are powering mission-critical forms (e.g. a Contact Us form and most inline forms), then use the server-to-server API. For the most robust and comprehensive integration, we recommend a third option, a hybrid of both approaches.

Digioh can also target boxes based on your Segment Persona data. For that and other advanced use cases, please contact us to help you set it up.

Option 1: Segment Tracking from JavaScript

This approach builds the tracking data in JavaScript and sends directly to Segment. In “Custom JS Boxes,” create a new JavaScript snippet triggered After Form Validation:

if (typeof window.parent.analytics !== 'undefined') {

    let sObj = {};              //the object to pass as Segment event "properties"
    sObj.email = x.email;
    sObj.name = x.full_name;
    sObj.custom1 = x.custom_1;  //and any other custom form fields you want to pass

    //Optional metadata
    sObj.digiohBoxName = boxapi.getName();
    sObj.pagePath = api.getPagePath();
    sObj.country = api.getClientCountryCode();
    sObj.city = api.getClientCity();

    //Main tracking call, must use window.parent as this runs from the box iFrame
    window.parent.analytics.track('Digioh Form Submission', sObj);

    //Optional call to identify the user with email address
    //window.parent.analytics.identify(x.email, sObj);
} else {
    console.log('Segment JavaScript tag not found');
}

This will pass select form fields and analytics data any time someone submits the form. You can also pass data when a box is displayed or when a box is closed. The Digioh JavaScript API provides a wide range of functions and data that you can send to Segment.

Option 2: Segment Server-to-Server API

This approach takes standard Digioh form data and sends it to the Segment API from the Digioh server. The segment API is a form POST with HTTP Basic Authorization. To get started, you need your Segment “Write Key”. How do I find my write key?

In your Digioh account, create a new Integration, select “Segment (Track Event)”, and paste your write key:

The HTTP method is POST, and your write key is automatically included as the Basic Auth Username, with no password. We provide a standard integration template using Digioh merge fields:

You will need some familiarity with the JSON format to modify or add data to this. Generally, you would add data to the properties field and adjust the integrations field as needed. Reach out to Digioh support if you need help.

Save the integration and attach it to one or more of your boxes, and data will flow to Segment on box submission.

Option 3: JavaScript and API Hybrid

This is the most robust option recommended for more advanced users. It uses the Segment JavaScript (if available) to obtain the existing anonymousId, and uses that in the Server API call.

Create Box JS, triggered After Form Validation:

var seg = window.parent.analytics;
if(seg & seg.user() & seg.user().anonymousId()) {
    x.custom_10 = seg.user().anonymousId();
} else {
    x.custom_10 = api.getClientId();    //use Digioh unique ID if Segment not available (usually ad blocker)
}
return x;   //This is important, needed to tell Digioh to send the modified form data

Then create a Digioh-Segment Integration as in Step 2 above, but with the following JSON:

{
  "anonymousId": "[CUSTOM_10]",
  "event": "Digioh Form Submission",
  "properties": {
      "email": "[EMAIL]",
      "form_name": "[LIGHTBOX_NAME]"
  },
  "integrations": {
      "Salesforce": true
  },
  "context": {
    "ip": "[IP_ADDRESS]"
  }
}

We’ve arbitrarily chosen [CUSTOM_10] to pass the Segment anonymousId. Feel free to change that. You can also add any other form parameters you wish to the “properties” object, and adjust “integrations” as needed (if any).