# HTML snippet

To start tracking events just add following snippet to the `<head>` section of your website:

:::tip
In all examples below, replace `your-jitsu-domain.com` with your Jitsu installation domain.

Jitsu Cloud users may find domain in the top-right corner of Site's **Setup Instruction** page or
attach custom domain for a specific Site and use it instead.
:::

```html
<script async src="https://your-jitsu-domain.com/p.js"></script>
```

## Configuration

You can configure Jitsu by adding `data-*` attributes to the
script tag. Example:

```html
<script async src="https://your-jitsu-domain.com/p.js" data-user-id="X" data-write-key="123456"></script>
```

List of available configuration options:

| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | Description                                                                                                                                                                                                        |
|------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `data-user-id`                                                                                                                                       | Set's user id. Equivalent of calling `jitsu.identify(userId)`                                                                                                                                                      |
| `data-onload`                                                                                                                                        | Function to call after the script has loaded. Function should be previously defined in `window`                                                                                                                    |
| `data-init-only`                                                                                                                                     | By default, the script will send a `page` event. Set this to `true` to just initialize the library. You still will be able to send events manually by setting `data-onload` hook                                   |
| `data-write-key`                                                                                                                                     | Browser Write Key configured on Jitsu Site entity. If no Browser Write Key is added for Site entity, Site ID value can be used a Write Key. On Jitsu.Cloud can be omitted if Site has explicitly mapped domain name |

For the full list of available options, see [JavaScript Reference](/docs/sending-data/js-reference) section

Alternatively you can define <code>window.jitsuConfig</code> object before inserting the snippet. Properties
of the object be same as data attributes, but camel cased and without <code>data-</code> prefix:

```html
<script>
    window.jitsuConfig = {
        "userId": "...",
        "onload": "...",
        "initOnly": "..."
        "writeKey": "..."
    }
</script>
<script async src="https://your-jitsu-domain.com/p.js"></script>
```

### Google Tag Manager

Google Tag Manager [strips `data-` attributes](https://support.google.com/tagmanager/thread/18040523/what-attributes-are-preserved-on-custom-html-tags-and-what-attributes-are-stripped?hl=en) from the script tag. To configure Jitsu in GTM, you can use
following snippet:

```html

<script>
  var script = document.createElement("script");
  script.async = true;
  script.src = "https://your-jitsu-domain.com/p.js";
  //set data attributes
  script.setAttribute("data-init-only", "true");
  script.setAttribute("data-debug", "true");
  //insert script
  document.head.appendChild(script);
</script>
```


### `onload` hook

You can specify a piece of code that will be executed after the script has loaded. This can be useful if you
want to send additional events or identify user. Example:

```html
<script type="text/javascript">
    window.jitsuLoaded = function (jitsu) {
        jitsu.identify("X", {email: "john.doe@gmail.com"})
        jitsu.track("customEvent", {customParam: Y})
    }
</script>
<script async src="https://your-jitsu-domain.com/p.js" data-onload="jitsuLoaded"></script>
```

### Jitsu Processing Queue

Sometimes you may want to send events to Jitsu when it's not guaranteed that Jitsu is initialized. For that case, 
you can use `window.jitsuQ` object:

```javascript
(window.jitsuQ = window.jitsuQ || []).push(function(jitsu) {
  //send events to Jitsu here
  jitsu.page();
});

```

## Sending Events to Jitsu

`window.jitsu` object implements standard [Analytics.js](https://getanalytics.io/api/) interface. See a full list of methods in [JavaScript Reference](/docs/sending-data/js-reference) section