Pixel Loader: Adobe Launch Extension Review

There are thousands of vendors out there. Dozens have already created Adobe Launch extensions to load tracking pixels specific to their product. For everything else, there’s the Pixel Loader by 33Sticks. My first reaction when seeing this was: “Pasting snippets into rules is easy. Why would I need this?” In fact, Adobe DTM was intentionally built without using tag templates because it was easier to simply copy and paste the JavaScript into the code editor. This was great back in 2010, but tags have evolved over the past decade (holy crap, it’s been that long?). Media pixels can send all sorts of useful data – especially if your site has eCommerce.

Let’s take a look at a marketing pixel and break down each component before jumping into the extension. If we aren’t on the same page about how media pixels work then this extension will make absolutely zero sense. Here’s a sample media pixel from DoubleClick:

<img src="http://pubads.g.doubleclick.net/activity;xsp=9659;qty=[quantity of items purchased];cost=[revenue];ord=[order id]?" width=1 height=1 border=0/>

Many mainstream media tracking tools are not this straightforward and might not make sense to be deployed with the Pixel Loader. For our examples, we will use the above tracking pixel with the Pixel Loader extension. We can expect the output from using the extension should look something like this:

<img src="http://pubads.g.doubleclick.net/activity;xsp=9659;qty=5;cost=5.00;ord=12345?" width=1 height=1 border=0/>

We have a few parameters we’re filling in here: Quantity, Cost, and Order ID (ord). Check out the difference between the two snippets of code above to see what I changed. That will be what we’re dynamically updating in the URL using the Pixel Loader.

Rule Action

Form

There’s no configuration so I’m jumping right into the action. Here’s the UI:

Pixel Loader UI

This UI is VERY pretty and isn’t weighed down by a lengthy tutorials. The tutorial is circled on the bottom. That’s a pleasant surprise. The design patterns match that of the rest of Adobe Launch. If all I was doing was reviewing the UI it would be perfect. To others building extensions: please take note. This is how your interface should look.

Unlike some Adobe Launch utilities, this extension actually needs a little more inline support in the way of tooltips.

Pixel Loader Tooltips

My objective is to build out a URL in an intuitive interface so odds are that I’m not very well versed in JavaScript or technical terms. A Google search of where do I find the host? yields alien conspiracy theories. While it isn’t critical, adding tooltips would go a long way for morons like me who will find a way to misinterpret every single word: “Now TECHNICALLY in this context a URL Parameter doesn’t mean we aren’t using a Query Parameter so why can’t I check both boxes?” I’m real fun at parties.

Okay, time to move on from semantics and actually use the tool.

Function

We’re going to replicate the pixel from the example above and see how it works.

Pixel Loader Usage

Watch the Output field as the information is being entered into each field. You’ll see the URL is being built in realtime. Another cool feature is the ability to reorder the URL parameters. I assume there are some “dumb” data collection tools that require data to process in a specific sequence. This at least looks slick. Let’s talk about each field:

Host

This is the website URL (including the subdomain). Typing in HTTP:// is automatically deleted, so it’s pretty hard to screw this one up. To get the URL, look at the pixel and check out the IMG source – there really should be only one domain in your tracking pixel.

Path

This is what comes after the domain name. For instance, with jimalytics.com/my-blog… the pathname is /my-blog. In the tool, that leading forward-slash is automatically deleted, so don’t worry if you accidentally paste it in.

Delimiter

This is how the query parameters are parsed in the URL. Many times it will be &. In this case, it is a semicolon.

Delimiter Type

This will typically be a Query Parameter. However, in this case there is no query parameter so we selected URL Parameter. This is interesting and seems to be specific to the DoubleClick tag.

Parameter/Value Fields

Here’s the meat of the extension. This is where you set your custom parameters that live in the URL. You’ll set your transaction ID, referral ID, account name, conversion ID, etc. I’ve worked with pixels that had 20 of these parameters. The left side (parameter) should be a static value (a string). The right side is where you put your dynamic values using Data Elements (you can also input strings).

Test Run Output

I published the parameters that were dropped into the rule action. Let’s compare the vendor specifications with the Pixel Loader output.

Provided by vendor

<img src="http://pubads.g.doubleclick.net/activity;xsp=9659;qty=5;cost=5.00;ord=12345?" width=1 height=1 border=0/>

Pixel Loader output

<img src="http://pubads.g.doubleclick.net/activity;xsp=9659;qty=5;cost=5.00;ord=12345">

So it’s a little different – but still functional. What’s interesting is that might also be useful for IFRAME pixels. The extension would automatically convert it to an image, though. The actual extension code simply takes the URL from the bottom section of the Actions pane and generates an image via JavaScript. Here’s the code:

//Takes the URL from the output box
if(settings.outputURL){
  //Creates an image with the URL that was generated.
  new Image().src = settings.outputURL;
}

Final Thoughts

This is a solid extension with a beautiful UI. It’s great if you want to leverage Data Elements in a tracking pixel without having to bother with JavaScript. If you know what you’re doing, it’s incredibly simple. The upshot of it is that there aren’t a whole lot of use cases outside of DCM. I found a few other “simple” pixels – some in IFRAMEs. The ones in an IFRAME might still work with the Pixel Loader (it converts it to an IMG), but the IFRAME might contain extra JavaScript that can’t be served by an IMG.

There are a few ways I would improve it, though. First, the auto-correcting of input fields is nice, but at what point would it just be easier to copy the entire URL and have the extension automatically parse it? It seems like it might even take less code to automate that than try to catch every exception. I still found a lot of ways to screw up the URL (like adding spaces – maybe encode it?). Second, I might enable support for IFRAME pixels. Third – inline tooltips for these labels.

The thing about this extension is that it’s trying to solve for something that requires a moderate technical background and drops it into a UI that still requires a moderate technical background. I still need to understand how to parse the URL and properly QA it – and I wonder if it’s really saving that much time. As I said in the post, I’ve worked with some crazy complex pixels (UNiDAYS has a particularly interesting one) – and technically all tracking generates some kind of pixel’ish server call. This extension could be used to do cool stuff with Google Analytics’ measurement protocol. However, these are edge cases. I think the Pixel Loader is a necessary extension for the Adobe Launch marketplace, it’s aesthetically on-point… but it’s for the minority – not the majority.

Leave a Comment