Synchronous Delivery

Xtarget Data Delivery

AtData provides two models for delivering data via the xtarget pixel:

Basic Pixel with Synchronous Data Delivery:
JavaScript Implementation with JSON Data Delivery

Basic Pixel with Synchronous Data Delivery

In the basic pixel model, data is passed in the query string through a pixel redirect. The basic pixel is added to your website using an <img> tag:

<img src="https://p.<tracking_domain>/c/<YOUR_API_KEY>/a/xtarget/p.gif?label=LABEL">

How It Works

AtData redirects this pixel to a URL owned by your company, such as:

https://MYCOMPANY.com/adpixel.gif

This URL delivers a pixel to the browser but it also needs to accept query string data. AtData will submit data via the "eqs" (encrypted query string) parameter. The value of this parameter, once decrypted, will contain match data. For example, if there is a successful match, the redirect would look like this:

https://MYCOMPANY.com/adpixel.gif?R5Bo2YsVp-E2ZRruPeBQ7TQlg17KpPnNl7Jd0lEqCzjR9xAYyDU-TaZndaO-kvsV%20%20a2QprOs7uUx9rrfEbA0YjA

The decrypted data from the "eqs" parameter value above will also be in query string format:

md5_email=049eee5f023e881df4c4e4e06d028ee1&label=LABEL

Note that the decrypted query string will not be URL encoded. Please see here for more details on how the encryption functionality works.

Implementation Requirements

URL Setup: Your company's URL must be configured to process and decrypt the eqs query string parameter, and process the md5_email parameter within the decrypted data.
Encryption Key: Provide AtData with your encryption key. The key must be 32 characters in the [0-9, a-f] range, e.g. "d6c60c8e688e0afa7f49416897aadc1f". Please see here for more details on how the encryption functionality works.

JavaScript Implementation with JSON Data Delivery

This model offers a more flexible approach, with both synchronous and asynchronous data delivery options using JavaScript.

In the JavaScript code below, aloKey represents the pixel ID. The value <YOUR_API_KEY> is a placeholder and should be replaced with the actual value provided by AtData client services.

Synchronous Approach

The synchronous approach involves calling a snippet with your callback method:

<script type="application/javascript">
    var aloKey = '<YOUR_API_KEY>';

    fetch('https://<tracking_domain>/c/' + aloKey + '/a/xtarget/p.json', {credentials: 'include'})
        .then(res => res.json())
        .then(resJson => {
            if (resJson.md5_email !== undefined) {
                MYCOMPANYCallback({'md5': resJson.md5_email});
            }
        });
</script>

Asynchronous Approach

The asynchronous approach is more complex and uses the event queue to handle data. Here’s how it works:

Pushing Data to the Queue: This step can occur anywhere on your page:

<script type="application/javascript">
    window._aloq = window._aloq || [];
    window._aloq.push(['setAloKey', '<YOUR_API_KEY>']);
    window._aloq.push(['registerCallback', MYCOMPANYCallback]);
</script>

Processing the Queue and Redefining: This script processes the queue and allows for future pushes if needed:

<script type="application/javascript">
    (function () {
        function al() {
            var aloq = (function () {
                var key = undefined,
                    callback = undefined,
                    load = function() {
                        fetch('https://<tracking_domain>/c/' + key + '/a/xtarget/p.json', {credentials: 'include'})
                            .then(res => res.json())
                            .then(resJson => {
                                if (resJson.md5_email !== undefined) {
                                    callback({'md5': resJson.md5_email});
                                }
                            });
                    },
                    push = function (arr) {
                        var method = arr[0];
                        switch (method) {
                            case 'setAloKey':
                                key = arr[1];
                                if (callback !== undefined && key !== undefined) {
                                    load();
                                }
                                break;
                            case 'registerCallback':
                                callback = arr[1];
                                if (callback !== undefined && key !== undefined) {
                                    load();
                                }
                                break;
                        }
                    };

                return {
                    push: push
                };
            })();

            var pushData = window._aloq || [];
            window._aloq = aloq;

            if (pushData.length > 0) {
                pushData.forEach(function (hist) {
                    window._aloq.push(hist);
                });
            }
        }
        if (window.attachEvent) window.attachEvent('onload', al);
        else window.addEventListener('load', al, false);
    })();
</script>