Set Up Website Visitor Tracking

Last updated Jul 19th, 2024

Overview

Gain visibility into who is viewing your website, docs, etc.

  1. Install the tracking snippet (required).
  2. Identify known users.
  3. Set up tracking for links sent to contacts. Read more

Step 1: Install the Tracking Snippet

Visit Settings in the Common Room app, navigate to the "Signals and integrations" tab, and select Website visits. Here you can obtain the unique tracking snippet to add to your website.

Directly Insert Tracking Script

Paste the snippet, as shown in the settings page of your room, within the <body> tag of your site. It will load asynchronously, so it will not impact page load speed.

<script>
  (function() {
    if (typeof window === 'undefined') return;
    if (typeof window.signals !== 'undefined') return;
    var script = document.createElement('script');
    script.src = 'https://cdn.cr-relay.com/v1/site/--UNIQUE-CODE--/signals.js';
    script.async = true;
    window.signals = Object.assign(
      [],
      ['page', 'identify', 'form'].reduce(function (acc, method){
        acc[method] = function () {
          signals.push([method, arguments]);
          return signals;
        };
       return acc;
      }, {})
    );
    document.head.appendChild(script);
  })();
</script>

Use Google Tag Manager

  1. Create a new tag of type Custom HTML
  2. Paste the script into the tag
  3. Use the All Pages trigger
  4. Save + and Submit a new version of your workspace

Note: the tracker listens for replaceState and pushState triggers for web visits, so you do not need to add those triggers in GTM.

Insert Tracking into React/NextJS/Gatsby/etc

If necessary, you can put a <script> element in a high-level component and paste the raw JS. Don't include the outer <script> tag twice when pasting code this way. Put this code inside your </body> tag.

<script
  dangerouslySetInnerHTML={{
    __html: TRACKING SNIPPET HERE,
  }}
/>

See Organizations Viewing Your Site!

You should now be able to see organizations visiting your website. Use filters to discover and target those orgs with our suite of website visit signals.

Step 2: Identify Known Users

In order to de-anonymize users who might have visited your website, it's important to be able to associate their anonymous visit information (ex: IP address) with identify information (ex: an email or name). Instrumenting places on your website where this information is available helps create this connection.

If your website accepts form submissions from users (ex: entering emails in order to get access to a case study, a demo-request form, etc), that presents an opportunity to instrument your code to identify users. Or, when your users log into your product is another opportunity to instrument identification code.

For forms that use standard email or name fields, the Common Room SDK will automatically attempt to de-anonymize users. But you can do this explicitly too by adding the following line of code when you have an email available:

window.signals.identify({ email: userEmail })

TIP: Form tools normally provide a way to hook into submit events, even if you don't control the form code yourself. Learn more below.

See Contact-level Website Activity!

Now you should be able to see contacts visiting your websites. To see those contacts, target them using a suite of website visit signals available via filtering. Be sure to use the contact attributes under "Website Visits" to target the contacts directly as opposed to company attributes that target organizations.

Step 3: Link Tracking

Maximize website activity signals by tracking links you send to contacts. Read more.

Advanced Options

Deactivated by Default

If you prefer to stop automatic page tracking and manually identify users and page views add this code to the initialization script. _opts: { autoTracking: false }
Here it is in context...

window.signals = Object.assign([], {
  _opts: { autoTracking: false },
  ...["page", "identify", "form"].reduce((acc, method) => {
    acc[method] = function (...args) {
      signals.push([method, args]);
      return signals;
    };
    return acc;
  }, {}),
});

Manual Page View Events

Manually trigger page view events with window.signals.page() You can optionally pass a full URL into the page function.

Form Submit Listeners

Form service providers and libraries will include a way to hook into a submit and use the data. On the client side, this is via an EventListener in javascript.

Here is a HubSpot example...

window.addEventListener("message", msgHandler);
const msgHandler = (event) => {
  if (event.data.eventName === "onFormSubmitted" && window.signals) {
    const values = event.data.data.submissionValues;
    if (values) {
      window.signals.form({
        email: values.email,
        name: values.firstname.concat(' ', values.lastname),
      });
    }
  }
}

Rather than the identify function, use window.signals.form() to better represent how the data was collected.

Please let us know in Slack if you have a code snippet you think others could use. Thanks!

Troubleshooting

Not Seeing Any Data?

The script that sends data to Common Room might be blocked on your site.

This may be due to strict Content Security Policy (CSP) headers. You will need to ensure to green-light the following hosts...

connect-src 'self' https://api.cr-relay.com/;
script-src-elem 'self' 'unsafe-inline' https://cdn.cr-relay.com/

You may be blocked by using a Consent Management Platform to coordinate tracking. You will need to configure permissions.

Didn't find your answer?Get in touch· Visit ourhelp center