JavaScript Tag

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 if unsure which <JAVASCRIPT_TAG_URL> to use for your system.

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

Using the Tag#

Tracking#

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.

info

For more information about supported events and their required schemas see the Complete list of events by categories.

note

Any provided information not part of the schema of the specific event type will be ignored. If you need to send additional information not part of a certain event type schema, review the customFields field which allows you to pass arbitrary data albeit with restricted capabilities to interact with the rest of system. If you need to track an event whose type doesn't fit any of the categories, consider using a Custom event as a last resource.

Activation#

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

Required parameters:

Optional parameters:

  • user: An object containing:
  • 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.

note

Having a reactivationDelay is useful for first-time visitors and when the initial activation is triggered together with other tracking events. These tracking events update the user's profile which may cause the second request to activate more up-to-date information about the user.

CookieSync#

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

Required parameters:

Optional parameters:

  • uid: The string ID of the user in the 3rd Party Cookie provider.

All other received data will be ignored.

Match#

pcdp("event", "match", {
"providerId": "web",
"user": {
"type": "email_sha256",
"id": "23463b99b62a72f26ed677cc556c44e8"
}
});

Required parameters:

  • providerId: The string ID of the Match Provider;
  • user: An object containing:
    • type: the type of the user identifier
    • id: the id of the user

Alternatively, you can match multiple user IDs in the same match request by defining user as an array of objects with the schema defined above. Example: user: [{"type": "email_sha256", "id": "id1"}, {"type": "crm", "id": "id2"}].

Optional parameters:

All other received data will be ignored.

Observe#

If you have a datalayer variable to which you push your e-commerce events, such as with Google's Enhanced Ecommerce, 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:

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. Example (the used functions would be defined by you):

    {
    pageView: function(obj) {
    pcdp("event", "track", {
    "clientId": "velocidi",
    "siteId": "velocidi.com",
    "type": "pageView"
    });
    },
    checkout: function(obj) {
    var checkoutEvent = my_extract_checkout_data(obj);
    my_send_event(checkoutEvent);
    },
    purchase: function(obj) {
    var purchaseEvent = my_extract_purchase_data(obj);
    my_send_event(purchaseEvent);
    }
    }

Optional parameters:

  • eventVariableName: The name of the variable where the event name is defined. When a push is made to the dataLayer, this variable will define which field to extract to serve as a key to our user-defined callback functions in observerConfig. If undefined, this defaults to the event field, according to the enhanced e-commerce documentation. If you are using a different schema, with a different variable name to detail which is the type of the event, you should set it here.

A small example of how to use this function to send Product Impression events to the CDP once a product impression is pushed to the data layer follows:

var observerConfig = {
view_item: function(obj) {
var productsArray = [];
var prods = obj.ecommerce.items;
for (i = 0; i < prods.length; i++){
var product = {
"id": prods[i].item_id,
"total": prods[i].price,
"name": prods[i].name,
"currency": "EUR"
}
productsArray.push(product);
}
pcdp("event", "track", {
"clientId": "c1",
"siteId": "s1",
"type": "productImpression",
"products": productsArray
});
}
};
pcdp(
"observe",
window.dataLayer,
observerConfig
)
note

If the tag is included more than once on the page, all the objects passed in the observerConfig parameter will be considered. This means that if you invoke it twice with the same key in this object, with different functions, both functions will be triggered once an event with that name is pushed to the data layer.

info

For more information about supported events and their required schemas see the Complete list of events by categories.

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:

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

// Set default parameters for the 'track' event type
pcdp("set", "track", {
"clientId": "foo",
"siteId": "bar"
});
pcdp("event", "track", {
// "clientId": "foo", // No need to include as it will already be included
// "siteId": "bar" // No need to include as it will already be included
"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", {
// providerId: "foo", // No need to include as it will already be included
"user": {
"type": "email_sha256",
"id": "23463b99b62a72f26ed677cc556c44e8"
}
});
// Set default parameters for the 'activation' event type
pcdp("set", "activation", {
"containerId": "foo"
});
pcdp("event", "activation", {
// "configId": "foo" // No need to include as it will already be included
});
// Set default parameters for the 'cookiesync' event type
pcdp("set", "cookiesync", {
"cookiesyncId": "foo"
});
pcdp("event", "cookiesync", {
// "cookiesyncId": "foo", // No need to include as it will already be included
"uid": "694cff55-814b-46c3-b95f-89dbab0f53fc"
});
Last updated on