Knowledge Base      


How do I track link or button clicks in Thrive Architect?


If you want to track link or button clicks off of your site, generally when you link to an affiliate offer, you have a few options. Select Campaigns or Tracking Links below depending on what you’re using, and we’ll show you how ...


 

Video Tutorials: How To Track Link Or Button Clicks Off My Site



Step 1 – Add Campaigns Click or Conversion Tracking Code

Ensure that the page with the link or button you want to track has your Campaigns Click or Conversion Tracking Code on it. If it doesn’t, you can grab the code from the Website Code Tool within ClickMagick Campaigns.


Step 2 – Add a CSS Selector ID to your link, button or image

A CSS Selector ID uniquely identifies an element on a webpage – your link or button in this case. So if it doesn’t already have one you’ll need to add a CSS Selector 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 CSS Selector IDs to your 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.

 
How Do I Find The CSS Selector ID In ClickFunnels?

How Do I Find The Element ID In OptimizePress?

How Do I Find The CSS Selector ID In Thrive Architect?

How Do I Find The Element ID In Convertri?

How Do I Find The Element ID In Unbounce?

 
Step 3 – Add a new line to your ClickMagick Campaigns Code

The final step is to slightly modify the Campaigns code on your page. This small tweak will tell ClickMagick to monitor your link or button and record an “Action” or an “Engagement” 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',

And to record an “Engagement” the code you’d add looks like this: log_engage: 'button-142996',

Just make sure the value matches your link or button’s CSS Selector ID and that’s all there is to it …

When your link or button is clicked a conversion will be recorded with a “ref” value equal to your link or button’s ID.


Example 1:

To recap, here’s the Click Tracking Code for your account that will also record an “Action” when your link or button with CSS Selector ID “myButton” is clicked:

<script>
    var clickmagick_cmc = {
        uid: '[USERID]',
        hid: '[HID]',
        log_action: 'myButton',
    }
</script>
<script src='//cdn.clkmc.com/cmc.js'></script>



Example 2:

Maybe you have Conversion Tracking Code on the page, for example to track an “Action” after someone opts-in on the previous page, and you want to record an “Engagement” when they click your link or button on this page.

In that case your modified code should look like this:

<script>
    var clickmagick_cmc = {
        uid: '[USERID]',
        hid: '[HID]',
        cmc_goal: 'a',
        log_engage: 'myButton',
    }
</script>
<script src='//cdn.clkmc.com/cmc.js'></script>


Video Tutorials: How To Track Link Or Button Clicks Off My Site
 

One quick and easy way to track an offsite link or button click is to use a Tracking Link and add your “Action” or “Engagement” tracking pixel to it, so that when the link or button is clicked a conversion will be recorded.

This however adds an extra Tracking Link to your set up, and an extra redirect for your users, so it’s probably not ideal in most cases. Here’s a better way ...


Step 1 – Add ClickMagick’s cmtools.js to your page

Ensure that the page with the link or button you want to track is using ClickMagick’s cmtools.js library.

Here’s the code to add with your User ID:

<script>
    var cmtools = {
        uid: '[USERID]',
    }
</script>
<script src='//cdn.clickmagick.com/misc/js/cmtools.js'></script>



Step 2 – Add a CSS Selector ID to your link, button or image

A CSS Selector ID uniquely identifies an element on a webpage – your link or button in this case. So if it doesn’t already have one you’ll need to add a CSS Selector 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 CSS Selector IDs to your 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.

 
How Do I Find The CSS Selector ID In ClickFunnels?

How Do I Find The Element ID In OptimizePress?

How Do I Find The CSS Selector ID In Thrive Architect?

How Do I Find The Element ID In Convertri?

How Do I Find The Element ID In Unbounce?

 
Step 3 – Add a new line to your cmtools.js code

The final step is to slightly modify the cmtools.js code on your page. This small tweak will tell ClickMagick to monitor your link or button and record an “Action” or an “Engagement” 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',

And to record an “Engagement” the code you’d add looks like this: log_engage: 'button-142996',

Just make sure the value matches your link or button’s CSS Selector ID and that’s all there is to it …

When your link or button is clicked a conversion will be recorded with a “ref” value equal to your link or button’s ID.


Example:

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

<script>
    var cmtools = {
        uid: '[USERID]',
        log_action: 'myButton',
    }
</script>
<script src='//cdn.clickmagick.com/misc/js/cmtools.js'></script>




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

This is also easy to do. In fact, if you have control over the Selector ID value, just 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 Selector ID due to the page builder you’re using, then just include 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 specific button that was clicked.


What if I don’t really understand everything I just read?

We understand that all of this might be a bit technical if you’ve never done this type of thing before.

The thing is, this is the best solution and other solutions involve the use of an extra “redirect” page which isn’t ideal. If you need help setting any of this up just let us know and we’ll be happy to help!

 
Tip: You can also 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',
 
Tip: Just so you know, you can also record conversions using JavaScript in just about any way you want. If you have more advanced needs, you or your developer may want to check out the article below:

Can I record a conversion or goal using JavaScript?


Article 726 Last updated: 07/09/2021 1:15:55 PM
https://www.clickmagick.com/kb/?article=726