How Can I track an impression of a JS selector "trigger on show", when an event occurs in the page?

vicente_peris
Visitor
vicente_peris
I have a code similar to this one: {code:html}tab1tab2

tit prod 1

Lore ipsum 1

tit prod 2

Lore ipsum 2

tit prod 3

Lore ipsum 3
{code} I use a "jQuery onHandler" extension "triggers on show" to send an impression with the products from Tab1. But I don't know how to send the impression from Tab2 when the user push the second link.
6 REPLIES 6

How Can I track an impression of a JS selector "trigger on show", when an event occurs in the page?

Clint
Employee Emeritus
Clint
Hi Vicente, given your example above, what jQuery selector are you using to initiate the initial 'on show' view event?

How Can I track an impression of a JS selector "trigger on show", when an event occurs in the page?

vicente_peris
Visitor
vicente_peris
Hi Clint, I'm sorry, I'm seeing that the code is a bit illegible. The jQuery selector for the first tab is #contentTab1 .contentProd h3 Trigger on: show Tracking event: link It works perfectly and send the impression of all products. But I need send another impression from the other products, only when the user push in the second link to show the other tab. The selector in this case would be #contentTab2 .contentProd h3 I don't know how to fire this impression when the tab is shown, maybe using the "javascript code" extension. Thank you very much

How Can I track an impression of a JS selector "trigger on show", when an event occurs in the page?

Clint
Employee Emeritus
Clint
Vicente, I would be inclined to use {code:javascript}div.contentProd{code} as the jQuery selector as it seems to be shared across the tabs and will keep your code nice and clean. Alternatively, I believe that you can use a comma-separated list of selectors in the jQuery onHandler extension but I haven't validated that this would work for you (assuming that my memory is correct).
Highlighted

How Can I track an impression of a JS selector "trigger on show", when an event occurs in the page?

vicente_peris
Visitor
vicente_peris
Hi Clint, I think I didn't explain correctly the situation. When the page loads, the user only see the information of the first tab (the second one is hidden by display:none), so I send an impression with these products (products in first tab). Only when the user clicks on the "tab2" link (and appears the second tab) is when I need to send the new impression (products in second tab). I can use a comma-separated list of selectors: #contentTab1 .contentProd h3, #contentTab2 .contentProd h3 But in that case I would send the impression of all products when the page loads, while I need to send the list of products of the second tab only when it is shown. I guess I need to use a different extension to send the impressions for the second tab.

How Can I track an impression of a JS selector "trigger on show", when an event occurs in the page?

Clint
Employee Emeritus
Clint
Vicente, that should not be the case, let's make sure I am understanding the scenario correctly by restating what I think you're asking: What I think you are asking: "When the page loads the content in Tab 1 is visible and that information is correctly tracked with the view events that occur on page load but how can I fire view events when someone clicks on Tab 2 and that content is displayed instead of Tab 1?" If that is correct, the the jQuery onHandler extension should meet your needs, it's simply a question of finding the correct jQuery selector to trigger on. I'd recommend reaching out to your account manager to set up a working session with us so that we can step through the real code and use case with you.

How Can I track an impression of a JS selector "trigger on show", when an event occurs in the page?

vicente_peris
Visitor
vicente_peris
Clint this is more o less the situation, the point is that when someone clicks on the Tab 2 there isn't a different selector of which ones are in the page in the begining. When someone clicks on the link, the new Tab appears by a change in the style attribute (display:none -> display:block). This is why I don't know how to fire the event, I haven't a new selector. Ok, I'll speak with my account manager. Thank you very much.