We made it easier to integrate LogSnag into your applications.

Ever since we launched LogSnag, one of our core benchmarks has been to reduce the time it takes to integrate LogSnag into your applications. We have been working hard to make this process as easy as possible. Today, we are excited to announce an even easier way to integrate LogSnag into your web applications.

Just under a minute

With our new web integration, we aimed to make this process as fast as possible, you read that right, just under a minute. Let's see how it works.

Step 1: Add the script to your page

<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>

Step 2: Set user id

Now that you have added the script to your project, the last step is to set the user id. This is required, so we can identify the user who is using your application.

<script>
  // set user id (required for tracking)
  window.ls("setUserId", "<SOME_USER_ID>");
</script>

That's it! Now, LogSnag will automatically track user sessions, it will generate user profiles, and you will see how your users are using your application. In addition, you will get all the important information that you need, such as user acquisition, activation, retention, and more.

Tracking custom events?

Ah, yes, we've made that easier too! Let's see how you can track a user upgrading their plan.

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

That's it! It's that simple. Now, whenever a user clicks on the button, we will track the event. You can use these events to generate funnels, charts, and a lot more.

What about custom properties?

You can also add more information to your events. Let's see how we customize the channel name, and add the plan name to the event, and also use a custom tag. Remember, the only required property is data-event, everything else is optional.

<button
  data-event="Upgraded Plan"
  data-channel="billing"
  data-icon=":moneybag:"
  data-tag-plan="Pro"
  data-tag-period="Monthly"
  data-tag-price="9.99"
>
  Upgrade to Pro
</button>

What's next?

This is just the first iteration of our web integration, and we already have a lot of ideas on how to make it even better. We would love to hear your feedback, and if you have any ideas on how we can improve it, please let us know.