Web

LogSnag Web SDK

Installation

Add the following script tag to your HTML file to install the web library. Please don't forget to update the TOKEN and PROJECT_NAME values with your own values.

<script async="true" src="https://cdn.logsnag.com/web/ls.js"></script>
<script>
  window.lsq = window.lsq || [];
  window.ls = window.ls || ((...args) => window.lsq.push(args));
  window.ls("setConfig", "<TOKEN>", "<PROJECT_NAME>");
</script>

Please ensure that your token is set to "Public" and its roles are limited to the project you're tracking.

Initialization

This library requires a user id to be set before it starts tracking your events. You can set the user id by calling the window.ls("setUserId", "<USER_ID>") function. For example, you could set the user id to the user's email address. Once you've set the user id, LogSnag will start tracking page views and any custom events that you track.

<script>
  window.ls("setUserId", "<SOME_USER_ID>");
</script>

Tracking Events

Tracking custom events is as simple as defining a data attribute on any element. For example, let's track when a user upgrades their plan.

<button
  data-event="Upgraded Plan"
>
  Upgrade to Pro
</button>

Custom Properties

You may add custom properties to your events by defining a data attribute on any element. Remember, the only required property is data-event, everything else is optional.

<button
  data-event="Upgraded Plan"
  data-user-id="user-123"     // optional (optional when set using window.ls)
  data-channel="billing"      // optional (defaults to "events")
  data-icon=":moneybag:"      // optional
  data-tag-plan="Pro"         // optional
  data-tag-period="Monthly"   // optional
  data-tag-price="9.99"       // optional
>
  Upgrade to Pro
</button>