Jangro.com Social Media, Affiliate Marketing, etc. Heavy on the etc.

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

UPDATE: I’ve added the “How did I do this?” section at the bottom of this entry containing a tool developed to see inside CJ’s Javascript Links.

Now that CJ’s new Javascript links are available for examination, we can better understand what will be possible, and what will not.

My first glance at the links last night and my test page showed that basic link functionality does work, however, I did run into some formatting problems when putting a text link inline with some text. But why? Calling scripts remotely with Javascript makes it difficult to see what’s going on. You cannot simply ‘view source’ on the web page. The code that displays the links on the page is executed by the browser but invisible. Let’s take a look at what’s under one of these Javascript links and we can better understand what’s happening on our websites.

As an example, I’ll use the one from my previous tests where I’ve modified the link text:

<script type="text/javascript" language="javascript" src="http://www.jdoqocy.com/placeholder-2057? TARGET=_top&TEXT=This+is+a+%3Clink%3Elink%3C%2Flink%3Ein+ the+middle+of+a+sentence.&MOUSEOVER=N"></script>

When this code is viewed on a web page, here’s the Javascript that CJ is serving into this link.

document.write("This is a <form name=\"CJ10376741X116\" method=\"POST\" style=\"margin:0px;display:inline\" action=\"http://www.jdoqocy.com/click\">");
document.write("<input type=\"hidden\" name=\"AID\" value=\"10376741\"/>");
document.write("<input type=\"hidden\" name=\"PID\" value=\"2057689\"/>");
document.write("<input type=\"hidden\" name=\"url\" value=\"http://www.bluehost.com/track/cj/textlink_7\"/>");
document.write("<a href=\"javascript:CJ10376741X116.submit();\">link</a>");
document.write("</form> in the middle of a sentence.");
document.write("<img src=\"http://www.jdoqocy.com/image-2057689-10376741\" width=\"1\" height=\"1\" border=\"0\"/>");

This may look complicated, but If you know Javascript, this is about as simple as it gets. All it’s doing is printing out some HTML using the Javascript document.write function. Essentially, it’s causing the following HTML to be printed to the browser page (aka the “document”):

This is a <form name=”CJ10376741X116″ method=”POST” style=”margin:0px;display:inline” action=”http://www.jdoqocy.com/click”>
<input type=”hidden” name=”AID” value=”10376741″/>
<input type=”hidden” name=”PID” value=”2057689″/>
<input type=”hidden” name=”url” value=”http://www.bluehost.com/track/cj/textlink_7″/>
<a href=”javascript:CJ10376741X116.submit();”>link</a>
</form> in the middle of a sentence.
<img src=\”http://www.jdoqocy.com/image-2057689-10376741″ width=”1″ height=”1″ border=”0″/>

So there’s the mysterious LMI code. It’s a form.

The bolded text is my text that I passed into the link. CJ’s server placed it back into the text link it served. The word “link” is put into the a tag, again my text. The whole text that I put into the CJ interface was: “This is a <link>link</link> in the middle of a sentence. Had I not provided this text override, CJ would have served the default text that the merchant provided for this link.

So now that we can see the HTML, we can see how this also may interact with the code on our websites. The form tag, in HTML, acts as a block tag, and by default will not fit nicely inline with other text. Most browsers will put space before and after. CJ has tried to resolve this by giving it a simple style tag setting the margin to 0px and the display attribute set to “inline”. This should cause it to act like an inline html element, like a span tag. It probably does on Internet Explorer (which I haven’t tested as I’m on a Mac). It works somewhat in Firefox. It doesn’t seem to work well at all in Safari. Digging into the various browser incompatibilities looks like a subject for another post. But it’s certainly one major concern.

It would also be nice to be able to better control the formatting of the code in that link. They give the form a random name, so it doesn’t interfere with other forms. But without knowing that, it’s difficult to set the style further with CSS. I suspect that CJ has in their plans to give us some more control over that. If not, they’ll surely need to.

After the form, is a tracking pixel. That seems a bit redundant to me. It seems to me that the javascript tag could serve as this. CJ probably has this in mind, but getting their systems to count the javascript call as an impression is probably not engineered yet. The thing about Javascript is that they can remove that pixel any time they want. In any case, it’s benign.

The form itself is using the “POST” method. That means that the HTTP request submitted on a click doesn’t have the parameters display in the URL. They’re sent hidden in the HTTP header. Inside that form are the usual suspects, and what people are missing from the old links. The PID (publisher ID), AID (ad id), and url, which tells, in this case, where CJ should redirect the click after tracking it.

The form is submitted via a javascript call in the anchor tag. There are a few ways to implement this. They chose to execute the javascript form submit() command directly in the href. They could also have used the onclick event. I don’t know whether one is better than the other.

Understanding what’s in the Javascript links not only allows us to better control the formatting of this foreign object on our page, but it also sets us up to be able to more efficiently manage multiple links on a single page. My initial question is, what are requirements on affiliates? Am I required to have a remote javascript call on each and every link on my site, riddling my pages with these clunky forms that don’t play nice with text and other forms? Or, can the more savvy webmaster have a single CJ form tucked away somewhere on the page, controlled by a Javascript function that manages what is submitted depending on which link was clicked — all with no remote Javascript calls at all, but still submitting clicks via a POST request.

That would resolve the performance problem with one or more remote Javascript call slowing down the page. It doesn’t resolve the problem with users having Javascript disabled. I cannot get by the fact that CJ’s new solution completely kills their links to people who have Javascript turned off.

Of course this is all academic for now. I won’t be implementing any of these changes on money sites until it becomes a requirement. My hope, though, is that through understanding the technical details, we can either come to the realization that this really will work, or more likely, strengthen the argument against making Javascript the ONLY supported link type.

Sign the petition against making Javascript the only link type.

How Did I Do This?

When I originally wrote this post, I manually extracted the Javascript code , by calling the JS source URL in a browser, and then stripping out the Javascript code leaving only the HTML.

This is a bit tedious, and since I find it very useful to understand what’s inside these links in order to debug formatting issues, problems, and to get verification as to which PID is in the link, I built a tool to do this automatically.

I’ve made this tool available here: CJ LMI Javascript Decoder