Prompted by the realisation we have jQuery, improvements to link tracking

Catches more edge cases, works if GA is blocked, simpler to use.

1 files changed, 28 insertions, 17 deletions

diff --git a/templates/web/fixmystreet.com/static/posters.html b/templates/web/fixmystreet.com/static/posters.html
index 6cdc01230..4bd613fd9 100644
--- a/templates/web/fixmystreet.com/static/posters.html
+++ b/templates/web/fixmystreet.com/static/posters.html
@@ -12,13 +12,24 @@
 %]
 
 <script>
-var trackGoodieDownload = function(name, url) {
-   ga('send', 'event', 'goodie', 'download', name, {'hitCallback':
-     function () {
-     document.location = url;
-     }
-   });
-}
+
+$("[data-goodielink]").on(click, function(e){
+    var url = $(this).attr('href')
+    var name = $(this).attr('data-goodielink')
+    var callback = function(){
+        window.location.href = url
+    }
+    if(e.metaKey || e.ctrlKey){
+        callback = function(){}
+    } else {
+        e.preventDefault()
+    }
+    ga('send', 'event', 'goodie', 'download', name, {
+        'hitCallback': callback
+    })
+    setTimeout(callback, 2000);
+});
+
 </script>
 
 <div class="sticky-sidebar">
@@ -55,7 +66,7 @@ var trackGoodieDownload = function(name, url) {
     <li>Ideas for letting more people know about FixMyStreet</li>
 </ul>
 
-<a href="/cobrands/fixmystreet/posters/activist-pack.zip" onclick="trackGoodieDownload('activist-pack', '/cobrands/fixmystreet/posters/activist-pack.zip'); return false;" class="download-button">Download ZIP file</a>
+<a href="/cobrands/fixmystreet/posters/activist-pack.zip" data-goodielink="activist-pack" class="download-button">Download ZIP file</a>
 
 <h2 id="school-pack">Activity Pack for Schools, Brownies, and Scouts</h2>
 
@@ -69,7 +80,7 @@ var trackGoodieDownload = function(name, url) {
     <li>Ideas for activities</li>
 </ul>
 
-<a href="/cobrands/fixmystreet/posters/schools-clubs-pack.zip" onclick="trackGoodieDownload('schools-clubs-pack', '/cobrands/fixmystreet/posters/schools-clubs-pack.zip'); return false;" class="download-button">Download ZIP file</a>
+<a href="/cobrands/fixmystreet/posters/schools-clubs-pack.zip" data-goodielink="schools-clubs-pack" class="download-button">Download ZIP file</a>
 
 <h2 id="community-pack">Community Group Pack</h2>
 
@@ -85,7 +96,7 @@ var trackGoodieDownload = function(name, url) {
     <li>Instructions for including a feed of local FixMyStreet reports on your site or blog</li>
 </ul>
 
-<a href="/cobrands/fixmystreet/posters/community-group-pack.zip" onclick="trackGoodieDownload('community-group-pack', '/cobrands/fixmystreet/posters/community-group-pack.zip'); return false;" class="download-button">Download ZIP file</a>
+<a href="/cobrands/fixmystreet/posters/community-group-pack.zip" data-goodielink="community-group-pack" class="download-button">Download ZIP file</a>
 
 <h2 id="web">Website Badge</h2>
 
@@ -98,19 +109,19 @@ var trackGoodieDownload = function(name, url) {
 <h2 id="print">Printed Materials</h2>
 
 <ul class="downloads">
-    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-poster-a4.pdf" onclick="trackGoodieDownload('fixmystreet-poster-a4', '/cobrands/fixmystreet/posters/fixmystreet-poster-a4.zip'); return false;">
+    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-poster-a4.pdf" data-goodielink="fixmystreet-poster-a4">
         <img src="/cobrands/fixmystreet/images/a4-poster.png">
         <strong>A4 poster</strong> Ideal for a noticeboard at work, in the library, corner shop… wherever your community will see it.
     </a></li>
-    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-flyers-a5.pdf" onclick="trackGoodieDownload('fixmystreet-flyers-a5', '/cobrands/fixmystreet/posters/fixmystreet-flyers-a5.zip'); return false;">
+    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-flyers-a5.pdf" data-goodielink="fixmystreet-flyers-a5">
         <img src="/cobrands/fixmystreet/images/a5-flyers.png">
         <strong>A5 flyers (2 to a sheet)</strong> Perfect for handing out to friends or posting to subscribers.
     </a></li>
-    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-flyers-a6.pdf" onclick="trackGoodieDownload('fixmystreet-flyers-a6', '/cobrands/fixmystreet/posters/fixmystreet-flyers-a6.zip'); return false;">
+    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-flyers-a6.pdf" data-goodielink="fixmystreet-flyers-a6">
         <img src="/cobrands/fixmystreet/images/a6-flyers.png">
         <strong>A6 flyers (4 to a sheet)</strong> Great for cafés, pubs, or meetings.
     </a></li>
-    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-poop-flags.pdf" onclick="trackGoodieDownload('fixmystreet-poop-flags', '/cobrands/fixmystreet/posters/fixmystreet-poop-flags.zip'); return false;">
+    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-poop-flags.pdf" data-goodielink="fixmystreet-poop-flags">
         <img src="/cobrands/fixmystreet/images/dog-poop-flags.png">
         <strong>Doggy poop flags (4 to a sheet)</strong> Take a stand against dog-fouling with our home-made flags. Some assembly required!
     </a></li>
@@ -121,15 +132,15 @@ var trackGoodieDownload = function(name, url) {
 <p>Ideal for promoting FixMyStreet in your community newsletter or local magazine. Specially designed to stand out, and get your message across!</p>
 
 <ul class="downloads">
-    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-advert-90x130.pdf" onclick="trackGoodieDownload('fixmystreet-advert-90x130', '/cobrands/fixmystreet/posters/fixmystreet-advert-90x130.zip'); return false;">
+    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-advert-90x130.pdf" data-goodielink="fixmystreet-advert-90x130">
         <img src="/cobrands/fixmystreet/images/advert-90x130.png">
         <strong>Quarter page advert</strong> (9cm wide, 13cm high)
     </a></li>
-    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-advert-90x60.pdf" onclick="trackGoodieDownload('fixmystreet-advert-90x60', '/cobrands/fixmystreet/posters/fixmystreet-advert-90x60.zip'); return false;">
+    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-advert-90x60.pdf" data-goodielink="fixmystreet-advert-90x60">
         <img src="/cobrands/fixmystreet/images/advert-90x60.png">
         <strong>One-eighth page advert</strong> (9cm wide, 6cm high)
     </a></li>
-    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-advert-40x60.pdf" onclick="trackGoodieDownload('fixmystreet-advert-40x60', '/cobrands/fixmystreet/posters/fixmystreet-advert-40x60.zip'); return false;">
+    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-advert-40x60.pdf" data-goodielink="fixmystreet-advert-40x60">
         <img src="/cobrands/fixmystreet/images/advert-40x60.png">
         <strong>One-sixteenth page advert</strong> (4cm wide, 6cm high)
     </a></li>