Getting Started

Step 1

Download our telemetry script, save it as sefinobundled.js and put it somewhere your webpages can access (we chose ./assets/js/sefinobundled.js).

Step 2

Copy the code below and insert it before the end of the </header> tag of every page you want data to be collected from.

HTML

Step 3

Navigate to the webpages you added the script to. Check the console for 'First time visitor, nonhosted, uuidValue:'. If you don't see this string:
  1. View Source to check that the code in Step 2 was added correctly to the webpage
  2. When viewing source, click on the link to the telemetry script to see if the script is accessible

Step 4

Navigate to the dashboard to verify that data appears (for example, the Visitors count should increment).

Step 5

For additional help, navigate to our demo page, view source, and search for "Sefino" for live examples of how to incorporate implement our telemetry.

Optional: Setting up Scroll Depth Analytics

Step 1

If you don't want scroll depth telemetry, set listOfViewPortChecks to an empty array. This is the default if you followed 'Getting Started'

Step 2

If you want scroll depth telemetry, each element in the array listOfViewPortChecks must be a uniquely named string. Each string must exist in the website DOM as the id value of one and only one tag. The scroll depth telemetry will fire when the tag with the id is in the viewport. Pick a tag that is a text tag (eg. H1, H2, H3, P) or a button.

HTML 
var listOfViewPortChecks = ['viewIndex1','viewIndex2'];
HTML 

<section class="bg-white border-b py-8">
  <div class="container max-w-5xl mx-auto m-8">
    <h1 id='viewIndex1' class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
      Section 1 Title
    </h1>
    ...
  </div>
</section>
<section class="bg-white border-b py-8">
  <div class="container max-w-5xl mx-auto m-8">
    <h1 id='viewIndex2' class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
      Section 2 Title
    </h1>
    ...
  </div>
</section>

Optional: Tracking Custom Events

Step 1

If you want to fire and track a custom telemetry event, pick a name that the event will be called (e.g. leftSignUpButtonClicked) and call triggerTelemetry('root', '<customTelemetryName>') If you want an object attached to the fired telemetry event, include the JSON object in the call: triggerTelemetry('root', '<customTelemetryName>', <objectVariableName>)

For example, to fire an event named 'leftSignUpButtonClicked' when the left signup button is clicked, the button will be

HTML 
<button onclick="triggerTelemetry('root', 'leftSignUpButtonClicked')">
  Sign Up
</button>

For example, to fire an event named 'dataSubmitted' with custom data, the javascript call will be

JS 
var foodPrefs = {fruitPrefs: ['apple', 'orange', 'kiwi'], veggiePrefs: ['broccoli', 'asparagus', 'spinach']}
triggerTelemetry('root', 'dataSubmitted', foodPrefs)

Optional: Collecting Waitlists

Step 1

If you want to collect a waitlist, we recommend specifically using the custom telemetry name of 'submitWaitlist' and an object with a single property of 'waitlistEmail' to leverage our Waitlist Email table on your dashboard. For example:

HTML 
<input class='w-full mt-2' type="email" id="waitlistEmail" placeholder="name@domain.com" />
<button id="waitlistSubmitButton" class="main-btn gradient-btn mt-2 mr-4" onclick="submitWaitlist()">Join waitlist</button>
JS 
submitWaitlist = async function(){
  var email = document.getElementById('waitlistEmail').value

  var telemetryObj = {'waitlistEmail': email}
  triggerTelemetry('root', 'submitWaitlist', telemetryObj)
}

Optional: Collecting 'Contact Us' Form Messages

Step 1

If you want to collect messages through a 'Contact Us' form, we recommend specifically using the custom telemetry name of 'submitContact' and an object with properties that only contain string values to leverage our Message table on your dashboard. For example:

HTML 
<form id="contactForm" class="max-w-lg mx-auto">
  <div class="mb-6">
      <input type="email" id="contactEmail" name="contactEmail" placeholder="Your Email"
          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" required>
  </div>
  <div class="mb-6">
      <textarea id="contactMessage" name="contactMessage" rows="5" placeholder="Your Message"
          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" required></textarea>
  </div>
  <button id='viewIndex2' type="submit" onclick="submitContact()"
      class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Submit</button>
</form>
JS 
submitContact = async function () {

  event.preventDefault();

  var emailField = document.getElementById('contactEmail')
  var messageField = document.getElementById('contactMessage')

  if(!emailField.checkValidity()){
      emailField.reportValidity()
  }
  else if(!messageField.checkValidity()){
      messageField.reportValidity()
  }
  else{
      var email = document.getElementById('contactEmail').value
      var msg = document.getElementById('contactMessage').value

      var telemetryObj = {'contactEmail':email, 'contactMessage':msg}
      triggerTelemetry('root', 'submitContact', telemetryObj)
  }
}