How does invisible pixel conversion tracking work?

Question

I'm trying to track clicks from our site to an external website. On the external website, I'd like to place some code on their checkout thank-you page, that tells our server that a particular click has resulted in a sale.

How does this tracking code work? Does it need to be a pixel? Do we need to drop a cookie before we send the user to the external website?

Thanks.

Haitian

Answer 1

Pixel-based conversion tracking is pretty straightforward. You set up a basic web server to accept HTTP GET requests and write logs for those requests. On the merchant's confirmation page you put an image where the src attribute is a URL on your tracking server. That URL contains any data you need to collect for the sale, which will show up in your server logs.

(No, this doesn't need to be a pixel. It can be any excuse to make a client request something from your server. XHR requests, script tags, etc will work just fine.)

Example: if you need to know the Order ID number and value of a sale, you could have the merchant embed a pixel that looks like this: <img src="http://tracker.example.com/i.gif?orderID=12345&orderVal=99.95">. Your server logs will now have a record of sales generated on that site.

Now you need some way to separate sales you generated from the rest of them. There are three ways to go about this:

• you do the tracking,
• merchant does the tracking
• you work with a third party.

An affiliate network can be that third party, the merchant can track traffic sources and use that data to decide when to display your tracking pixel, or you can track it yourself. Which way you go depends on the terms of your partnership.

One popular and easy way to track which sales are yours is to set a cookie on the same domain as the tracker. Since many clients will block 3rd-party cookies, you will track best if your tracking server is also a redirection server.

Example: on your site you make outbound clicks go through your tracking server. Whereas you used to have an <a> tag that pointed to http://destination-site.com/landing-page.html you now send traffic to: http://tracker.example.com/redirect.php?url=http%3A%2F%2Fdestination-site.com%2Flanding-page.html. In this example, redirect.php should set a cookie and a redirect to the destination site.

Your server logs will now have that cookie value on image requests from the merchant's confirmation page, along with any other data you passed in the cookie (or associated with it on your back end). Now, when you look at your tracking server logs you know the image requests with cookies are yours and the others are not.

Things start getting complicated when there are more parties involved, deeper reporting needs, accounting and PII policies to comply with, concerns over fraud, etc but that's the gist of it.

Bedroll

after thought: you can skip the redirection part if your tracking server is on a subdomain of your website URL by scoping your cookie to .example.com. – Bedroll

Those first two paragraphs finally cracked it for me, grasped the mechanism which had eluded me until now. Thank you so much. – Obsequent

if a new cookie is set for each click, would not we quickly exceed browser's cookie limit. ? or only one cookie is used for a customer and all clicks are logged in that one cookie ? – Chowder

You would want to set two cookies: one for the visitor and one for the click source. The visitor cookie is an ID that stays the same over time and ties back to your server-side data; the click cookie gets overwritten for each click because most affiliate programs work on a last-click attribution model. – Bedroll

Sorry for sounding green, but do tracking pixels get activated even if its set to display:none? Example is if its added to an inline modal? – Anadiplosis

Different browsers behave differently, but most still download the image even when CSS properties prevent it from being displayed. You will probably be fine if you do that, but most stable solution will be to make the image a transparent png and let it invisibly display in your layout. So, if you're adding to an inline modal, I'd just let it display somewhere outside of the modal frame. – Bedroll

@jonaz, actually, what I wanted to track is the inline modal itself, and how many times it's been shown. I guess I should assume that tracking pixels registers regardless of the CSS and just work around it. Thanks mate. – Anadiplosis

@Bedroll I don't get the part with matching data. If I set a cookie to visitor (eg. with value visitor_id=5) on tracker.example.com and then I redirect to merchants page then on confirmation page my 1px image is going to load. But, if me and merchant agreed on static image I still can't match it. To make it work the image should contain data with visitor_id = 5, so it should have been passed in url. But this makes merchant to create his cookie with the value of 5 and use it when image is displayed (as part of data that's going to be logged). I can't see it work without js provided by me. – Idealism

@Bedroll unless the image is just a url and behind it we have code which checks for cookie value and does other stuff, but in the end we serve the image as a response – Idealism

Can’t decide whether to down for explaining how to perform this uncivilized behavior or to upvote for exposing it so we can resist it. – Ptero

@David: the GET request to your 1px image will include any cookies scoped to the domain of the image, which should be the same domain you used to set tracking data. – Bedroll