How to Track Conversions when Using OptinMonster’s Canvas Technology

With OptinMonster’s Canvas Technology you are free to code whatever you desire, whether that is a form or a redirect link. However, with that complete customized setup, by default OptinMonster has no way to know what you would like to count as a conversion.

However, by following this guide, you can add a HTML class to your form’s submit button or a link, which will let OptinMonster’s analytics know that a conversion has taken place.

Requirements: Canvas Technology is available with a Pro Subscription only.

How to Track Conversions in Canvas

In order to track conversion events when using the Canvas Template in an OptinMonster campaign, there is a special class that you can use to notify our analytics that a conversion has happened.

All you need to do is add the class om-trigger-conversion to the element (ex: link, submit button, etc) with which you wish to track a conversion.

This lets us know that a conversion has taken place when the visitor selects a link or submit button in your Canvas themed campaign. It could be that the user clicked a button to download something, to share your page on social media, or they’re submitting a form.


Examples

The two most common ways Canvas templates are used are either redirecting users or with a customized form.

Example 1 – How to Track Click Events on a Redirect Link
<a href="http://www.example.com/" class="om-trigger-conversion">Canvas Link</a>
Example 2 – How to Track Click Events on Custom Forms
<form method="POST" src="http://www.example.com/form.php">
	<input type="text" placeholder="First Name" />
	<input type="email" placeholder="Email Address" />
	<input type="submit" class="om-trigger-conversion" value="Submit Now!" />
</form>
Enjoy the freedom and flexibility of OptinMonster’s Canvas Technology and tracking all of the conversions you’re achieving!

FAQs

Q: Why does my campaign not close automatically after submission?

A: For most users, their form’s redirect action renders this a non-issue. However, if your code keeps the web visitor on the same page, then you will need to add an additional class to your input. You will need to add the om-trigger-close class.

What this means is your Submit input button will now have 2 custom classes: (1) the om-trigger-conversion to track a conversion when the button is pressed, and (2) the om-trigger-close to close the campaign modal popup when the conversion data has been submitted.

Your input button could look something like the example below:

<input type="submit" class="om-trigger-conversion om-trigger-close" value="Sign me up!" />

Q: Why doesn’t my Custom HTML with JavaScript allow the Tracking of Conversions?

A: If your custom code is using JavaScript on the submit event, then you need to make sure when possible that your last line on that submit JavaScript is:

return true;
Exception: If you are doing any sort of redirect if the submission is successful on your customized submission JavaScript code then there is nothing OptinMonster can do to track the conversion.