# Web

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

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

{% hint style="warning" %}
Please ensure that your token is set to "Public" and its roles are limited to the project you're tracking.
{% endhint %}

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

```html
<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.

```html
<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.

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.logsnag.com/sdks/web.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.