This post is for the many of you that deal with the middle layer of the web (analytics, marketing, so forth) but have little to no experience with javascript. When you contact a vendor to implement their stuff on your pages, typically they'll send you some instructions along with a script to go on one or more pages across your site. These may be something to just add on every page regardless of what the page is, of may require to be placed on specific pages.

In many cases, the vendor's script may not have a whole lot of information broken out so you may need to dissect the script. This may be especially true if you are porting the snippet into a tag management system such as Adobe DTM or Tealium. In one of these cases, you may not need the whole script, only a couple minor pieces--so it is important to know how to dissect a basic script.

Let's take a common example script for the vendor DoubleClick Floodlight.

    <!--
        Start of DoubleClick Floodlight Tag: Please do not remove
        Activity name of this tag: Action - My Page Action
        URL of the webpage where the tag is expected to be placed: http://www.xyz.com
        This tag must be placed between the <body> and </body> tags, as close as possible to the opening tag.
        Creation Date: 09/22/2014
    -->

    <script type="text/javascript">
        var axel = Math.random() + "";
        var a = axel * 10000000000000;
        document.write('<iframe src="http://3960428.fls.doubleclick.net/activityi;src=3960428;type=G145027;cat=Actio001;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
    </script>

    <noscript>
        <iframe src="http://3960428.fls.doubleclick.net/activityi;src=3960428;type=G145027;cat=Actio001;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
    </noscript>

    <!-- End of DoubleClick Floodlight Tag: Please do not remove -->

Now, a javascript person can take one look at this and tell you all the important information. However, to someone that has little or no experience, this can all look like a foreign language. Let's dissect some of the different pieces here.

To start, I've broken this code into 4 blocks (double spaces). In these, we have two different code languages we're looking at. Anything inside the <script></script> blocks is javascript. Everything else is HTML. From the top down, we'll look at the blocks.

 

 <!-- some text -->

This is an HTML comment tag. Anything in here is informational and will not affect how your page loads or runs. This is totally optional any you could delete it if you'd like. However, these are recommended in many cases to keep your code somewhat readable for later down the road.

 

<script type="text/javascript">
    //some javascript
</script>

This block says that we are going to run a different language. Most of the time, this will just be javascript, but you can see we explicitly have said to look at "javascript" in the "type" parameter.

 

<noscript></noscript>

This is a special HTML tag that says "If javascript isn't available, run whatever is inside here." With today's internet, this is pretty unnecessary. This was used (or a similar method) much more in the past when some horrible browsers (...ahem...IE...) actually blocked javascript by default. Now, javascript is enabled by default for all browsers. You can turn it off manually, but this would account for <1% of the overall internet usage.

 

Now that we have looked at the blocks, let's look at the key information. Because of the situations described in the above paragraphs, I'm going remove our comments and noscript code. We end up with much less to worry about:

    <script type="text/javascript">
        var axel = Math.random() + "";
        
        var a = axel * 10000000000000;
        
        document.write('<iframe src="http://3960428.fls.doubleclick.net/activityi;src=3960428;type=G145027;cat=Actio001;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
    </script>


There's quite a bit of information here. Without telling how everything works in depth, let's look at this line by line. I've broken it out into three lines for readability.

  1. This line is setting a variable called "axel". All it is doing is setting this variable with a random number.
  2. This line sets a variable called "a". It takes the value of "axel" and multiplies it by a large number. This is done to change the regular random number into an integer (removing the decimal).
  3. This line is the meat of our vendor tag. There are a few different parts we need to know about.
    • "document.write" says to output whatever is inside the parenthesis onto the loaded page.
    • "<iframe ...></iframe>" a special HTML tag that loads as if it were its own web page. Whatever url is given, this will load.
    • "src=''" is the url we want to load. This is the actual vendor network call that will do the tracking for the vendor.
    • (everything else). These items are added to make this item virtually invisible when it is added to the page so the user isn't affected by it.

If you've been following along, we've basically dissected the whole script to where the most important part we need to look at is in the "src" parameter on the <iframe>. This is the actual network location that will trigger the tracking the vendor needs. For the last step, let's dissect this url to its bare parts.

"http://3960428.fls.doubleclick.net/activityi;src=3960428;type=G145027;cat=Actio001;ord=' + a + '?"

If you remember the "a" variable from above, you can see that it is used at the end of the url. Basically this statement says "take this long string, concatenate whatever is in the 'a' variable, then concatenate a question mark". If we do this, assuming our "a" variable had a value of "12345", our final url would look like so:

http://3960428.fls.doubleclick.net/activityi;src=3960428;type=G145027;cat=Actio001;ord=12345?

We can really dissect this further into several smaller parts.

 

http://

This says if the call will be secure or not. This one is not secure, whereas secure would be "https://".

 

3960428

We see this number in two spots. One is in the subdomain of the url, one is after a ";src=" section. Because it seems like a unique id, we can probably assume this is a unique client id assigned to you by the DoubleClick vendor.

 

.fls.doubleclick.net/activityi

This is the main tracking domain for DoubleClick.

 

;src=3960428;type=G145027;cat=Actio001;ord=12345?

This is all extra stuff that is specific to help track this specific pixel for this specific page. As we saw, "src" is your unique id. "type" and "cat" are unique for this tracking call. If you were to look at another page, one or both of these might be different to match that page's action. "ord" is combined with the random number from earlier. We can assume this is just a cache buster to ensure the tracking goes through.

 

Summary

We've successfully dissected all the important pieces of this tracking. Unfortunately, there are MANY different cases of vendor scripts, so you may have to look hard or still ask your vendor what different pieces may mean. It can also be difficult as there may be cryptic names, so things aren't always as readable. However, if you take the time to dissect things as we have above, you can usually get down to the actual meat of the content. If you analyze and clean up what isn't needed, hopefully it will become a little more clear.