How to Implement a Custom Conversion Goal 

Last updated

A custom conversion goal lets you create a goal by triggering a JavaScript code snippet. After you create a custom goal, VWO generates a smart code snippet that you can add to the target pages to track conversions on external pages. A custom conversion goal is typically defined to track goals that are not directly related to clicks or URLs.

For example, consider that your website displays a pop-up window at certain instances of a flow (say, while making a purchase). The pop-up window is outside the page URL, so VWO default goals cannot track the events on the pop-up window. To track the events on this window, you can create a custom conversion goal by triggering a JavaScript code on the page URL.

ATTENTION After creating the custom conversion goal, VWO generates a custom conversion code for the goal you created. You must add the code snippet anywhere on the page where the event is triggered.

Follow these steps to create a custom conversion goal:

  1. On the Conversion Goals page, select the tracks custom conversion on option from the drop-down list.custom-goals-1
  2. Select the appropriate URL type and then enter the URL, pattern, or regular expression of the page where you want to track the conversion.
  3. Click Next and then complete the remaining test configurations.
  4. On the final Code Checker Status page, go to the bottom of the page where you will find the custom conversion code snippet as follows:
    <script type="text/javascript">window._vis_opt_queue = window._vis_opt_queue || [];window._vis_opt_queue.push(function() {_vis_opt_goal_conversion(204);});</script>
    Note: The custom conversion code is unique to each custom goal you define for a test.
  5. To make a custom conversion goal work, you need to execute this snippet of code whenever you wish to fire the conversion. It can be on a button click, link click, success of Ajax request, and so on.
  6. For example, to trigger a custom conversion goal bound to a click event of an anchor tag, specify the code as follows:
    <a onclick="window._vis_opt_queue=window._vis_opt_queue||[];window._vis_opt_queue.push(function(){_vis_opt_goal_conversion(200)});" href="#"> <span>Sign Up</span> </a>
  7. In this example, the code snippet is bound to the on-click event of the anchor tag. Click the anchor tag to fire the conversion.
  8. To reuse a custom conversion goal across multiple tests, select the goal from your Frequently Used Goals section.

Best Practices

Always use the queue functionality to ensure that your custom conversion goal gets fired after VWO Smart Code. The following is an example of how to use the queue functionality:

window._vis_opt_queue = window._vis_opt_queue || [];

//Do change the Goal ID below (currently shown as 200) to the one shown in the code snippet tab of the test.

window._vis_opt_queue.push(function() {_vis_opt_goal_conversion(200);

Was this article helpful?

Thanks for your feedback!
Please email us at support@vwo.com to tell us what you were looking for. We'll send the answer to your inbox.

Contact Us / Login

Product
Resources Home