CODEWITHSUNDEEP
javascriptangularjsgoogle-analyticsangular-ui-router
opensas
opensas

Reputation: 63405

tracking href click with angular.js and google analytics

I have a web application which lets users download files. I dynamically generate the a href="xx" links.

I've already seen this article explaining how to track routes with Angular: http://www.arnaldocapo.com/blog/post/google-analytics-and-angularjs-with-ui-router/72

How can I also track each file downloaded by the users?

Upvotes: 1

Views: 3328

Answers (3)

opensas
opensas

Reputation: 63405

Finally this is how I solved it, thanks to newg and David Grinberg.

I didn't go with the $location.path() solution because I wanted the link to open in a new window with the target='_blank'

html

<a href='{{ item.url }}' target='_blank' ng-click='trackDownload(item)'>
  {{ item.name}}
</a>

controller

$scope.trackDownload = function(item) {
  if (!$window.ga) return;
  $window.ga('send', 'event', 'download', item.full);
};

Upvotes: 1

nweg
nweg

Reputation: 2865

You want to use ng-click for this. I would also use GA's event tracking to track this metric. Here's an example:

<a href="#" ng-click="logDownload()">Download</a>

$scope.logDownload = function () {
    $window.ga('send', 'event', 'Download', 'File Name'); //This would log a GA Event
    $location.path('your path to download the file'); //use this if you are linking to an angular route
};

Make use to inject $window and $location into your controller. Use $window to keep your code testable.

Upvotes: 1

David says Reinstate Monica
David says Reinstate Monica

Reputation: 20129

I'm not familiar with the details of how Google analytics works, but you can track user downloads (or any other actions) by essentially creating your own man in the middle attack (just without anything malicious).

Simply add an ng-click to the download link that kicks off a promise which logs somewhere that the item was downloaded

<a href="..." ng-click="log()">Click here to download!</div>

$scope.log = function(){
    //$http post or whatever you want
    //Then resume normal click functionality
}

Upvotes: 1

Related Questions