How to Add a Website as a Segment Source

July 05, 2022
Written by
Reviewed by
Ben Link
Twilion

header img

When using Segment, a source is a website or application you wish to receive data or information from. This blog post will go over how to create a source in the Segment console for each website or application you want to track using Analytics.js, Segment's Javascript library, to track user data from your site.

Prerequisites

To follow along with this post, you need two things:

  • Segment account - sign up for a free one here
  • A website to connect as a source! You will also get more value out of Segment by connecting a source that captures user identity in some way like with a login system

Add a Website as a Segment Source

If you’re just getting started, Segment recommends using it instead of server-side libraries because analytics.js is the simplest installation for any website. To make a source, create and go to your Segment Workspace and click Sources on the left.

connections Segment

From your List of Sources, click the blue Add Source button.

list of sources

From the Catalog of Sources, under Website select JavaScript followed by Add Source.

sources catalog: website

In Source setup, give your Source a name–for example, Personal Website. You can leave Labels blank, and then add the Website URL.

source setup

After clicking Add Source, your website is a Segment source and Segment will provide you with the following code from your Segment workspace to include analytics.js in your website's code so you can track actions and receive data from your source (website!) Each source you make has a write key to send data from that source. This provided code below should go in your website's <head> tag.

snippet to add to your website to add Segment to your site

Now you have the ability to call analytics.js functions like identify():

analytics.identify('user_123', {
  email: 'jane.kim@example.com',
  name: 'Jane Kim'
  });

You can see actions people take with your source in your Segment console's Debugger section of your source.

see actions taken by users in Segment console

Some API calls you can use now include identify() and track().

  • identify() is used to tie a user to their actions, recording traits about the user. This includes a unique User ID and any optional traits you know about the user, such as email, name, etc.
  • track() is used to record actions your users perform, as well as any properties that describe the action, such as "user registered" or "pineapple added to cart."

There are more methods available to you, too.  Check out the Segment Docs for a complete specification.

What's Next for Segment Sources

In addition to adding websites as Segment sources, you can also add mobile applications, Cloud Apps like Amazon S3, Object Cloud Sources like Twilio, SendGrid, Marketo, Salesforce, Stripe, Event Cloud Sources like Looker, LaunchDarkly, and Leanplum, and more as sources to track.

Event Cloud Sources send data as events, or behaviors or occurrences that are tied to a user and a given point in time. Data from those sources can be loaded into your Segment warehouses, and also sent to Segment streaming destinations.

The next step after you get data from a Segment source is to send it to a destination to then analyze that data to improve marketing, customer outreach, and more. To learn about sending SMS when someone visits your source website, check out this blog post here, and stay tuned to the Twilio blog for more Segment-related tutorials.