On this page

**Client-side collection** uses first-party tags in the user’s browser to capture interactions as they happen, ideal for real-time personalization.

## Via JavaScript Tag

This method provides the most flexible approach for tracking events and it is the preferred method. Its main use case is to capture user interactions with the E-commerce website. The event channels expected to be collected via this method are: [Web](https://docs.audience.kevel.com/collect/events#web) and [E-Commerce](https://docs.audience.kevel.com/collect/events#e-commerce).

### Including the Tag

In order to use the tag in a site, the following snippet is the minimum piece of code that should be included on the page. It should be added as close to the opening `<head>` tag as possible. This snippet only needs to be included once per page.

```html
<script async src="https://cdn.cdp.<WEBSITE_DOMAIN>/pcdp_1.0.js"></script>

<script>
  window.pcdpLayer = window.pcdpLayer || [];
  window.pcdp = function(){pcdpLayer.push(arguments)};
</script>
```

Don't forget to change the URL.

Since Kevel Audience provides a first-party system for each client, each client must include the system-tailored script tag from their domain. The URL should be replaced with your system endpoint. This applies to all interactions.

For standard installations, a client whose website is at `example.com` would use the following URL: `https://cdn.cdp.example.com/pcdp_1.0.js`.

For a detailed JavaScript tag API see [JavaScript tag](https://docs.audience.kevel.com/platform-guides/js-tag).

### Using the Tag

Once the tag has been included, you can begin collecting user interactions with your site by calling the `pcdp` function and specifying the required parameters for each event type.

```html
<script>
  window.pcdpLayer = window.pcdpLayer || [];
  window.pcdp = function(){pcdpLayer.push(arguments)};
  pcdp("event", "track", {
    type: "pageView",
    ... // See required parameters for each event type
  })
</script>
```

For this example, you can see its required parameters in the [Page View](https://docs.audience.kevel.com/collect/events/pageView) details page. For more information about supported events and their details see the [Complete list of events by categories](https://docs.audience.kevel.com/collect/events).

## Via Image (Pixel) Interface

This interface does not require JavaScript and returns a 1x1px transparent gif image (pixel) which you can render anywhere on the page and track the user. It accepts the same parameters as the JavaScript tag, URL-encoded, as GET query parameters. Both HTTP and HTTPS are supported.

```html
<img
  src="https://tr.cdp.<WEBSITE_DOMAIN>/events/pixel.gif?type=adView&clientId=<CLIENT_ID>&siteId=<SITE_ID>&campaignId=<CAMPAIGN_ID>&source=<SOURCE>"
  style="display: none; visibility: hidden; border: 0;"
  alt="" width="0" height="0" />
```

For this example, you can see its required parameters in the [Ad View](https://docs.audience.kevel.com/collect/events/adView) details page.

## Via Click-Through Interface

This interface is used to capture clicks before directing browsers to the original destination URL. It can be used for tracking clicks on display banners, search ads, e-mails, and any other type of click-through.

```none
https://tr.cdp.<WEBSITE_DOMAIN>/events/click?type=adClick&clientId=<CLIENT_ID>&siteId=<SITE_ID>&<OTHER_PARAMETERS...>&ourl=<URL_ENCODED_DESTINATION_URL>
```

Please note that this interface requires you to URL-encode all parameters, including the `ourl`. For when it is not feasible to perform a URL encode on the `ourl`, you can use the next interface (`/events/click0` instead of `/events/click`) where you can provide the non-encoded `ourl` but it must be **the last query parameter** of the URL.

```none
https://tr.cdp.<WEBSITE_DOMAIN>/events/click0?type=adClick&clientId=<CLIENT_ID>&siteId=<SITE_ID>&<OTHER_PARAMETERS...>&ourl=<URL_NOT_ENCODED>
```

For these examples, you can see its required parameters in the [Ad Click](https://docs.audience.kevel.com/collect/events/adClick) details page.