How to handle hover tracking within a modal, including limiting to one custom link request withn the modal? | Community
Skip to main content
M
mmacdona12
Level 2
December 28, 2016
Solved

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

  • December 28, 2016
  • 9 replies
  • 16551 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by EricMatisoff

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!

9 replies

EricMatisoff
Adobe Employee
EricMatisoffAdobe Employee
Adobe Employee
January 4, 2017

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?

M
mmacdona12Author
Level 2
January 5, 2017

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

EricMatisoff
Adobe Employee
EricMatisoffAdobe Employee
Adobe Employee
January 5, 2017

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?

M
mmacdona12Author
Level 2
January 5, 2017

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
Adobe Employee
EricMatisoffAdobe Employee
Adobe Employee
January 5, 2017

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?

M
mmacdona12Author
Level 2
January 6, 2017

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
Adobe Employee
EricMatisoffAdobe EmployeeAccepted solution
Adobe Employee
January 6, 2017

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!

M
mmacdona12Author
Level 2
January 6, 2017

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
Adobe Employee
EricMatisoffAdobe Employee
Adobe Employee
January 6, 2017

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. 

Terms & ConditionsAccessibility statement

Loading footer...