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.
