2

I'm trying to track downloads as events in Google Analytics for file fields. The links are displayed in Views using "Rewrite results."

I tried the following:

<a onclick="var that=this;_gaq.push(['_trackEvent','Download','Windows',this.href]);setTimeout(function(){location.href=that.href;},400);return false;" href=[field_windows]>Windows</a>

But the onclick part gets stripped out by Views. I know the Full HTML filter does this by default, but how do I get around it?

6
+50

Views will indeed strip out onclick attributes. You can work with data attributes and use an external JS file to add the onclicks. Example for Views rewrite:

<a href="#mylink" data-event-type="Download" data-event-xxxx="Windows">[myfield]</a>

External Javascript (jQuery example):

jQuery(document).ready(function(){
 if(jQuery("a[data-event-type]"){
   jQuery("a[data-event-type]").click(function(){
    _gaq.push(['_trackEvent',jQuery(this).attr('data-event-type'),...........);
   });
 }
});
4

It would probably be better to add a class to the element and then attach the click event via a JS behavior anyway.

I don't think this field uses text formats at all, but must apply some default level of filtering e.g. filter_xss().

Edit: Here's an example that attaches the tracking and download using a class and the link text for the event name.

<a class="download-link" href="[field_windows]">Windows</a>

Add this to your theme or module JS:

(function ($) {
  Drupal.behaviors.triggerDownload = {
    attach: function (context, settings) {
      $('.download-link').once('trigger-download').click(function (e) {
          var href = this.href;
          _gaq.push(['_trackEvent', 'Download', $(this).text(), href]);
          setTimeout(function(){
            window.location.href = href;
          }, 400);
          e.preventDefault();
      });
    }
  };
}(jQuery));
  • Thanks for the insight, but I'm not very familiar with JS. How would I attach the click event via a JS behavior? – Patrick Kenny Mar 13 '14 at 5:48
  • Added an example. Just seen Kevin's solution. Data attributes are definitely another option. I would strongly recommend using Drupal behaviors rather than attaching to document ready though. – gigabates Mar 13 '14 at 14:06
  • Why should I use Drupal behaviors instead of document ready? – Patrick Kenny Mar 14 '14 at 7:08
  • 1
    @PatrickKenny see drupal.stackexchange.com/a/12026/487 – Capi Etheriel Mar 17 '14 at 1:17
2

You can use the GA Push module.

This module allows you to send events to GA when certain JS events happens. You can define this interactions using its GUI.

0

It shouldnt be stripping the onclick if you have Full HTML selected. Are you using Ck Editor 4.1 +?

Theres a known issue where tags are being stripped if you dont edit the .js file directly, or add config.allowedContent = true; into the Advanced Content Filter settings.

From the CKeditor project page:

Note for CKEditor 4.1+ users

If you are using CKEditor 4.1+, you should adjust Advanced Content Filter settings. If you have any trouble implementing this feature, you can turn it off by setting:

config.allowedContent = true;

in the Custom JavaScript configuration field of the Advanced Options setion for your CKEditor profiles.

  • I'm not using CKEditor; I'm using the standard Views UI, which allows Full HTML by default (that's my understanding, anyway). – Patrick Kenny Mar 5 '14 at 1:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.