Event Protocol with Atomic
Event Protocol with Atomic
This is for:
DeveloperIn the upcoming Atomic V3 release, the Event Protocol will be the default tracking protocol, as it already is with the Commerce engine.
In the meantime, you can already use EP with Atomic by setting the Engine analyticsMode
property to next
at initialization, such as in the following example.
const searchInterface = document.querySelector('atomic-search-interface');
await searchInterface.initialize({
// ...
analytics: {analyticsMode: 'next', trackingId: 'sports'},
});
// ...
Log events
EP is simpler to use and more streamlined than the legacy Coveo UA protocol. EP doesn’t support custom events, custom data, or custom context. Search events are sent server-side, so you don’t need to log them client-side. Atomic components, when used correctly, also log click events for you.
As a result, you generally won’t need to tinker with search or click events yourself.
We strongly recommend using the |
<script type="module">
import { initializeBindings, resultContext } from "https://static.cloud.coveo.com/atomic/v2/index.esm.js";
import { buildInteractiveResult} from 'https://static.cloud.coveo.com/atomic/v2/headless/headless.esm.js';
class DocumentAuthor extends HTMLElement {
shadow;
result;
initialized = false;
async connectedCallback() {
if (this.initialized) {
return;
}
this.initialized = true;
this.shadow = this.attachShadow({ mode: "closed" });
try {
this.result = await resultContext(this);
this.bindings = await initializeBindings(this);
this.interactiveResult = buildInteractiveResult(this.bindings.engine, {
options: { result: this.result }
});
this.render();
} catch (error) {
console.error(error);
}
}
render() {
const author = this.result.raw["author"] || "anonymous";
this.shadow.innerHTML = `<button>Written by: <b>${author}</b></button>`;
this.shadow.querySelector('button').onclick = () => this.interactiveResult.select();
}
}
window.customElements.define("document-author", DocumentAuthor);
</script>
<!-- ... -->
<atomic-result-template>
<template>
<!-- ... -->
<atomic-result-fields-list>
<atomic-field-condition class="field" if-defined="author">
<document-author></document-author>
</atomic-field-condition>
</atomic-result-fields-list>
</template>
</atomic-result-template>
<!-- ... -->
Retrieve the active result item. | |
Use the buildInteractiveResult function to initialize an InteractiveResult controller. |
|
Let the InteractiveResult controller handle click events for you. |
|
Use your custom component in the target result template. |
Note
For the purpose of using content recommendations models however, you must log view events. Atomic components or Headless controllers won’t log view events for you. Use the Relay library. |
Disable and Enable Analytics
Coveo UA uses the coveo_visitorId
cookie to track individual users and sessions.
When implementing a cookie policy, you may need to disable UA tracking for users under specific circumstances (for example, when a user opts out of functionality cookies).
To do so, you can use the analytics
property of the atomic-search-interface
.
To re-enable UA tracking, you can set this property to true.
<atomic-search-interface analytics="false">
or
const searchInterface = document.querySelector('atomic-search-interface');
// ... init and later on
searchInterface.analytics = false;
doNotTrack property
doNotTrack
is a browser property which reflects the value of the DNT
HTTP header.
It’s used to indicate whether the user is requesting sites and advertisers not to track them.
Note
This property is deprecated, but it’s still supported in many browsers. |
Atomic v2 complies with the value of this property.
It automatically disables analytics tracking whenever DNT
is enabled.
Atomic v3 will no longer support this property. |
To understand how Coveo Usage Analytics tracks users and sessions, see What’s a user visit?. |