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. For example, if there is a successful match, the redirect would look like this:

https://MYCOMPANY.com/adpixel.gif?md5_email=049eee5f023e881df4c4e4e06d028ee1

Implementation Requirements

URL Setup: Your company's URL must be configured to process the md5_email query string parameter.
Encryption Option: An encryption option for the query string data is available upon request. Contact AtData for more information if needed.

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>