Home

Build a simple website and implement Segment

5 steps. Completion time 45 minutes

Note: The tutorial that follows is intended to encourage active learning for a non technical audience.

1. Create an Account

Create an account in GitHub (https://github.com/new) or sign in. If you are creating a new account, make sure to confirm your email address (go to your email and click on the confirm button on the message from Github). Some files will not update later if you haven’t confirmed your email address.

2. Create a Repo

Create a new repository (click on the black + sign on the top right) and call it yourusername.github.io . Since we are using Github pages to host this site, it is very important to follow the exact naming convention [YOUR USERNAME].github.io. In my case, my new repository is called beckyjaimes.github.io, check the box that initializes the repo with a README file, and click on the “Create repository” button.

3. Create an index.html file

Create a new file by clicking on the blue + symbol next to your new repository’s name and call it index.html (this file will contain the code for your website’s default page)

On that index.html file, insert the following text, and commit that file by clicking on the green “Commit” button:

<!DOCTYPE html>
<html>
<head>
        <title>Home Questionaire</title>
        <!--Placeholder for Google Analytics Snippet -->
        <!--Placeholder for MixPanel Snippet -->
        <!--Placeholder for KissMetrics Snippet -->
        <!--Placeholder for Segment Snippet -->
        <!--Placeholder for index.css link -->
</head>
<body>    
<br>
<h1>What is your favorite place to travel?</h1>
        <p>I am building a directory of the sweetest travel destinations.</p>
        <br><br>
        <form name="travel" onsubmit="identify(event)">
        What is your favorite travel destination?
        <br><br>
        <input name="destination" required="" size="81" type="text"/>
        <br><br><br>
        Any reccomendations (cool things to do, places to visit or restaurants to eat)?
        <br><br>
        <textarea cols="81" name="details" required="" rows="10"></textarea>
        <br><br>
        Name:
        <input name="fullname" required="" size="75" type="text"/>
        <br><br>
        Email:
        <input name="email" required="" size="75" type="email"/>
        <br><br><br>
        <input name="submit" type="submit" value="submit"/>
        <br><br>
        </form>       
</body>
</html>

To make sure everything is working this far, on a separate window, navigate to yourusername.github.io. You should be able to see your new website (it might take a few minutes). Should look similar to this:

4. Implement Segment

Create an account on Segment and a new project by selecting “new project” from the top right dropdown menu: Click on the “install a library in your site or mobile app” option (or select it by clicking on the 6th icon called “setup project”)

Copy the full snippet from the box on your segment dashboard, go back to your index.html file, select the pencil to edit, and replace the line that reads <!--Placeholder for Segment Snippet --> (mine is line 8) with the Segment snippet.

Your new file should look like this:

5. Identify Users and Track an Event

Identify those users that submit a destination. To do so, we created a little function that captures the input from the form, and sends some of that data as traits in an identify call. While we are at it, lets also send an event using the .track method called “destination submitted.” We are going to do that on the same index.html file, so if you haven’t committed your changes yet (if you have, just open to edit the index.html file again), scroll down to the line after the </form> tag (mine is line 38) and insert the following text.

<script type="text/javascript">
        function identify(e){
        e.preventDefault();
        var form = e.target;
        var email = form["email"].value;
        var fullname = form["fullname"].value;
        var destination = form["destination"];
        var details = form["details"].value;
        var user = {email: email, name: fullname, destination: destination, details: details};
        analytics.identify(email, {email: email, name: fullname});
        analytics.track('destination submitted', user, function() {
            window.location.href = "";
        });
        }
</script>

Your index.html file should contain code similar to the one found here (with your project’s Segment write key in line 10). Commit the changes.

Go back to your website (refresh to make sure all changes have been loaded) and submit a travel recommendation form.

Go to your debugger on the Segment’s dash. You should be able to see the following 3 calls:

Enable Google Analytics, MixPanel and KissMetrics. You might have to create an account on each of those services to get the site IDs, tokens or keys necessary to input in Segment’s dash.

If something is not right and you triple checked that your code is similar to the one here (and you just created a Github account only to complete this project), make sure that you have confirmed your email address on that Github email.

6. Bonus Step

Right now the debugger is showing “/” on our page call. This is because we are in the home page - if we were in another page, the debugger should show /blog or /countries or whatever path you are in. Wouldn’t it be nice that the page call had the actual title of the page instead of the path? To do that, you just have to replace analytics.page() in your index.html file (mine is in line 11) with analytics.page(document.title).

Your calls should now look like this:

Congratulations! You just finished Module 1 of this training series.

One thing worth pointing out is that for simplicity purposes we didn’t follow Segment’s best practices when assigning a random userID for each user. Instead, we sent our user’s email address as the userID and that will not make Sperandio proud. The reason that sending the email is less than ideal, is because users can have many email addresses and we dont want to count one user multiple times.

In module 2 we will integrate with Optimizely and Keen. Optimizely is an interesting one, as its the only integration that requires their snippet to also be loaded into our page.