search

Integration with Segment

hashtag
What You'll Need

Backbench account - Sign Uparrow-up-right, the personal account will always remain free to use.

Segment account - Segment is trusted by thousands of companies as their Customer Data Platform. Collect user data with one API and send it to hundreds of tools or a data.

hashtag
Prerequisites for the app

  1. Sign In to Backbench account.

  2. Select +, in the upper right corner to create a Bench. For example, say "bench_one" and select CREATE or hit Enter.

hashtag
Frontend

  1. Now go to File Manager and create a new file index.html.

  2. We are going to build Google Web SignIn to track users.

  3. Paste the following code in the index.html to create google web SignIn.

<html lang="en">
  <head>
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="google-signin-client_id">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  </head>
  <body>
    <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
    <script>
      function onSignIn(googleUser) {
        // Useful data for your client-side scripts:
        var profile = googleUser.getBasicProfile();
        var xhttp = new XMLHttpRequest();
        var id = profile.getId();
        var name = profile.getName();
        var email = profile.getEmail();
        var details = {
            id: id.toString(),
            name: name.toString(),
            email: email.toString()
        }
        console.log("det:"+JSON.stringify(details));
        xhttp.open("POST", "URL of Endpoint comes here", true);
        xhttp.send(JSON.stringify(details));
        console.log("ID: " + profile.getId()); // Don't send this directly to your server!
        console.log('Full Name: ' + profile.getName());
        console.log('Given Name: ' + profile.getGivenName());
        console.log('Family Name: ' + profile.getFamilyName());
        console.log("Image URL: " + profile.getImageUrl());
        console.log("Email: " + profile.getEmail());

        // The ID token you need to pass to your backend:
        var id_token = googleUser.getAuthResponse().id_token;
        console.log("ID Token: " + id_token);
      };
    </script>
    <a href="#" onclick="signOut();">Sign out</a>
    <script>
      function signOut() {
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(function () {
          console.log('User signed out.');
        });
      }
    </script>
  </body>
</html>

hashtag
Backend

hashtag
Identify method

Identify lets you tie a user to their actions and record traits about them. It includes a unique User ID and any optional traits you know about them.

We recommend calling identify a single time when the user’s account is first created, and only identifying again later when their traits change.

hashtag
Track method

Track lets you record the actions your users perform. Every action triggers what we call an “event”, which can also have associated properties.

You’ll want to track events that are indicators of success for your site, like Signed Up, Item Purchased or Article Bookmarked.

hashtag
Page method

The page method lets you record page views on your website, along with optional extra information about the page being viewed.

If you’re using our client-side setup in combination with the Node.js library, page calls are already tracked for you by default. However, if you want to record your own page views manually and aren’t using our client-side library, read on!

hashtag
Group method

Group lets you associate an identified user with a group. A group could be a company, organisation, account, project or team! It also lets you record custom traits about the group, like industry or number of employees.

This is useful for tools like Intercom, Preact and Totango, as it ties the user to a group of other users.

PreviousIntegration with MailchimpNextSending Emails with SendGrid

Last updated