Connect website activity to real people when they share their email address on your site

One of the most important jobs of Quotient's on-site tracking is to identify visitors, so that you can attribute page views, sessions, and other events to real people. Identifying visitors lets you measure, in a much more granular way, which parts of your audience your marketing resonates with. Using flows, it also lets you personalize each person's journey based on their activity.

There are fundamentally two ways a visitor can reveal their identity to you:

1. Implicitly, by clicking a link that was sent specifically to them. If someone receives an email and clicks a link to your site, Quotient knows who they are, because the link carries a qt_person_id tag unique to that person.
2. Explicitly, by entering their email address somewhere on your website.

This article focuses on the second way, because the first is handled for you. Quotient's tracking tag detects identity from URL tags automatically, with no extra work on your part.

People identify themselves explicitly in a variety of ways, such as:

1. Booking a demo
2. Logging into your product
3. Signing up for a newsletter

Each of these works slightly differently. Below, we'll walk through how to handle each one with Quotient.

The examples assume you've already installed the tracking tag and have a client from QuotientClient.init(). In a React app, get the same client from the useQuotient() hook in @quotientjs/react.

Announcing a Visitor's Identity

In most cases, including demo bookings and logins, you'll use client.audience.people.identify() to announce a visitor's identity. Call it any time someone enters their email address on your site.

identify() has only one required argument, emailAddress:

await client.audience.people.identify({
  emailAddress: "jane@example.com",
});

You can optionally include more information about the person, such as their name, phone number, or the lists they should belong to. Here's how a demo request form might call it after the form is submitted:

async function handleDemoRequest(formData) {
  await client.audience.people.identify({
    emailAddress: formData.email,
    firstName: formData.firstName,
    lastName: formData.lastName,
    mainPhoneNumber: formData.phone,
    lists: ["people-who-booked-a-demo"],
  });
}

identify() does four things:

1. If no person exists with that email address, it creates one.
2. If one does exist, it updates that person's record with the new data.
3. If a person was newly created, it records a personCreated event, which feeds the People Created metric. This event carries the visitor's attribution, so you can break the metric down by campaign, by source, and so on.
4. It stores the person's ID in the browser, whether they were newly created or not, so that all future activity on that device is attributed to them.

For the full list of fields, see the Audience API reference.

Email Sign-Up

Signing up for email is another way for a visitor to identify themselves, but it carries special meaning in Quotient because it changes whether that person receives your emails. For that reason, it has its own method in the Quotient JavaScript SDK: client.audience.people.subscribeToEmail().

Here's a newsletter sign-up form that uses it:

<form id="newsletter-form">
  <input type="email" name="email" placeholder="you@example.com" required />
  <button type="submit">Subscribe</button>
</form>

<script>
  const form = document.getElementById("newsletter-form");

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const emailAddress = new FormData(form).get("email");

    await client.audience.people.subscribeToEmail({ emailAddress });

    form.innerHTML = "<p>Thanks for subscribing!</p>";
  });
</script>

This method does everything identify() does, with two extra effects:

1. It sets the person's email subscription status to Subscribed, so they start receiving your email broadcasts. If someone has already unsubscribed, their status is left alone. Signing up again never overrides an explicit unsubscribe.
2. It records an emailSubscribe event, which powers the Email Subscriptions metric, so you can measure how many new email subscribers your marketing drove.

Frequently Asked Questions

Q: Should this code run in the browser or on the server?

A: If possible, in the browser, because Quotient's tracking tag needs to store the person's identity there. If you call identify() from your server, it will still create or update the person, but it can't save their identity in the browser, so their future activity won't be attributed to them. If your conversion must be recorded on the server, see Server-Side Conversions.

Q: What if the visitor clears their cookies?

A: Their identity is erased from that browser, and any future activity there will no longer be attributed to them until they identify themselves again. This is intentional and respects their privacy.

Q: Is it okay to call identify() over and over again?

A: Yes. Calling identify() again for the same person just updates their record, so it's safe to call as often as you need. For example, you might call it every time your website's login provider loads, since you may not be able to tell a first-time login apart from a returning user.

Next Steps