How to Integrate Your Preference Center with Segment

Preference centers allow email marketers to comply with regulations while reducing unsubscribes and cross-selling other newsletters. By putting subscribers in control of the email communication they receive, you help maintain the good health of your email program.

💡 If you have already built a preference center and just want to collect data via Segment, you can skip to Part II below.

Otherwise, Digioh’s drag-and-drop preference page builder easily integrates with Segment to sync subscriber preferences in real-time. We’ll show you how to build a preference center with Digioh and integrate your page with Segment to share subscriber data across your marketing stack.

Part I: Create Your Segment Preference Center

To begin creating your preference center in Digioh, choose one of our preference center templates, or choose a blank slate to design your own preference center from scratch.

Next, add your images, opt-in checkboxes, descriptions of your newsletters, a text field that allows subscribers to edit their email address, and any other desired elements for your page. With Digioh, you can drag and drop to place these elements with ease.

For more help, check out the examples & best practices in our preference center guide.

Of course, preference centers don’t have to stop at collecting email preferences. You can also use your page to enrich your Segment data with user interests, job titles, and more. To capture this data with your preference center, add their corresponding fields to your page.

You can also add HTML and CSS using the custom code boxes on the left side of the builder. Use these fields to quickly add your brand’s styles, headers/footers, or other code you need to keep your page on-brand.

Finally, Digioh allows you to create a thank-you page that appears when subscribers submit changes to their preferences. Edit this page by clicking the “Thank You Page” tab on the left side of the page builder.

Part II: Integrate Your Preference Center with Segment Using JavaScript

Segment is a technical tool, so some JavaScript knowledge is required.

The code here assumes that your form structure follows Digioh convention, but you can easily adapt the code to your own forms. It also assumes you’ve embedded the Segment JavaScript tag on your page, either directly or via a tag manager. Embed the code below in a <script> tag on your preference page, or if you’re using Digioh, paste it into the Custom JS for that page.

const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");  //use the key for the user/email ID in URL
function buildSegmentProperties() {
   const props = {};
   //For each email checkbox option on page, do this
   props[jQuery("label[for=field1']")] = jQuery("#field1").is(':checked');
   //…
   return props;
}
jQuery("#your_submit_button_id").click(function() {
   window.analytics.identify(id, buildSegmentProperties());
});

This JavaScript calls Segment Identify, with the userId associated with the email address, and with traits for each of your email preferences. If you like, you can use the email address itself as the id. 

For Digioh preference centers, your checkboxes will be #field1, #field2, etc, based on their position in the form. If you’re integrating your own preference center, use your own field IDs instead.

💡 Important: Segment JavaScript is currently blocked by several major Ad Blockers. If this data is mission-critical, then you could miss 5-10% of your data. The only way to avoid Ad Blocker issues is to use the Segment server-to-server API. Digioh preference centers do this out of the box.

Launch Your Segment-Integrated Preference Center with Digioh

Digioh integrates with Segment to help you build a custom preference center and ensure your preference data is available across your marketing stack. To learn more about our preference center builder or other solutions integrated with Segment, reach out to us for a demo.