Web SDK

Javascript Web SDK

Library Installation

Add the following script to your index HTML file to install the UserLog JS-Web library. Please be sure to place it into the head section and don't forget to update the API_KEY and PROJECT_NAME values with your own values. You can find your API key in the UserLog dashboard.

<script async="true" src="https://cdn.getuserlog.com/userlog.js"></script>
<script>
  window.userlogq = window.userlogq || [];
  window.userlog = window.userlog || ((...args) => window.userlogq.push(args));
  window.userlog("setConfig", "<API_KEY>", "<PROJECT_NAME>");
</script>

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 following function. For example, you could set the user id to the user's email address. Once you have set the user id, UserLog will start tracking page views and any custom events that you track.

window.userlog("setUserId", "<SOME_USER_ID>");

Simple Event Tracking

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

<button data-event="Button Click" data-channel="registrations">Click me</button>

Custom Event Tracking

You can track custom events by defining a data attribute on any element. For example, let's track when a user clicks a button.

<button
  data-event="New Registration"
  data-user-id="user@example.com"
  data-channel="registrations"
  data-icon="💰"
  data-tag-referrer="example.com"
  data-tag-utm_source="google"
  data-tag-utm_medium="cpc"
>
  Register now
</button>

Event Tracking via Custom-Script

You can track events by defining a custom javascript function. You can add more parameters as needed. For example, let's track custom channel and event. You can also add user_id, description, icon, notify and tags as parameter.

<script>
  // Function to track events via script
  function trackEvent(channel, event) {
    if (typeof window.userlog === "function") {
      window.userlog("track", {
        channel,
        event,
        user_id: "static@example.com",  /* Optional if set on initialization */
        description: "Button clicked by user",
        icon: "✅",
      });
    } else {
      console.error("UserLog is not initialized.");
    }
  }
</script>
            

For example, let's track when a user clicks a link. You can add more parameters as needed and shown above.

<a href="#" onclick="trackEvent('static', 'Link Clicked')">Link Clicked</a>

Tipps

Getting startet with UserLog API is simple. Just add user_id after a user loggs in, and start tracking your events! All logged events will link to the user who set off the event. This will help you understand user behavior. You can track events such as order made, item added to cart, new subscription created, or feedback submitted.