0

私の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>

クリックイベントは正常に機能しています。しかし、印象を追跡する方法。インプレッション イベントは、カルーセル アイテムがアクティブになったときにトリガーする必要があります。

カスタム ディレクティブを使用して「アクティブ」クラスを監視しようとしましたが、監視はロード時間でしか機能しませんでした。

4

1 に答える 1

0

試して成功した、

次のカスタムディレクティブは仕事をしました。

//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>
于 2015-12-21T09:04:05.360 に答える