javascript - Angulartics 跟踪 Bootstrap 轮播项目的印象

Question

在我的 Angular 应用程序中，我们有一个引导轮播（由于某些原因使用引导轮播而不是 ui 引导轮播），项目结构如下

<div class="item" analytics-on analytics-event="IMPRESSIONS" analytics-category="{{--}}" analytics-label="{{--}}" ng-repeat="banner in vm.bannerList">
        <a ng-href="{{--}}" analytics-on analytics-event="CLICK" analytics-category="{{--}}" analytics-label="{{--}}">
            <div class="fill" style="background-image: url({{--}});"></div>
        </a>
</div>

点击事件工作正常。但是如何跟踪 IMPRESSIONS。展示事件需要在轮播项目变为活动时触发。

我尝试使用自定义指令观看“活动”类，但手表只在加载时间工作。

Answer 1

试过了，成功了

遵循自定义指令完成了这项工作。

//ng-track-carousel-impressions
        angular.module('app').directive('ngTrackCarouselImpressions', ['$analytics',function (analytics) {
            return {
                restrict: 'A',
                link: function (scope, element, attrs, controller) {

                // create an observer instance
                var observer = new MutationObserver(function (mutations) {
                    scope.$apply(function () {
                        if (element.hasClass('active')) {
                            //console.log(element.attr('analytics-label'));
                            // emit event track (with category and label properties for GA)
                            analytics.eventTrack(element.attr('analytics-event'), {
                                category: element.attr('analytics-category'), label: element.attr('analytics-label')
                            });
                        }
                    });
                });

                // configuration of the observer:
                var config = {
                    attributes: true
                };

                // pass in the target node, as well as the observer options
                var node = element.get(0);
                observer.observe(node, config);

            }
        }
    }]);

用法

<div class="item" analytics-event="IMPRESSIONS" analytics-category="{{--}}" analytics-label="{{--}}" ng-repeat="banner in vm.bannerList" ng-track-carousel-impressions>
            <a ng-href="{{--}}" analytics-on analytics-event="CLICK" analytics-category="{{--}}" analytics-label="{{--}}">
                <div class="fill" style="background-image: url({{--}});"></div>
            </a>
</div>