Skip to main content

Web Event Tracking via The Surfside Analytics Tag

Overview​

The Surfside Analytics Tag is a lightweight JavaScript snippet designed to track and measure user interactions on your website. By embedding this tag, you can capture valuable data such as page views, user behavior, and engagement metrics, enabling deeper insights into how visitors interact with your site.

This guide provides step-by-step instructions for integrating the Surfside Analytics tag into your website, ensuring seamless tracking and data collection.

What data does the Surfside Analytics Tag capture?​

When you add this tag to your website, you send a pageview for each page your users visit. Google Analytics processes this data and can infer a great deal of information including:

  • The total time a user spends on your site.
  • The time a user spends on each page and in what order those pages were visited.
  • What internal links were clicked (based on the URL of the next pageview).

In addition: The IP address, user agent string, and initial page inspection that edge.js performs when creating a new tracker object is used to determine things like:

  • The geographic location of the user.
  • What browser and operating system are being used.
  • Screen size and whether Flash or Java is installed.
  • The referring site.

The Surfside Analytics Tag Code Snippet​

<!-- Surfside Analytics -->
<script>
;(function(s,u,r,f,i,n,g){if(!s[i]){s.surfContext=s.surfContext||[];
s.surfContext.push(i);s[i]=function(){(s[i].q=s[i].q||[]).push(arguments)
};s[i].q=s[i].q||[];n=u.createElement(r);g=u.getElementsByTagName(r)[0];n.async=1;
n.src=f;g.parentNode.insertBefore(n,g)}}(window,document,"script","//cdn.surfside.io/sdk/1.0.0/edge.js","surf"));

surf('newTracker', 'digital', '//col.surfside.io', {
    appId: 'digital',
    cookieName: 'surf',
    discoverRootDomain: true,
    cookieSameSite: 'Lax',
});

surf('source:digital', {
    accountId: 'XXXXX',
    sourceId: 'XXXXX',
});

// Do not include these lines if you are a multi-location business
surf('setLocation:digital', {
    id: '[[Unique Location ID]]',
    ... // other location values, see implementation guides
});

surf('enableActivityTracking', {
    minimumVisitLength: 30,
    heartbeatDelay: 10,
});

surf('enableLinkClickTracking')

surf('trackPageView')
</script>
<!-- End Surfside Analytics -->

The above code does the following:

  1. Creates a <script> element to asynchronously download the edge.js JavaScript library from https://cdn.surfside.io/sdk/1.0.0/edge.js.

  2. Initializes a global surf() command queue, enabling commands to be scheduled and executed once the edge.js library is loaded and ready.

  3. Adds a command to the surf() command queue to create a new tracker object using the specified accountId and sourceId parameters.

  4. Defines the retail/store location for events by adding a surf('setLocation') command to the queue (only include this if your website is not a multi-location business).

  5. Enables activity tracking by using the surf('enableActivityTracking') command, which monitors user engagement based on the minimum time spent on the site (minimumVisitLength) and sends periodic heartbeat signals (heartbeatDelay).

  6. Activates link click tracking using the surf('enableLinkClickTracking') command, capturing user interactions with links on the website.

  7. Sends a pageview event for the current page using the surf('trackPageView') command.

You should not change the code that loads the edge.js library or initializes the surf() command queue function.