How to add onClick code to menu links ?
-
-
- Ed Croteau
- Sr. Rocketeer
- Posts: 173
- Thanks: 0
-
Does anyone know how to add onClick code to menu links ? I need it for cross-domain tracking on Google Analytics.
I tried the plugin JinMenu but couldn't get it to work on WP 3.5.1 with current Fresco RT template.
I don't want to edit Wordpress core if at all possible.
Thanks,
Ed
-
-
-
- Shazdeh
- Elite Rocketeer
- Posts: 4984
- Thanks: 29
-
Hi,
you can edit the FusionMenu or SplitMenu layout file to add the onClick code to the menu items. Open up html/gantrymenu/themes/gantry_fusion/layout.php file and look for renderItem function. This is where it outputs the individual menu items; find the "a" tag and you can add the code in there. - Please don't PM unless requested
Consider using the custom stylesheet for all your CSS customizations: gantry-framework.org/documentation/wordp...custom_stylesheet.md .
Please provide the URL to the issue.
And please mark the thread as solved if the issue is resolved.
-
-
-
- Ed Croteau
- Sr. Rocketeer
- Posts: 173
- Thanks: 0
-
Shazdeh,
Thanks for the quick reply.
2 questions :
1. will a Fresco template update overwrite this code ?
2. I tried the following php code at the end of the <a tag but it doesn't work, any ideas ?
<?php echo "onclick=\"_gaq.push(); return false;\"" ?>
Note the escaped quotes and use of double quotes ... I'm not a PHP guy but found references to escaping quotes.
Ed
-
-
-
- Shazdeh
- Elite Rocketeer
- Posts: 4984
- Thanks: 29
-
Hi,
most certainly not. It works, so it would not change overtime. But with each update we also publish a list of modified files, so you can keep an eye on that.
For the onclick code, no need to echo it with PHP. Simply add the onclick="[codes,,,]" attribute at the end of the "a" tag. In the FusionMenu layout file for Fresco theme, it's located on line 133. - Please don't PM unless requested
Consider using the custom stylesheet for all your CSS customizations: gantry-framework.org/documentation/wordp...custom_stylesheet.md .
Please provide the URL to the issue.
And please mark the thread as solved if the issue is resolved.
-
-
-
- Ed Croteau
- Sr. Rocketeer
- Posts: 173
- Thanks: 0
-
Thanks.
Ok, so I was in the wrong place. Now my line 133 looks like this :
<a <?php if ($item->hasLinkClasses()): ?>class="<?php echo $item->getLinkClasses().$activeToTop; ?>" <?php endif;?><?php if ($item->hasLink()): ?>href="<?php echo $item->getLink();?>" <?php endif;?><?php if ($item->getTarget()): ?>target="<?php echo $item->getTarget();?>" <?php endif;?><?php if ($item->hasLinkAttribs()): ?><?php echo $item->getLinkAttribs(); ?><?php endif;?> onclick="_gaq.push(); return false;">
The pages load without error but is there a way to test if the onclick is actually coming through besides waiting for GA data in a few days ?
Does it appear that I added it correctly ?
Thanks,
Ed
-
-
-
- Shazdeh
- Elite Rocketeer
- Posts: 4984
- Thanks: 29
-
Hi,
you can do a console.log call to see if it's getting the onclick handler. Try this:This will print a "clicked!" message in the console when the link is clicked. To see it bring up the console (press F12) and now it should output that message when the link is clicked.onclick="_gaq.push(['_link', 'http://www.jedzebel-ecogirl-hatagirl.com]); console.log('clicked!'); return false;"
Remember to remove that console.log call afterwards. - Please don't PM unless requested
Consider using the custom stylesheet for all your CSS customizations: gantry-framework.org/documentation/wordp...custom_stylesheet.md .
Please provide the URL to the issue.
And please mark the thread as solved if the issue is resolved.
-
-
-
- Ed Croteau
- Sr. Rocketeer
- Posts: 173
- Thanks: 0
-
I'm on a Mac and I found out that F12 is console for Windows. I did however search all log files on the Mac via the Console utility and found no results for "clicked".
Upon viewing page source however it does look like the <a> tags have the onclick code in them for the menus ...
-
-
-
- Shazdeh
- Elite Rocketeer
- Posts: 4984
- Thanks: 29
-
This may help:
stackoverflow.com/questions/4743730/what...-and-how-do-i-use-it
.
In Chrome you can right click and choose "Inspect Element" and then click on the Console tab. There you can see all the messages that are sent via console.log. - Please don't PM unless requested
Consider using the custom stylesheet for all your CSS customizations: gantry-framework.org/documentation/wordp...custom_stylesheet.md .
Please provide the URL to the issue.
And please mark the thread as solved if the issue is resolved.
-
-
-
- Ed Croteau
- Sr. Rocketeer
- Posts: 173
- Thanks: 0
-
Thanks. The Chrome Inspect Element doesn't let me see it though since the link whisks me away to the new page ...
I'm going to just see if it's working by checking GA in a few days.
Thanks so much for your help - I think it's working now.
Ed
-
Time to create page: 0.084 seconds