Avia Layout Builder, Tabs and Google Event Handlers

Not quite,

The page I’m talking about is here: http://goo.gl/S2FB8B

I want to set an event on the tabs so that I can track when people have opened one of the tabs, such as “company goals” or “Company objectives”.

To do that, each tab needs a unique ID or Class that I can trigger the google event tracking code off, but they don’t have unique IDs or Classes. I was wondering how I can add them.

Rob.

That’s good, but how do I set the prefix. Is there something I can do from within the page editor? Some elements have the ability to add a class to them from within the editor, but the Tab element isn’t one of them, unless I’m missing something?

But I have multiple tab ‘blocks’ on screen and the class is only unique for each tab within the block.

I also have another little problem. I’m using a WP plugin to help embed the Google Event code. If the class or ID has a space in it, the plugin replaces it with a – so the final rendered page doesn’t work. I probably need to find a better one…

Well, that *should* do it and I thank you for you patience on this one, but it doesn’t work. I’ve changed the code and the new ID is not getting added to the page. To make sure I’m not getting the old stuff cached, I cleared all the caches and I still don’t see the new ID. To make absolutely sure it’s not a caching issue, I added a syntax error to the .php code you suggested above and sure enough, that broke the site, so I know I’m using the latest version of the file.

I’ve no idea why the code you supplied isn’t making a change to the outputted HTML…..? I’ve tried doing things like added some free text to the line e.g. $output .= ‘ HELLO <div data-fake-id=”#’.$tab_atts[‘custom_id’].’… but the HELLO isn’t getting output either. I must be missing something somewhere, I don’t really know much about all of this, I’m just hacking to see what happens. I’m sure it would make a developer cry!

YES!
YES!
YES!

It works. Thank you for your support Josue, spot on.

If anyone else finds this thread, then you need to make the change Josue suggests above and I’m using a WordPress plugin called WP Google Analytics Events Settings to help me set-up all the event triggers.

With this change, even if you have multiple tabs on the same page, you get unique IDs so it all works.

One thing to note though. Because the plugin adds a # to the code (when setting up the triggers), then I removed the one Josue suggests to put in, so I changed the PHP line to this:

$output .= ‘ <div data-fake-id=”#’.$tab_atts[‘custom_id’].'” id=”‘.$tab_atts[‘custom_id’].'” class=”tab ‘.$titleClass.'” ‘.$markup_title.’>’.$icon.$tab_atts[‘title’].'</div>’.”\n”;

Thank you.