How to track conversions with JavaScript

Convertize allows you to track two different types of goals out of the box: Click Goals and Page-view Goals. You can create these goals in the SmartEditor. For advanced users, however, we also have to option to track goals with JavaScript. This allows you to fire goals on custom events.

Create a goal for a Custom Event

Step 1: Create a Click or Page-view goal in the Editor

Create either a Click Goal or a Page-view goal in the Editor. It does not really matter which one of the two you choose. You will rework this goal to be triggered on a Custom Event, instead of a click / page-view.

Make sure that the goal you create does not get triggered in the conventional way. If you create a Click Goal, choose an element that never gets clicked. If you create a Page-view Goal, choose a URL that never gets visited.

Give your goal a name.

Step 2: Trigger the Goal with JavaScript

Add the following piece of JavaScript to trigger the goal:

<script>
window.convertize = window.convertize || [];
convertize.push('goal', {type: 'click', name: 'name_of_your_click_goal'});
</script>

Make sure that the goal type matches the goal you created in the editor. If you created a Click goal, you should put ‘click’ for the type. If you created a page-view goal, you should replace ‘click’ with ‘page-view’:

<script>
window.convertize = window.convertize || [];
convertize.push('goal', {type: 'page-view', name: 'name_of_your_pageview_goal'});
</script>

Replace name_of_your_click_goal / name_of_your_pageview_goal with the actual name you gave your goal when you created it. This name will also appear on the results page of your experiment.

Special Use cases for Click Goals and JavaScript

Example 1: tracking all your buttons in one go

Let’s say you want to create click goals for all the buttons on your page without clicking all of them to activate tracking.

You can do this as follows:

step 1: in the editor, create a click goal for one of the button on the page and give it a name
step 2: add an event listener to you website buttons to push the conversion to Convertize, for example:

<script>
function buttonClicked() { 
    window.convertize = window.convertize || []; 
    convertize.push('goal', {type: 'click', name: 'name_of_your_click_goal'}); 
</script>

Replace name_of_your_click_goal with the name you gave the goal in step 1. This name will also appear on the results page of your experiment in a conversion graph.

Make sure the pages you fire your goal on are included in the URL targeting of your experiment.

Example 2: tracking a Lightbox modal

Let’s say you are working on a Lightbox modal or custom JavaScript library and want to track a click whenever a certain piece of JavaScript code runs. You can do this by inserting the following bit of JavaScript:

<script>
    window.convertize = window.convertize || [];
    convertize.push('goal', {type: 'click', name: 'name_of_your_click_goal'});
</script>

Replace name_of_your_click_goal with the name you gave the goal in the SmartEditor. This name will also appear on the results page of your experiment in a conversion graph.

Make sure the pages you fire your goal on are included in the URL targeting of your experiment.