Skip to content

Instantly share code, notes, and snippets.

@martinvirtel
Last active January 17, 2022 02:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save martinvirtel/9b0e7a85bc294a7e849560a279bb902e to your computer and use it in GitHub Desktop.
Save martinvirtel/9b0e7a85bc294a7e849560a279bb902e to your computer and use it in GitHub Desktop.
embed tracking pixel

Example Tracking Pixel: Tickaroo

The lengthy <img> tag in the index.html contains a simple tracking application that 1% of the time pings a remote server which in turn removes additional data that would help with de-anonymizing, such as the URL and the exact timestamp, before storing the ping. The parameters recorded are

  • l document.location
  • r document.referrer
  • p partner, in this example Tickaroo
  • _d sample rate. Only one in _d pings (selected randomly) will get sent. In other words: Date.now() % _d has to be 0, otherwise the ping does not get sent.

Please also see https://dataless.dpa-prototype.de

Another example: To track every outgoing click of a page, you could include this <img> tag somewhere in the body.

<img style="width: 1px; height: 1px; visibility:hidden;" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://dataless.dpa-prototype.de/pixel.gif" id="dataless" />

Afterwards, you could just install an event handler to target all the clicks on <a> tags, like so

    function ping_dataless(element, p) {
        let s=element.getAttribute('data-src'); 
        if (s) {
           element.setAttribute('src', 
           s+'?p=rsslinamo&r='+encodeURIComponent(document.referrer)+'&l='
            +encodeURIComponent(document.location)+'&c='+encodeURIComponent(p));
        } 
    };

    document.addEventListener("click", function(event) {
                let t = event.target;
                if (t.tagName === "A") {
                    ping_dataless(document.getElementById("dataless"), t.getAttribute("href"));
                };
             }, 
    useCapture=true);



<html>
<body>
<h2>Example Embed Tracking Pixel</h2>
Here:
<img style="width: 1px; height: 1px; visibility:hidden;" onload="var s=this.getAttribute('data-src'); if (s && ((Date.now() % 100)==0)) { this.setAttribute('data-src',''); this.setAttribute('src', s+'?_d=100&p=tckr&r='+encodeURIComponent(document.referrer)+'&l='+encodeURIComponent(document.location)) ; }" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://dataless.dpa-prototype.de/pixel.gif" />
</body>
<!-- see it live at https://bl.ocks.org/martinvirtel/9b0e7a85bc294a7e849560a279bb902e -->
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment