Landing pages are an important tool for collecting first-party data from your site visitors, but to put this data to use, you need to sync it across your marketing stack.
For a growing number of brands, Segment is the customer data platform (CDP) of choice to collect and unify customer data for use across marketing channels. If you use Segment to manage your customer data, ideally you should choose a landing page solution seamlessly integrated with Segment. In this guide, we’ll show you how to integrate landing pages with Segment.
💡 If you have already built a landing page and just want to collect data with your page via Segment, you can skip to Part II below.
Otherwise, we’ll show you how to create a Segment-integrated landing page using Digioh’s drag-and-drop landing page builder. Digioh integrates with Segment to sync data in real-time and personalize landing page content using Segment personas.
Part I: Creating a Landing Page for Segment
The Digioh page editor allows you to build dynamic, on-brand landing pages with ease. To start, choose one of our landing page templates, or start fresh with a blank page to create your landing page from scratch.
Next, add content to your page. Drag and drop to place text, images, form fields, CTA buttons, and any other desired elements with pixel-perfect precision.
Digioh also allows you to create thank-you pages that appear after visitors submit their information. You can customize this page by clicking on the “Thank You Page” tab on the left side of the page builder.
Part II: Setting up Your Segment Integration
To integrate with Segment, you need some JavaScript knowledge.
The JavaScript here assumes that your forms follow Digioh convention, but you can adapt the code to the specific forms on your page. We also assume that you have already embedded your Segment JavaScript tag on your landing page. Embed the code below in a <script> tag on your landing page, or if you’re using Digioh, paste it into the Custom JS for that page.
const urlParams = new URLSearchParams(window.location.search);
function buildSegmentProperties() {
const props = {};
props.name = jQuery.("#field1"); //assuming #field1 is id of name
props.email = jQuery.("#field2"); //assuming #field2 is id of email field
//For each checkbox option on page, do this
props[jQuery("label[for=field1']")] = jQuery("#field3").is(':checked');
//…
return props;
}
jQuery("#your_submit_button_id").click(function() {
const props = buildSegmentProperties();
window.analytics.identify(props.email, props);
});
This JavaScript calls Segment Identify, with email as the userId, and with traits for other fields in your form.
💡 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. To avoid Ad Blocker issues, you must use the Segment server-to-server API. Digioh landing pages do this out of the box.
Collect More First-Party Data with Segment-Integrated Landing Pages
Digioh integrates with Segment to help you launch dynamic landing pages and make your data available across your entire marketing stack. To learn more about our landing page builder, custom preference centers, and other Segment-integrated solutions, reach out to us for a demo.