Some more fun w/GA Push Events

by deanpeters

HTML

<h1>Best viewed w/Google Inspector &amp;/or Firerfox Firebug Inspect Element console open</h1>

<script type="text/javascript">
    /* Traditional snippet of Google Analytics Tracking Code */
    var _gaq = _gaq || [];
    _gaq.push(
    ['_setAccount', 'UA-34958507-1'], ['_trackPageview']);

    (function() {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = 'http://www.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
    })();
</script>
<div id="track-clicks">
     <h2>Efficient Parent->child event handling</h2>
 <a href="mailto:[email protected]">email me - test 1</a>

     <h4>More Progeny</h4> 

    <ol type="a">
        <li><a href="mailto:[email protected]">email me - test 1.a</a>

        </li>
        <li><a href="mailto:[email protected]">email me - test 1.b</a>

        </li>
        <li><a href="mailto:[email protected]">email me - test 1.c</a>

        </li>
        <li><a href="mailto:[email protected]">email me - test 1.d</a>

        </li>
        <li><a href="mailto:[email protected]">email me - test 1.e</a>

        </li>
    </ol>
</div>
<div id="do-not-track-clicks">
     <h2>NOT-so efficient Parent->child event handling</h2>
 <a href="mailto:[email protected]">email me - test 2</a>

     <h4>More Individual Listeners</h4>

    <ol type="a">
        <li><a href="mailto:[email protected]">email me - test 2.1</a>

        </li>
        <li><a href="mailto:[email protected]">email me - test 2.2</a>

        </li>
        <li><a href="mailto:[email protected]">email me - test 2.3</a>

        </li>
        <li><a href="mailto:[email protected]">email me - test 2.4</a>

        </li>
        <li><a href="mailto:[email protected]">email me - test...

CSS

h1 {
    font-size:120%;
}
h2 {
    font-size:110%;
}
#track-clicks {
    border: 1px dashed navy;
}
#do-not-track-clicks {
    border: 1px dashed orange;
}

JavaScript

/* 
    jQuery example of tracking clicks on mailto hyperlinks, but
    only those (children) within the <div /> whose  id equals 'track-clicks' 
*/
$(document).ready(function () {

    /* this approach is LESS efficient as it adds a listener to each 
     * href onclick event in the <div id="do-not-track-clicks" />
     */
    $('#do-not-track-clicks a[href^="mailto:"]').on('click', function (e) {
        // clicked on descendant div
        console.log("Not-as-efficient use of parent=>child onClick listeners");
        console.log(" -----> oh, and I said, do not CLICK!", e);
        foo(e);
        e.preventDefault();
    });



$.fn.foo = function(e) {
	console.log("Hello foo")
  return this;
}


    /* this approach is MORE efficient as it only ads one (1) listener
     * to the parent <div id="#track-clicks" /> of all the
     * individual href onclick events 
     */
    $('#track-clicks').on('click', 'a[href^="mailto:"]', function (e) {
        // halt the default behavior of the click
        console.log("more efficient parent event fire", e, $(this));
        e.preventDefault();
        var timeOutDuration = 10;
        // if the _gaq is an object, let's push some data into the _gaq
        if (typeof (_gaq) === "object") {
            _gaq.push(['_setCampNameKey', 'mailTo']);
            _gaq.push(['_setCampMediumKey', navigator.userAgent]);
            _gaq.push(['_setCampSourceKey', document.title]);
            _gaq.push(['_setCampTermKey', e.currentTarget.href]);
            _gaq.push(['_setCampContentKey', e.currentTarget.baseURI]);
            _gaq.push(['_trackPageview', e.currentTarget.baseURI + '#' + e.currentTarget.href]);
            _gaq.push(["_trackEvent", "mailTo", e.currentTarget.href, e.currentTarget.baseURI, 0, true]);
            console.log("child-based _gaq.push(gaqMsg) => ", _gaq);
            timeOutDuration = 750;
        } 
        // set a timer so we give the _gaq enough time to work (3/4 of a second)
       ...