Steff Yang Steff Yang - 1 year ago 60
AngularJS Question

Binding google analytics event tracking on ng-click

I'm working on a angular-based web app and wanted to do some conversion testing in my app by using Google Analytics.

The problem happens when there are many buttons that needed tracking:

For example, if a user wants to purchase a premium version, there are 5 buttons needed to be clicked during the process, and I need to bind google analytics code on each button to check what the user flow is.

Since there are lots of button to bind GA on, I do not want to create a function for each button just for GA binding purpose, so I did the binding in the following way:

<a href="" data-uk-modal="{target:'#purchasemessage'}" ng-click="ga('send', {hitType: 'event', eventCategory: 'Button', eventAction: 'click', eventLabel: 'Purchase Modal Click'});" ng-show="user.status !== 12" class="lb-primary-btn-small lb-capitalize">{{'purchase' | translate}}</a>

However, my Google Analytics did not show any data of the event tracking after several times of testing, and there is no error message either.

Wondering what may cause this kind of problem, and where to start debugging? Or there may be any other method that is more optimal to do the tracking code binding?

Answer Source

I think a better way is to write this way:

<a href="" data-uk-modal="{target:'#purchasemessage'}" ng-click="sendGA(eventData)">{{'purchase' | translate}}</a>

and in your angular controller:

$scope.sendGA = function(eventData) {
    ga('send', eventData);

So you can reuse and test the function inside your controller.