Alternative to jQuery onclick handler?

[zed_haque]

I have started event tracking using jQuery Tealium extension. But now I have 50+ Tags.. this has started to become a management nightmare.

What are my options? JavaScript extension? But what/how you organize the code - also does extension supports folders - at least I could hide all my 50+ tag..

Advise please...

[dan_george]

Hi Zed,

If I may ask for a bit of clarification, when you say you have 50+ tags, do you mean 50+ extensions? I ask because we typically recommend only a single vendor tag (e.g. Google Analytics) and then many extensions (e.g. jQuery or Set Data Values) to manage the global data set. Think of it that the Tag should have the static data like your vendor account id whereas the extensions allow you to mange the dynamic data that changes per page view or event.

I also recommend making use of the "Duplicate" feature of extensions. If you're always sending the GA event tracking category action and label, using duplicate will allow you to only change the jQUery selector and the values to be sent, making the configuration a bit easier.

Lastly, the use of Labels will help with your filtering needs. You can filter the list on Labels to only see the those you need. 

I hope this is the nudge in the right direction, but please let me know if not or if there are any further questions.

Cheers,
-Dan

[BenStephenson · Accepted solution]

Hi @zed_haque

If I have a lot of handlers to add then I group them in to functional groups and use a javascript extension rather than the templated handler extensions.

Example:

I have a site where the SPA fires window events on interesting changes, so we've configured Tealium with about 10 extensions that contain related handlers, which then deal with the events.

For example:

Ext: Navigation Handlers

$(window).on("logo_click", (event,data) => { ... utag.link(data); } );
$(window).on("nav_button_click", (event,data) => { ... utag.link(data); } );

Ext: Search Handlers

$(window).on("perform_search", (event,data) => { ... utag.link(data); } );
$(window).on("search_result_click", (event,data) => { ... utag.link(data); } );

Ext: Registration Journey Handlers

$(window).on("registration_start", (event,data) => { ... utag.link(data); } );
$(window).on("registration_step_change", (event,data) => { ... utag.link(data); } );
$(window).on("registration_complete", (event,data) => { ... utag.link(data); } );

And so on...

This means we've got about thirty handlers into about ten extensions.

Is that similar to what you are trying to do?

[zed_haque]

Thanks Ben! This is an awesome solution. :) I will use this !!