javascript - 用于跟踪事件的 Google Analytics angularjs 指令

Question

您好，我正在尝试实现一个指令来跟踪 GA 的事件(例如点击事件)，但由于某种原因，该指令会随着应用程序上的任何点击事件而被触发， 这是我使用 Phonegap GA 插件的代码:

myApp.directive('bcaTrackEvent', function () {
    return {
        restrict: "A",
        link: function ($rootScope, element, attrs, ctrl) {

            $rootScope.gaPlugIn.trackEvent(function(){}, function(){}, element.type, "Click", element.name, 1);
        }
    };
});

这里是我使用它的地方:

<div id="layout">
    <p class="blank"></p>
    <p class="logo"></p>
    <p class="blank"></p>
    <div id="signOptions">
        <a ng-href="#/SignIn"><input bca-track-event name="signIn" class="bigbutton" type="button" value="{{'_SignIn_' | localizeIt}}" /></a>
        <a ng-href="#/SignUp"><input class="bigbutton" type="button"  value="{{'_SignUp_' | localizeIt}}"/></a>
        <p class="blank"></p>
        <a class="tourlink" href="#/TakeTour" data-localize-it="_TakeTour_"></a>
    </div>
</div>

Answer 1

指令的链接功能将始终在首次添加指令时运行，因此这就是您的代码每次都在运行的原因。您需要在指令的链接函数中添加一个点击事件处理程序，这将是仅在点击时运行的位。

myApp.directive('bcaTrackEvent', function () {
    return {
        restrict: "A",
        link: function ($rootScope, element, attrs, ctrl) {

            element.on("click", function() {
                 $rootScope.gaPlugIn.trackEvent(function(){}, function(){}, element.type, "Click", element.name, 1);
            });

        }
    };
});

顺便说一句，传递给链接函数的参数总是范围、元素、属性和 Controller 。您已将 $rootScope 写为参数，但实际上只是在指令内将正常范围重命名为 $rootScope。在这种情况下，范围继承意味着它无论如何都在工作，但我认为您最好将变量重命名为 scope 以防止潜在的混淆。

如果你需要真正的 $rootScope，将它注入(inject)指令本身而不是链接函数，例如

myApp.directive('bcaTrackEvent', function ($rootScope) {