ClickMagick Knowledge Base

Knowledge Base

How does the JavaScript cmtools.js code work?

This article explains at a technical level how the cmtools.js code works. If you’re just looking for how to use the cmtools.js code, you should read this article instead:

Can I pass data to my affiliate links or autoresponder?

ClickMagick fully supports passing Sub-IDs in its tracking links and rotator links, but sometimes it’s necessary to pass Sub-IDs through pages in your funnel and this can be a bit tricky.

Passing Sub-IDs through your funnel pages isn’t really a ClickMagick issue, but it does come up when you’re trying to pass a click ID from your tracking link through a series of pages in your funnel and on to an affiliate network.

Historically, to do this meant creatively passing your sub-IDs through your funnel pages using query string parameters, hidden input fields in forms, and so on. And if you had an opt-in page someplace in the middle, passing a Sub-ID through your autoresponder was often a nightmare.

To make passing Sub-IDs through your funnel pages much easier, we have a simple solution that should work in the vast majority of the situations.

By including a small piece of JavaScript code on the first page that your tracking link points to and on the last page that contains the link to your affiliate network, the code is able to save your click ID and other Sub-IDs in the browser’s cookies on the first page, and retrieve them on the last page.

This is the piece of code that you would paste into either the <head> or <body> section of your page:

<script type='text/javascript' src='//cdn.clickmagick.com/misc/js/cmtools.js'></script>

To follow the rest of this explanation, you might need to read up on query strings or how to add JavaScript code to web pages:

What is a “query string”?

How do I add tracking pixels or JavaScript code to ClickFunnels?

An Example

Take a look at this funnel which has an opt-in page and a Thank You page that leads into the affiliate network:

In this diagram, we’ve added the JavaScript code to both the opt-in page and the Thank You page—the first and last pages of your funnel leading into the affiliate network.

The JavaScript code we added to the opt-in page will store any Sub-IDs passed to it from the tracking link, and the JavaScript on the final Thank You page will retrieve those values, completely bypassing the autoresponder in the middle.

You can have as many pages between the first page and the last page as you like. The only detail you need to be aware of is that the two pages with the JavaScript code must be on the same domain or the last page won’t be able to read the cookie values stored by the first page.

Also, if you have a single page between your tracking link and your affiliate network, that works fine as well. Just include the JavaScript code it will work great.

Passing the Sub-ID values

To pass the Sub-ID values from your tracking link, use the query string variables cm_s1 through cm_s5.

For example, if you were passing a click ID to your affiliate network and you needed to go through some intermediate pages, you would pass the click ID in the Primary URL of your tracking link using the cm_s1 query string parameter:

https://www.myfunnel.com/optin-page?cm_s1=[clickid]

The JavaScript code on the first page would save the cm_s1 value in a cookie named cm_s1.

Then, on the last page, you would use the tokens [cm_s1] through [cm_s5] to insert the cookied values in your affiliate link like this one for the MaxBounty affiliate network:

https://www.mb103.com/lnk.asp?o=10667&c=918273&a=210570&l=10554&s2=[cm_s1]

With this setup, the tracking link’s click ID would be successfully passed to your affiliate network no matter how many pages were between the first and last page.

Note: If the JavaScript code finds any one of the cm_s1 through cm_s5 query string variables, it updates them all, clearing the values of any that weren’t explicitly set in the query string. If the code doesn’t find any of the query string variables, it leaves the cookied values alone and simply replaces the [cm_s1] through [cm_s5] tokens.

If you pass in query string values on the same page that you use the tokens, the query string values will update the cookies before the cookied values are used to replace the tokens.

Tip: For the detail-oriented folks, the cookies are 1st-party cookies with a 1-year expiration date.

The cmtools_attrs variable

By default, cmtools.js only updates tokens in the href, src, and value attributes of HTML tags.

That means that the code will not update any HTML attributes other than the ones mentioned a moment ago, nor will it update any of your own JavaScript code that you may have on the page.

cmtools.js code give you some flexibility here.

First, if you declare the special cmtools_attrs array with one or more HTML attribute types, cmtools.js will make replacements in those fields as well. For example, if you wanted all your placeholder attributes updated, you would include cmtools_attrs array before you include the script:

<script>

    var cmtools_attrs = ['placeholder'];

</script>

<script type='text/javascript' src='//cdn.clickmagick.com/misc/js/cmtools.js'></script>

If you wanted both the placeholder and data-custom attributes updated, you would separate them with a “,”:

<script>

    var cmtools_attrs = ['placeholder', 'data-custom'];

</script>

<script type='text/javascript' src='//cdn.clickmagick.com/misc/js/cmtools.js'></script>

Updating your own JavaScript Code

If you need to use tokens in your own JavaScript code, you can pull the URI encoded values out of the cookies named cm_s1 through cm_s5.

You can also use the pre-initialized JavaScript variables cmtools.s1 through cmtools.s5. You would almost always use these to set a value:

... = cmtools.s1;                // JavaScript

$(selector).val(cmtools.s1);     // jQuery

The ClickMagick Sub-ID code will also automatically make replacements on the text in a variable named cmtools_url if you provide it. Simply declare it in your JavaScript code before you include the Sub-ID code:

<script>

   var cmtools_url = 'https://www.affiliatenetwork.com?subid1=[cm_s1]';

</script>

<script type='text/javascript' src='//cdn.clickmagick.com/misc/js/cmtools.js'></script>

You could use this special variable, for example, to redirect to a new page:

<script>

   var cmtools_url = 'https://www.affiliatenetwork.com?subid1=[cm_s1]';

</script>

<script type='text/javascript' src='//cdn.clickmagick.com/misc/js/cmtools.js'></script>

<script>

   window.location.replace(cmtools_url);

</script>

Tip: If your pages link from one domain to the next, you can still use ClickMagick’s Sub-ID code to pass your Sub-ID values. All you need to do is pass the values from the last page of the current domain to the first page of the next domain using the Sub-ID code itself.

In other words, use the Sub-ID code on the last page of the first domain to set the cm_s1 through cm_s5 query strings parameters in the link leading to the next page on the new domain. Then, on the first page of the new domain, use the Sub-ID code to grab the query string parameters and start the process on the new domain.

Article 482 Last updated: 04/15/2023 3:13:58 PM
https://www.clickmagick.com/kb/?article=482