March 29, 2020
Managing customer data using Segment — Webflow integration tutorial

Managing customer data using Segment — Webflow integration tutorial


With Segment, we can manage our marketing
scripts for any number of platforms like Mixpanel, Google Analytics, Facebook Pixel, Google AdWords,
and Wuphf. And Segment can manage the customer data that’s
being collected. We use Segment at Webflow because it’s one
script that connects all of this. Not only does that help ensure everything’s
clean and organized; but Segment can store all of this — product analytics, marketing
analytics — all under one roof. We’re going to connect Segment to our segment
Webflow project in three parts. We’ll go into Segment and create our first
source (in this case, the source will be our website), then we’ll copy the code snippet
from Segment, and finally we’ll paste it into the footer on our project. For those who’d like to move quickly, Miguel
is creating a version of this video which takes literally 1 second. That’s connecting Segment to our Webflow project. For everyone else, let’s do the regular-speed
version. We’re starting in Segment. And our goal for the first part is to add
a source, right over here in Sources. And for the type of Website, let’s choose
JavaScript. All we have to do? Is press connect. Will that connect it? No. Now we have to set up the source, which will
be fairly easy, because Grimur’s been typing it in using a bluetooth keyboard. Once that’s done, let’s hit Add Source. That’s part 1, what about part 2? We want to choose our source (we were redirected
here because we just created a new one), and we want to click the dropdown menu for adding
Segment to our project. The goal is to copy the script. So let’s select it and copy the script. That’s part 2, what about the last part? Back in Webflow, on the project we’re looking
to connect to Segment, let’s go to our Project Settings. Once we’re there, let’s head over to custom
code. From this page, we’ll see footer code. Except we don’t. Because we have to scroll a bit. Once we do, we’ll see footer code. Let’s paste that code snippet we just copied. And once we do, we can save our changes, and
then, of course, we can scroll back up to the top of the page… to press publish. This way the code we just pasted in updates
on our actual production website. Segment is now implemented in your published
project. Even after adding additional destinations
in Segment? (This can get really addicting by the way…) You won’t have to update that code snippet. Segment does all the heavy lifting for you. So. We added a source (our website) to Segment,
we grabbed the code snippet, and then we pasted into our footer in Webflow. That’s integrating Segment to our Webflow
project.

5 thoughts on “Managing customer data using Segment — Webflow integration tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *