# JavaScript Event Tracking

Track events that happen on your app's frontend or on your site using the Encharge Javascript tracking code. 

The Javascript tracking code will automatically record pageviews.

Make sure you have installed the Encharge JS snippet by following [the instructions](https://app.encharge.io/settings/site-tracking) in the app.

If there is a chance that the Encharge JS snippet will be run after code that calls it, add the following line of code before calling any of its methods:

```
if (!window.EncTracking) window.EncTracking={queue:[],track:function(e){this.queue.push({type:"track",props:e})},identify:function(e){this.queue.push({type:"identify",props:e})}};
```

### Identify

The `identify` method can be used to:

* Uniquely identify the current person.
* Enrich his or her profile with additional traits

We recommend calling `identify` on the following events:

* After a user registers
* After a user logs in
* When a user updates their info (for example changes his plan or updates his address)

```javascript
EncTracking.identify({ 
  email: "emily.doe@gmail.com", 
  userId: "123"
});
```

{% hint style="info" %}
You can pass comma-separated `tags` property to the identify method to easily add tags to the user. For example: `EncTracking.identify({ email: "emily.doe@gmail.com", tags: "tag1, tag2"});`
{% endhint %}

###

### Track

Use `track` method to record actions that users take in your app.

{% hint style="info" %}
Please note that pageviews are tracked automatically, so you don't need to emit events for them.
{% endhint %}

The `track` method uses the same request body as our [Ingest API](https://docs.encharge.io/getting-started/connecting-your-app-to-encharge/ingest-api).

For example, to log that one of your users sent a message, you'd use the following:

```javascript
// Make sure this code is placed after the Encharge Tracking JS snippet
window.EncTracking.track(
  {
    // Name of this event (required)
    "name": "Sent Message", 
    // Properties of this event (optional)
    "properties": { 
      "numberOfRecipients": 12
    },
    // Fields for the current user performing the event (required)
    "user": { 
      // `email` or `userId` is required to uniquely identify this person
      "email": "mscott@dundermifflin.com", 
      // Any other fields will be added to this person.
      "name": "Michael Scott", 
    }
  }
);
```

{% hint style="info" %}
The Encharge Javascript tracking code sends these events to the Encharge Ingest API, and is subject to the same terms.
{% endhint %}

{% hint style="success" %}
You can omit calling the `identify` method by sending the user traits in the `user` property of the `track` method (see the example above).
{% endhint %}

###

### Single-page app Pageviews 

Usually, the Encharge JS snippet tracks pageviews automatically. However, in some single-page apps, you might need to explicitly trigger pageview. You can do so as follows:

```javascript
// Make sure this code is called after the Encharge Tracking JS snippet has loaded
window.EncTracking.client.recordEvent('pageviews', 
  { 
    "page": { 
      "url": "https://google.com", 
      // Page title is optional
      "title": "New Page"
    }
  }
)

```

### Get Anonymous ID

If you need the Anonymous user ID created by Encharge, use the `EncTracking.getId()` method.

###

## Opt-In and Opt-Out

Opt-In and Opt-Out are two separate concepts for the Event Tracking.

### Opt-Out

When Opt-Out is enabled, it means that the Event Tracking script **will not track any events** for the current user, including form submission and any manually triggered event such as `identify` and `track` calls.

If you'd like to not track specific users, call the following snippet before the Encharge tracking has been loaded. 

```
if (!window.EncTracking) window.EncTracking = {};
window.EncTracking.explicitOptOut = true;
```

### Opt-In

When the user explicitly (or implicitly according to your [Site Tracking](https://app.encharge.io/settings/site-tracking) settings) enables Opt-In, the events that they perform on your site will be tracked. This includes pageviews, form submissions, manual `identify` and `track` calls.

However, if Opt-In is not enabled, the Event Tracking will still record form submissions, and manual `identify` and `track` calls. However, these events will be recorded without placing a cookie or using local storage on the user's computer. Also, the user's IP address will not be passed to the Encharge backend.

You can enable Opt-In by disabling "Wait for opt-in before tracking" when configuring your tracking script in [Site Tracking](https://app.encharge.io/settings/site-tracking). Alternatively, you can use the following code:

<pre><code>if (!window.EncTracking) {
<strong>    window.EncTracking = {};
</strong>    window.EncTracking.hasOptedIn = true;
} else {
    window.EncTracking.optIn();
}
</code></pre>

###

### Using custom consent prompt

If you'd like to use your own consent mechanism, you need to configure your tracking script in [Site Tracking](https://app.encharge.io/settings/site-tracking) like so:

![](https://2759997962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LodVJfna0wAVdInqrl1%2F-MZrJ82aHq2U2aqqwBPP%2F-MZrJrJmC3r6_0KaGBi4%2Fimage.png?alt=media\&token=3a3ad7f3-daa5-403b-a386-cd1ee856f906)

Then, to enable tracking for the current visitor, call the following Javascript code from your cookie consent solution:

```
window.EncTracking.optIn();
```

## Disable some tracking functionality

### Disable form tracking

The Encharge Tracking code automatically captures fields named "email" in any forms on your site. If you don't want to create people from all forms on your site, you can disable ALL form tracking by calling the following snippet before the Encharge tracking has been loaded.&#x20;

```
if (!window.EncTracking) window.EncTracking = {};
window.EncTracking.recordForms = false;
```

###

### Disable pageview tracking

The Encharge Tracking code automatically records pageviews. You can disable all pageviews tracking by calling the following snippet before the Encharge tracking has been loaded.&#x20;

```
if (!window.EncTracking) window.EncTracking = {};
window.EncTracking.recordPageViews = false;
```

###

### Track pageviews on page open

The Encharge Tracking code automatically records pageviews when the user leaves the page. This is done to track time spent on the page. In certain cases, it might be beneficial to track pageviews right after the page has been opened. You can do so by using the following snippet before the Encharge tracking has been loaded:&#x20;

```
if (!window.EncTracking) window.EncTracking = {};
window.EncTracking.recordPageViewsOnExit = false;
```

### Clear cookies

If you'd like to clear all cookies for the current user (e.g. upon log out)use the following call.

```
if (!window.EncTracking) window.EncTracking = {};
window.EncTracking.clearCookies();
```

###