ClickMagick Knowledge Base

Links & Buttons That Redirect
Other Links & Buttons / Tracking Links
Advanced / JavaScript

If the link or button you want to track redirects visitors to another page when clicked, you’ll want to use the cmc_redir function of Campaigns to track it.

It doesn’t matter if you control the page that you’re linking to. It could be another page of yours, it could be a link to a Facebook post, or it could be an affiliate offer that you have no control over.

Step 1 – Go to your Campaigns dashboard, then Tools, then URL Builder.

Step 2 – Enter the URL of any page that contains your Campaigns tracking code. It doesn’t matter which page, because users won’t see this page at all.

Step 3 (Optional) – If you want to track a click when the link or button is clicked, as opposed to a goal, enter the UTMs you want to use to identify the clicks, including utm_source, utm_medium and utm_campaign.

Step 4 – On the second tab of the URL Builder, enter the final URL you want visitors redirected to in the cmc_redir field at the bottom. This is the URL visitors will be redirected to when they click the link or button.

Step 5 (Optional) – If you want to record an Action or Engagement when the link or button is clicked, as opposed to a click, under cmc_goal, select “Action” if you want to fire an Action, or “Engagement” if you want to fire a Engagement.

Step 6 – Copy the URL generated by the URL Builder, and use this URL for the link or button you want to track.

Caution: If you don’t have the Campaigns tracking code in the <head> of your landing page, your landing page may start to load before the visitor is redirected.

If you’re going to use this feature you’ll want to make certain that you’ve added your Campaigns code to the <head> of your page for a “clean” redirect.

If you want to track link or button clicks that don’t redirect the visitor to another page, or you’re using Tracking Links, you’ll need to use the more technical log_xxx function.

This requires a basic understanding of HTML, so you may need help with this. If you don’t have someone on your team who can do this, just submit a ticket and we’ll be happy to help.

If you do, be sure to provide the URL of the page in question, and let us know exactly which links or buttons you want to track, and how you want to track them e.g. record an action when the link is clicked, process an order bump etc.

If you want to take a stab at it yourself, just select which system you’re using below ...

Campaigns
Tracking Links

Step 1 – Find or add an Element ID to your link or button

An Element ID uniquely identifies an element on a webpage – including your links and buttons – and you’ll need this to track it. So if it doesn’t already have one, you’ll need to add an ID to the link or button you want to track.

You can use any value for the ID as long as it’s unique e.g. id='myButton'

Some page builders, like ClickFunnels, automatically assign random IDs to your links and buttons and they can’t be changed. But don’t worry, that’s fine too …

In this case, just note the ID assigned to your button (e.g. button-142996) because you’ll need it in the next step.

If you aren’t sure how to find these IDs, use the guides below:

How to find the Element ID in different page builders

Step 2 – Modify your Campaigns Tracking Code

You’ll have to modify the Campaigns code on your page slightly. This small tweak will tell ClickMagick to monitor your link or button and record a conversion event when the link or button is clicked.

To record an Action, the new line of code you need to add looks like this: log_action: 'myButton',

To record an Engagement, the code you’d add looks like this: log_engage: 'button-142996',

To record a Sale, add both an element ID and an :amount value like this: log_sale: 'buy-button:9.95',

To record an Upsell, add both an element ID and an :amount value like this: log_upsell: 'upsell-button:4.95',

To record an Order Bump, add both an element ID and an :amount value like this: log_orderbump: 'bump-button:100.00',

You can also add an optional “ref” value by adding :refvalue to the end of the previous examples:

log_action: 'myButton:optin',

log_engage: 'button-142996:salespage',

log_sale: 'buy-button:9.95:golfclubs',

log_upsell: 'upsell-button:4.95:golfbagupsell',

log_orderbump: 'bump-button:100.00:combo-pack',

If you don’t specify a “ref” value, “ref” will be set to match your link or button’s ID.

To easily add your ID to your ClickMagick tracking code, click on “Website Code” in the Campaigns Tools menu:

Click on “Custom Website Code,” click on “Advanced Options,” and then choose “Goal Tracking.”

Select what you want to log in the “Type” section, add your Button or Image ID, and click on Add:

To track multiple buttons or images, enter the second ID after adding the first:

Step 3 – Add your modified Campaigns Tracking Code to your page

The final step is to add or update your tracking code with the new code generated after following the steps above, so that it will track the additional link or button clicks.

If you need a refresher on how to add your tracking code, please reference the guides below:

How do I add tracking pixels or JavaScript code to my page builder?

How to find the Element ID in different page builders

Step 2 – Build your cmtools.js code to work with the Element ID

Here’s the base code that you will be using:

<script>

    var cmtools = {

        uid: '[USERID]',

    }

</script>

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

Copy the code to a text editor, like Notepad.

Modify the cmtools.js code on your page to tell ClickMagick how you want to record the click.

To record an Action, the code you’d add looks like this: log_action: 'myButton',

To record an Engagement, the code you’d add looks like this: log_engage: 'button-142996',

To record a Sale, you’d add the Element ID along with the :amount value like this: log_sale: 'buy-button:9.95',

Ensure the value matches your link or button’s CSS/Element ID.

You can also add an optional “ref” value by adding :refvalue to the end of the previous examples:

log_action: 'myButton:upsell1',

log_engage: 'button-142996:salespage',

log_sale: 'buy-button:9.95:golfclubs',

If you don’t specify a “ref” value, “ref” will be set to match your link or button’s ID.

Example:

Here’s a cmtools.js code to record an “Action” when a button with Element ID “myButton” is clicked:

<script>

    var cmtools = {

        uid: '[USERID]',

        log_action: 'myButton',

    }

</script>

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

Step 3 – Add your modified cmtools.js code to your page

The final step is to add or update your cmtools.js code with the new code generated after following the steps above, so that it will track the additional link or button clicks.

If you need a refresher on how to add your tracking code, please reference the guides below:

How do I add tracking pixels or JavaScript code to my page builder?

What if I want to track multiple buttons on the same page?

This is also easy to do. If you have control over the Element ID value, use the same value for all of your buttons, and there’s nothing extra that you need to do – they will all be tracked automatically.

If you don’t have control over the Element ID due to the page builder you’re using, you can add multiple ID values in your code, like this: log_action: 'myButton1,myButton2,myButton3',

In this example, a click on any button with one of the three ID values myButton1, myButton2 or myButton3 will record an “Action” with the “ref” value assigned to the ID of the button clicked.

Tip: You can use “class” names instead of Selector IDs. Just follow the instructions above, and make sure the class names you use in your code start with a period to designate that it’s a class name e.g. log_action: '.className',

For advanced users, you can also record conversions using JavaScript in any way that makes sense for you. To learn how to do that, please see the article below:

Can I record a conversion or goal using JavaScript?

Here’s an example that records an action when someone clicks the play button on an embedded video in an iframe …

<script type="text/javascript">
function iframeclick() {
document.getElementById("theiframe").contentWindow.document.body.onclick = function() {
clickmagick_cmc.log('a', 'video');
}
}

</script>



...

<iframe id="theiframe" … onload="iframeclick()"></iframe>