De-duplicating Events

If you install both the conversion API and conversion pixel on the same website, you need a way to de-duplicate events across them.

For example, if a user signs up for an account, the API and pixel would both track that event separately, and you'd see it as 2 separate signup accounts. Therefore, we need a way to know that those 2 reported events are actually the same event.

The way we do this is with event IDs unique to each event and shared across the pixel and API. In the signup example, you could assign each user an account ID when they sign up (for example, a database primary key) and use that as the event ID. Then, we can pull a unique event ID count to determine how many users actually signed up.

Implementation

The pixel accepts an eventId parameter in the kad event tracking function (see the Events documentation).

The API accepts an event_id parameter for each event (see the API documentation).

When both sources track the same event, they must send the same event ID. There are a few ways to do this:

Option 1: Bake the event ID into the page

Generate the event ID on the backend, send it to the conversion API, then bake it into the page's HTML/JS so the pixel can read it from client-side JavaScript when the page loads. This works for page views and other events tracked once a page loads, e.g. signup events if the signup form submits a form to a route that renders a post-signup page.

For example, after generating the event ID, the server can put the following HTML into the page:

<!-- Use your server's template substitution; in this case by passing a parameter named "koah_page_view_event_id".  -->
<meta name="koah-page-view-event-id" content="<%= koah_page_view_event_id %>">
<!-- Koah Head Pixel Code -->
<script>
  !(function(w,d){if(!w.kad){var p=(w.kad=function(){p.sendEvent?p.sendEvent.apply(p,arguments):p.queue.push(arguments);});p.queue=[];var t=d.createElement("script");t.src="https://app.koah.ai/pixel.js",t.async=!0;var s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s);}})(window,document);
  kad("init", "YOUR_ADVERTISER_ID");
  kad("track", "PageView", {
    "eventId": document.querySelector('meta[name="koah-page-view-event-id"]').content
  });
</script>

Option 2: Read the event ID from an AJAX request

Generate the event ID on the backend and return it in the response (for AJAX requests), then the pixel can read it from the response. This works for JavaScript triggered events, e.g. calling fetch to a user registration endpoint when the user signs up.

For example, in frontend JavaScript:

fetch("/users/signup") // replace with your endpoint URL and add request data as necessary
    .then(res => res.json())
    .then(data => {
        const eventId = data.eventId; // replace with parsing your own response format
        kad("track", "SignUp", {
            "eventId": eventId
        });
    });