Appending Title to Google Event Tracking Code

Question

I run a podcast using Podpress on Wordpress with Thesis installed. Currently, Podpress has its own internal stats system for tracking plays and downloads, but I'd like to extend it by adding some Google Events Tracking when listeners click do download/play/whatever a media file. Below, I've included an example of the HTML code that our system generates for a new entry:

<div class="teasers_box">

            <div id="post-2855" class="post-2855 post type-post status-publish format-standard hentry category-episodes teaser">

<h2 class="entry-title"><a title="Permanent link to Show Title" rel="bookmark" href="http://www.test.com/2012/02/22/show-title/">Show Title</a></h2>
<abbr title="2012-02-22" class="teaser_date published">February 22, 2012</abbr>

<div class="format_teaser entry-content">
<p>Show Description</p>
<div class="podPress_content podPress_content_audio_mp3">
<div style="display:block;" class="podpress_playerspace podpress_playerspace_audio_mp3 podpress_mp3player"></div>

<div class="podPress_downloadlinks podPress_downloadlinks_audio_mp3"><a class="podpress_downloadimglink podpress_downloadimglink_audio_mp3" title="Download: Show Title" target="new" href="http://www.test.com/podpress_trac/web/2855/0/2012_02_22_showtitle.mp3"><img alt="" class="podPress_imgicon podpress_imgicon_audio_mp3" src="http://www.test.com/wp-content/plugins/podpress/images/audio_mp3_button.png"></a> <span class="podpress_mediafile_title podpress_mediafile_title_audio_mp3">Show Title</span> <span class="podpress_mediafile_dursize podpress_mediafile_dursize_audio_mp3">[ 39:21 ]</span> <a class="podpress_downloadlink podpress_downloadlink_audio_mp3" target="new" href="">Download</a></div></div>
</div>

I have some jQuery code that some kind folks helped me with earlier on this board. I've been tinkering with it to try and figure out exactly what I want. For now, here is what I have:

$('a.podpress_downloadlink_audio_mp3').click(function(e) {
     e.preventDefault();
      var $a = $(this);
      //  $a is the anchor that was clicked. you can access attributes or its  text to populate the _gaq.push call below.  e.g. var text = $a.text();

     var title = $a.closest('entry-title').text();
     _gaq.push(['_trackEvent', 'Podcasts', 'Download', title]);
    });

Basically, my problem is that I need to sort back through the DIV in order to pick up the title of the podcast episode (in this example, it's just "Show Title") which I can pass along to Google Analytics. I'm trying to use the .closest() technique to do this, but I'm thinking I'm using this incorrectly. Though I'd like to go in and actually modify the PHP behind the Podpress plugin with this, my fear is that an update will wipe out my code and force me to re-do it at some point. It may be easier to write a script that snaps this functionality on top.

Any advice on how to acquire this title would be greatly appreciated. My current efforts seem to be failing.

Thanks in advance!

score 1 · Accepted Answer · answered Mar 01 '12 at 02:01

I know what you mean about not changing the PHP in the module, you always want to avoid that when possible.

Not knowing how your html will look with multiple podcast nodes, you could try this - http://jsfiddle.net/CcdDA/

var title = $a.parents('.format_teaser').siblings().prev('h2.entry-title').text();

Worked for me. Hope it helps!

score 0 · Answer 2 · answered Mar 01 '12 at 00:47

0

You're missing .:

var title = $a.closest('.entry-title').text(); // `.entry-title`

answered Mar 01 '12 at 00:47

elclanrs

92,861
21
134
171

Good find. However, if I put an "alert(title);" on there, I don't see anything come up. Am I referencing it correctly since it lives in the h2 tag above the link? – ndisdabest Mar 01 '12 at 01:25

Appending Title to Google Event Tracking Code

2 Answers2