## 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. Refer to [Event Collection](https://docs.audience.kevel.com/platform-guides/js-tag#including-the-tag) if unsure which `<JAVASCRIPT_TAG_URL>` to use for your system.

```html
<script async src="<JAVASCRIPT_TAG_URL>"></script>

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

## Using the Tag

### Tracking

```javascript
pcdp("event", "track", {
  "clientId": "velocidi",
  "siteId": "velocidi.com",
  "type": "pageView",
  "title": "My page",
  "pageType": "homepage",
  "category": "Shopping"
});
```

Recommended parameters:

- **clientId**: The client id
- **siteId**: The site id
- **type**: The event type

The above parameters are recommended, but the data field can be composed by any number of attributes.

It is possible to explicitly provide an user ID using the following optional parameters:
- **user**: An object containing: (if defined, it will override the user id sent automatically via cookie)
  - **type**: the type of the [User Identifier](https://docs.audience.kevel.com/collect/user-ids#default-id-types)
  - **id**: the id of the user

```javascript
pcdp("event", "track", {
  "clientId": "velocidi",
  "siteId": "velocidi.com",
  "type": "pageView",
  "title": "My page",
  "pageType": "homepage",
  "category": "Shopping",
  "user": {
    "type": "crm",
    "id": "12345abc"
  }
});
```

For more information about supported events and their required schemas see the [Complete list of events by categories](https://docs.audience.kevel.com/collect/events).

### Activation

```javascript
pcdp("event", "activation", {
  "configId": "web"
});
```

Required parameters:

- **configId**: The string ID of the [Activation Trigger](https://docs.audience.kevel.com/activations/triggers).

Optional parameters:
- **user**: An object containing:
  - **type**: the type of the [User Identifier](https://docs.audience.kevel.com/collect/user-ids#default-id-types)
  - **id**: the id of the user
- **reactivationDelay**: delay (in milliseconds) until the second activation request is sent. If `0`, no second activation request will be executed. Default value is `5000` milliseconds.

All other received data will be ignored.

### CookieSync

```javascript
pcdp("event", "cookiesync", {
  "cookiesyncId": "cs1"
});
```

Required parameters:
- **cookiesyncId**: The string ID of the [Cookiesync](https://docs.audience.kevel.com/collect/cookiesync);

Optional parameters:
- **uid**: The string ID of the user in the 3rd Party Cookie provider.

### Match

```javascript
pcdp("event", "match", {
  "providerId": "web",
  "user": {
    "type": "email_sha256",
    "id": "d1df1acbdc99f3d0f80dc298471b0a2a01124e9371ea9e707805b19f4ffe8b6e"
  }
});
```

Required parameters:
- **providerId**: The string ID of the [Match Provider](https://docs.audience.kevel.com/collect/matches#match-providers);
- **user**: An object containing:
  - **type**: the type of the user identifier
  - **id**: the id of the user

Optional parameters:
- **configId**: The string ID of the [Activation Trigger](https://docs.audience.kevel.com/activations/triggers)
  to be used when _"Allow extra iFrame Activations"_ is enabled for this [Match Provider](https://docs.audience.kevel.com/collect/matches#match-providers).

### Observe

If you have a `datalayer` variable to which you push your e-commerce events, such as with [Google's Enhanced Ecommerce](https://developers.google.com/tag-manager/ecommerce-ga4), you can leverage the `observe` method. The `observe` method allows you to define a function to be executed for a given event type. This enables using a single tag to be included in all pages, that will react appropriately based on the events pushed to the `datalayer`.

The API for using the method is as follows:

```javascript
pcdp(
  "observe",
  dataLayer,
  observerConfig,
  eventVariableName)
```

Required parameters:
- **dataLayer**: The `datalayer` variable to observe, into which the events are being pushed.
- **observerConfig**: The object with the configurations the observer uses. The keys are the event names and the values are the functions which will be triggered for each of these events. These functions receive the pushed event as a parameter.

Optional parameters:
- **eventVariableName**: The name of the variable where the event name is defined.

## Advanced Usage

### Configuring the Tag

The tag comes pre-configured with the correct hosts for your system as well if they're enabled based on your system configuration. However, you can override these values (E.g. use a host alias) in the following way:

```javascript
  // Overriding the hosts and whether they're enabled
  pcdp("config", "track", {
    "host": "track.override.com",
    "enabled": false
  });

pcdp("config", "match", {
    "host": "match.override.com",
    "enabled": true
  });

pcdp("config", "activation", {
    "host": "activation.override.com",
    "enabled": false,
    "reactivationDelay": 1000
  });

pcdp("config", "cookiesync", {
    "host": "cookiesync.override.com",
    "enabled": true
  });
```

### Setting Default Data Attributes for Each Event Type

Using the set action, the tag enables configuring default data attributes to be sent for all events of a specific type.

```javascript
  // Set default parameters for the 'track' event type
  pcdp("set", "track", {
    "clientId": "foo",
    "siteId": "bar"
  });

pcdp("event", "track", {
    "type": "pageView",
    "title": "My page",
    "pageType": "homepage",
    "category": "Shopping"
  });

// Set default parameters for the 'match' event type
  pcdp("set", "match", {
    "providerId": "foo"
  });

pcdp("event", "match", {
    "user": {
      "type": "email_sha256",
      "id": "d1df1acbdc99f3d0f80dc298471b0a2a01124e9371ea9e707805b19f4ffe8b6e"
    }
  });

// Set default parameters for the 'activation' event type
  pcdp("set", "activation", {
    "containerId": "foo"
  });

pcdp("event", "activation", {
  });

// Set default parameters for the 'cookiesync' event type
  pcdp("set", "cookiesync", {
    "cookiesyncId": "foo"
  });

pcdp("event", "cookiesync", {
    "uid": "694cff55-814b-46c3-b95f-89dbab0f53fc"
  });
```