How to handle hover tracking within a modal, including limiting to one custom link request withn the modal?

[matthewm6400105]

Our business team is adding a modal that has an image with different hotspots that a user can hover over and reveals information. I'm only wanting to set a custom link upon the first 'hover' of the image, to cut down on the number of requests and will still give the business an idea of the 'interaction' with the hotspots. What would be the best method to handle that?

[EricMatisoff]

Hi Matthew - are you using DTM? If so, in the rule you can check for the existence of a pageview-level data element. If it exists, don't fire the rule (because it already ran). If it doesn't exist, create it, then fire the rule.

You could do something similarly with cookies if DTM is not available.

Make sense?

[matthewm6400105]

No, we're not currently using DTM, so I would need to know a solution using cookies.

[EricMatisoff]

Ah - that'd be my first suggestion would be to migrate to DTM. But in the meantime, something like this pseudo-code should work:

//This goes in your hover listener if( getCookie('alreadyHovered') !== true){ setCookie('alreadyHovered',true); s.tl( /*whatever your custom link is for hovering*/ );

You'll also want to set up a rule for when the cookie should be cleared. Is it on every page? Is it on every visit? etc. Once you define that, either clear the cookie or set it to false. For example, if you were looking to only track one hover per pageview, then you could set something like this on load of every page:

setCookie('alreadyHovered',false)

Make sense?

[matthewm6400105]

The hover tracking is actually within a pop-up Ajax style modal on the page itself and isn't part of a new s.t request. Does that matter?

[EricMatisoff]

Sorry, I'm not following. I thought you said you were looking to limit the custom link to only one request in the modal. Wouldn't the modal have to have an s.tl() call in order to have it tracked?

[matthewm6400105]

No, the modal itself doesn't need to set an s.tl call, just on the click of the hotspot image within the modal.

[EricMatisoff · Accepted solution]

Ah, well that makes things even more fun :)

I'd say you'd want to do similar logic in the pseudo-code above:

//This goes in your hover listener if( getCookie('alreadyHovered') !== true){ setCookie('alreadyHovered',true); }

Then something like this goes in your s.t() call onClick:

if(getCookie('alreadyHovered')) //set your eVar/prop/event s.tl(); //this would be what you're already calling setCookie('alreadyHovered',false); //this clears the cookied so the next hover is tracked.

Keep in mind a few things:

1 - this is pseudo-code. Don't copy/paste.
2 - if the business team wants it, they can also capture an identifying feature of the module that is hovered. For example, "fall campaign" or something like that. You could set that identifying feature into the cookie instead of true/false, then pass that into your evar or prop that they've specified.

Hope that helps!

[matthewm6400105]

Great info! I'll definitely take this into account. If I wanted to measure 'Time Spent on Modal', would I need to set an s.tl call for the overall modal I described above and what would the logic be around that?

[EricMatisoff]

Correct - you'll need to make a call when the modal appears, then another one on click. Keep in mind you'll need to use the same variable in both tags with a different value in it, so you can easily see the avg time spent. For example:

prop1 = modal appears
prop1 = modal click
prop1 = modal dismissal        //for when the modal is closed but a value is not clicked

This way the prop1 report will show the amount of time spent on the modal appears value.