Sticky MPKnowledgeDrop

All About Pixel Tracking

  • 15 April 2020
  • 0 replies
  • 241 views
All About Pixel Tracking
Userlevel 1
  • Mixpanel Community Team
  • 1 reply

Every week, we will release tips to help you get the most out of Mixpanel. Want to see more? Click here to see other #mpknowledgedrop articles.

Hello! I’m AK and I’m an engineer at Mixpanel. Today I’m going drop some knowledge on pixel tracking with Mixpanel.

 

Background

Pixel Tracking has been around for a long time - it is used by ESPs, facebook ads, google adsense, and many other advertising/email providers to keep track of what users click on.

The essential idea of pixel tracking is simple: 

  • create a 1x1 transparent image that the user cannot see... 

  • host the images on a server you do control

  • Embed that image on a webpage/email/ad (usually a domain you do not own or control)

  • If that image is requested, the server which hosts that ‘image’ can be sure that a user has ‘viewed’ the page which contains that pixel

The neat thing about images is that they can be shared across domains… for example, my page on:

https://aktunes.com

can contain HTML that requests images from a totally different domain; for example this is perfectly valid HTML, that can be served on any domain:

 

<img src="https://www.todayifoundout.com/wp-content/uploads/2017/11/rick-astley.png"/>

 

That means, if todayifoundout.com wanted to see information on the users I was rickrolling on aktunes.com, they could!

 

This unique feature of the <img> tag makes it possible to track events and behaviors on web-properties that you don’t own using pixel tracking. And this is actually a pretty big deal!

 

The classic use-case for pixel tracking is email: you craft an email and send it to one of your customers… but because you don’t own their inbox (let’s say it’s gmail), and because emails cannot contain javascript, there would be no way to programmatically ‘know’ if a user actually opened the email.

 

However, emails can contain images, even invisible ones, so if your email contained one of these ‘pixel tracker’ images, when the user opens the email, the invisible image would be requested from our server, alerting the server that the user did open the email.

 

While email is certainly the intended target for pixel tracking, there are numerous other use-cases for pixel tracking, like ads, affiliate links, direct messages, social media posts, and bot-driven interactions. Pixel tracking is usually a second (or third) resort; pixel tracking is primarily used when we wish to track interactions (views, clicks) on resources we do not completely control.

 

With most pixel-tracking implementations, you don’t have control over the parameters or values that are passed into the pixel trackers; most pixel tracking providers will hardcode this information and give you an ‘embed script’ which you cannont easily customize.

 

Mixpanel, by contrast, fully supports custom pixel tracking, with any number of parameters and it’s easy to get started! 

 

Let’s walk through the spec together…
 

https://developer.mixpanel.com/docs/http#section-event-request-parameters

Q3Y8OAEhnbZCsNK38pZ6jrs249URpCu-DDIEg5YNWgKcHCB7UbZcPobDsVY7LOrxF9eXCj2jGwc6sRsOhh541lnsXuEiKv1cFv2x-_kYX-Hb56vb_EYxlUiQ-vBgBgwkOsmcvz5n

Recall that an event in Mixpanel has a very specific anatomy:

{

    "event": "Something Happened",

    "properties": {

        "distinct_id": "the-users-uuid",

        "token": "your-mixpanel-project-token",

       "foo": "bar"

    }

}

 

To send this event to Mixpanel, this event data first base64 encoded

ewogICAgImV2ZW50IjogIlNvbWV0aGluZyBIYXBwZW5lZCIsCiAgICAicHJvcGVydGllcyI6IHsKICAgICAgICAiZGlzdGluY3RfaWQiOiAiMTM3OTMiLAogICAgICAgICJ0b2tlbiI6ICJlM2JjNDEwMDMzMGMzNTcyMjc0MGZiOGM2ZjVhYmRkYyIsCiAgICAgIAkiZm9vIjogImJhciIKCiAgICB9Cn0=

 

And finally, that data is appended to our base url for the events API:

 

https://api.mixpanel.com/track/?data={{INSERT-BASE64-BLOB}}

(under the hood, this is what’s happening when you call mixpanel.track() in your code!)

 

Note that we can append additional params to this URL, to make it a ‘pixel’

https://api.mixpanel.com/track/?data=ewogICAgImV2ZW50IjogIlNvbWV0aGluZyBIYXBwZW5lZCIsCiAgICAicHJvcGVydGllcyI6IHsKICAgICAgICAiZGlzdGluY3RfaWQiOiAiMTM3OTMiLAogICAgICAgICJ0b2tlbiI6ICJlM2JjNDEwMDMzMGMzNTcyMjc0MGZiOGM2ZjVhYmRkYyIsCiAgICAgIAkiZm9vIjogImJhciIKCiAgICB9Cn0=&img=1

 

That means this URL can now be used inside an image tag

<img src="https://api.mixpanel.com/track/?data=ewogICAgImV2ZW50IjogIlNvbWV0aGluZyBIYXBwZW5lZCIsCiAgICAicHJvcGVydGllcyI6IHsKICAgICAgICAiZGlzdGluY3RfaWQiOiAiMTM3OTMiLAogICAgICAgICJ0b2tlbiI6ICJlM2JjNDEwMDMzMGMzNTcyMjc0MGZiOGM2ZjVhYmRkYyIsCiAgICAgIAkiZm9vIjogImJhciIKCiAgICB9Cn0=&img=1"/>

 

This HTML will not produce any visible output, but when it’s loaded, but it will send an event to Mixpanel ‘something happened’ when any browser loads that tag. 

 

It’s also worth noting that Mixpanel’s API supports redirects as well, which allows us to more granularly track any link that is clicked (such as a social media post, or direct message):

WMkgbSlhRMam3qCTdny-4FjWElk2_Tl6lSBqTjoEMT8zxW2RiQcc-o6OAgH81ZmyefZCMvPyq5ut-BdV7MqKMVDu9AVSuH2iPfYnbAxcVUTIuIyu2l7L8MQgdvoaChHp-cX4svYt

This works similarly to the image option, except we use the ‘redirect’ parameter in the URL instead of the ‘img’

so:

https://api.mixpanel.com/track/?data=ewogICAgImV2ZW50IjogIlNvbWV0aGluZyBIYXBwZW5lZCIsCiAgICAicHJvcGVydGllcyI6IHsKICAgICAgICAiZGlzdGluY3RfaWQiOiAiMTM3OTMiLAogICAgICAgICJ0b2tlbiI6ICJlM2JjNDEwMDMzMGMzNTcyMjc0MGZiOGM2ZjVhYmRkYyIsCiAgICAgIAkiZm9vIjogImJhciIKCiAgICB9Cn0=

 

Becomes:

https://api.mixpanel.com/track/?data=ewogICAgImV2ZW50IjogIlNvbWV0aGluZyBIYXBwZW5lZCIsCiAgICAicHJvcGVydGllcyI6IHsKICAgICAgICAiZGlzdGluY3RfaWQiOiAiMTM3OTMiLAogICAgICAgICJ0b2tlbiI6ICJlM2JjNDEwMDMzMGMzNTcyMjc0MGZiOGM2ZjVhYmRkYyIsCiAgICAgIAkiZm9vIjogImJhciIKCiAgICB9Cn0=&redirect=https://google.com

 

And can be used in anywhere that supports anchor tags (<a>):

 

<a href="https://api.mixpanel.com/track/?data=ewogICAgImV2ZW50IjogIlNvbWV0aGluZyBIYXBwZW5lZCIsCiAgICAicHJvcGVydGllcyI6IHsKICAgICAgICAiZGlzdGluY3RfaWQiOiAiMTM3OTMiLAogICAgICAgICJ0b2tlbiI6ICJlM2JjNDEwMDMzMGMzNTcyMjc0MGZiOGM2ZjVhYmRkYyIsCiAgICAgIAkiZm9vIjogImJhciIKCiAgICB9Cn0=&redirect=https://google.com">click me</a>

 

The above HTML will create a link; when it’s clicked, it takes the user to google, but first, it logs an event to Mixpanel.

In order to help you experiment with pixel tracking, I made this (very simple) web form that will help you generate these URLs, so that you can create a few of your own and test them before rolling out a larger implementation:

 

https://aktunes.neocities.org/mpPixel/

 

That’s all you need to know about pixel tracking! Have fun out there!


0 replies

Be the first to reply!

Reply