Record Conversions when Element is Hovered

Target / Approach

On this article, we are going to cover how can we trigger conversion(s) when an element is hovered. To achieve this we will create a JS Custom Goal and a piece of code to trigger the conversion on the experience.

1. Create a Javascript Triggered Goal

a) Navigate to Projects > Your Project > Goals > Add Goal > JavaScript triggered goal

mceclip2.png mceclip4.png

b) Name your goal
mceclip5.png

c) Take note of the Goal ID:

mceclip6.png

2. Add code to trigger conversions

a) From the Visual Editor, open the Global Experience JS:
mceclip7.png

b) Paste the code below on Global Experience JS:

convert.$(document).ready(function() {

//Reset Hover Status and Conversion Count
var hoverTrue; hoverTrue = "Not Hovered";
console.log(hoverTrue);

var triggerHoverGoal; triggerHoverGoal = 0;
console.log(triggerHoverGoal);

//Add Hover function on the element
//Replace "yourElement" (use #elementId or .elementClass)

convert.$("yourElement").on("mouseenter",function() {
if (triggerHoverGoal == 0){
hoverTrue = "mousein";
console.log(hoverTrue);

//Push conversion on hover
//Replace "1003654" with your goal ID.

window._conv_q = window._conv_q || [];
_conv_q.push(["triggerConversion","1003654"]);
console.log("Hover Goal Triggered");
goalTriggered = 1;
}
});
});

mceclip8.png

3. Activate goal on your experience

a) From the Experience Summary page, click on the icon below highlighted on the side of the Goals section:

mceclip10.png

b) Activate the goal:

mceclip9.png

Need assistance? Start a conversation with our Support Team.
CONVERT MORE

Reliably Convert More Site Visitors, Even If Everything Else is Changing in Your Business.

START 15-DAY FREE TRIAL
✓ No Credit Card  ✓ Easy Set-Up  ✓ Access All Features

Comments