Plugin Author
Baden
(@baden03)
can you explain exactly what you are trying to accomplish? What, exactly is to happen when you click the link?
The item is to expand/collapse AND jump to another page?
Or do you just want to fire some javascript?
Hi Baden,
I’d like to hide the full telephone number so desktop user have to click on the 12345xxx part to see the the full number which I’ll be able to track in Google Analytics. In addition, I’d like to give the full number a clicktocall function for mobile users (tel:) to improve user experience. So I don’t want it to jump to another page.
I get both features to work when it expands below. However, I’d like to make use of the swaptitle feature instead so the full number shows where the 1234xxx part is. Any idea how I can accomplish this?
Plugin Author
Baden
(@baden03)
Couple of things:
1. the basic swaptitle function with a link would look like:
[expand title="click me" swaptitle="<a href='http://plugins.twinpictures.de'>go here</a>"]When you clicked, the title swaps out with a link[/expand]
2. if you want to trigger a script to fire, then you really should not use a link. What you might try is the following:
[expand title="click me" swaptitle="<span class='trackme' id='8675309'>8675309</span>"]When you clicked, the title swaps out with a number, when you click the number it jQuery takes care of the rest[/expand]
and then you need to add some jQuery to your theme. If you are using version 1.5.1 or newer you can just add something like the following to your theme’s footer.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.trackme').livequery('click', function(event) {
track_id = jQuery(this).attr('id');
alert(".trackme Handler called for " + track_id);
//your tracking code goes here
_gaq.push(['_trackEvent', 'Button', 'Clicked', track_id]);
return true;
});
});
</script>
Have fun storming the castle.
Hi Baden and other readers,
I’ve conquered the castle 🙂
For those also looking for a solution, the following code will do the following:
-visitors will have to click to show the entire phone number
-these clicks can be tracked in Google Analytics
-on mobile devices the full phone number can be touched and it will call the number
Here is the code:
[expand title="+27 23 456 XXXX (click to show)" swaptitle="<a href='tel:+27 23 456 7890'>+27 23 456 7890</a>" trigclass="noarrow" id="button" alt="Click to show number"]On mobile: touch number to call[/expand]<script type="text/javascript">
jQuery("#button").attr("onClick", "_gaq.push(['_trackEvent', 'button', 'clicked', 'label']);return true");
</script>
Enjoy it!
Plugin Author
Baden
(@baden03)
Well done largest of the leafs! Thank you for sharing your solution.