ติดตามการเปิดดูหน้า Google Analytics ด้วย AngularJS

ฉันตั้งค่าแอพใหม่โดยใช้ AngularJS เป็นส่วนหน้า ทุกอย่างในฝั่งไคลเอ็นต์นั้นใช้ HTML5 pushstate และฉันต้องการติดตามดูหน้าเว็บของฉันใน Google Analytics

หากคุณกำลังใช้งานng-viewในแอพพลิเคชั่น Angular คุณสามารถฟัง$viewContentLoadedเหตุการณ์และผลักดันกิจกรรมติดตามไปที่ Google Analytics

สมมติว่าคุณตั้งค่ารหัสติดตามในไฟล์ index.html หลักของคุณด้วยชื่อvar _gaqและ MyCtrl คือสิ่งที่คุณกำหนดไว้ในng-controllerคำสั่ง

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window._gaq.push(['_trackPageView', $location.url()]);
  });
}

อัปเดต: สำหรับ Google Analytics รุ่นใหม่ใช้อันนี้

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', { page: $location.url() });
  });
}

เมื่อมีการโหลดมุมมองใหม่AngularJSGoogle Analytics จะไม่นับเป็นการโหลดหน้าเว็บใหม่ โชคดีที่มีวิธีบอก GA ด้วยตนเองเพื่อบันทึก URL เป็นการดูหน้าเว็บใหม่

_gaq.push(['_trackPageview', '<url>']); จะทำงานอย่างไร แต่จะผูกกับ AngularJS ได้อย่างไร

นี่คือบริการที่คุณสามารถใช้:

(function(angular) { 

  angular.module('analytics', ['ng']).service('analytics', [
    '$rootScope', '$window', '$location', function($rootScope, $window, $location) {
      var track = function() {
        $window._gaq.push(['_trackPageview', $location.path()]);
      };
      $rootScope.$on('$viewContentLoaded', track);
    }
  ]);

}(window.angular));

เมื่อคุณกำหนดโมดูลเชิงมุมของคุณให้รวมโมดูลการวิเคราะห์ดังนี้:

angular.module('myappname', ['analytics']);

อัปเดต :

คุณควรใช้รหัสติดตาม Universal Google Analytics ใหม่ด้วย:

$window.ga('send', 'pageview', {page: $location.url()});

app.run(function ($rootScope, $location) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview', $location.path());
    });
});

เพียงแค่เพิ่มอย่างรวดเร็ว หากคุณกำลังใช้งาน analytics.js ใหม่ให้ทำดังนี้:

var track = function() {     
 ga('send', 'pageview', {'page': $location.path()});                
};

นอกจากนี้หนึ่งเคล็ดลับคือการวิเคราะห์ของ Google จะไม่ทำงานบน localhost ดังนั้นหากคุณกำลังทดสอบ localhost ให้ใช้คำสั่งต่อไปนี้แทนการสร้างค่าเริ่มต้น ( เอกสารฉบับเต็ม )

ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});

ฉันได้สร้างบริการ + ตัวกรองที่สามารถช่วยพวกคุณในเรื่องนี้และอาจจะมีผู้ให้บริการอื่น ๆ อีกด้วยหากคุณเลือกที่จะเพิ่มพวกเขาในอนาคต

ตรวจสอบhttps://github.com/mgonto/angularyticsและแจ้งให้เราทราบว่าสิ่งนี้ได้ผลสำหรับคุณอย่างไร

การรวมคำตอบโดย wynnwu และ dpineda เป็นสิ่งที่ทำงานให้ฉัน

angular.module('app', [])
  .run(['$rootScope', '$location', '$window',
    function($rootScope, $location, $window) {
      $rootScope.$on('$routeChangeSuccess',
        function(event) {
          if (!$window.ga) {
            return;
          }
          $window.ga('send', 'pageview', {
            page: $location.path()
          });
        });
    }
  ]);

การตั้งค่าพารามิเตอร์ที่สามเป็นวัตถุ (แทนที่จะเป็นเพียงแค่ $ location.path ()) และการใช้ $ routeChangeSuccess แทนที่จะเป็น $ stateChangeSuccess ทำเคล็ดลับ

หวังว่านี่จะช่วยได้

ฉันได้สร้างตัวอย่างง่ายๆใน gitHub โดยใช้วิธีการข้างต้น

https://github.com/isamuelson/angularjs-googleanalytics

วิธีที่ดีที่สุดในการทำเช่นนี้คือการใช้ Google เครื่องจัดการแท็กเพื่อเริ่มการทำงานของแท็ก Google Analytics ของคุณตามผู้ฟังประวัติ สิ่งเหล่านี้สร้างขึ้นในอินเทอร์เฟซ GTM และอนุญาตให้ติดตามการโต้ตอบ HTML5 ฝั่งไคลเอ็นต์ได้อย่างง่ายดาย

เปิดใช้งานตัวแปรประวัติในตัวและสร้างทริกเกอร์เพื่อเริ่มต้นเหตุการณ์ตามการเปลี่ยนแปลงประวัติ

ในของคุณindex.htmlคัดลอกและวางข้อมูลโค้ด ga แต่ลบบรรทัดga('send', 'pageview');

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-XXXXXXXX-X');
</script>

ฉันชอบที่จะให้มันเป็นไฟล์โรงงานของตัวเองmy-google-analytics.jsด้วยการฉีดตนเอง:

angular.module('myApp')
  .factory('myGoogleAnalytics', [
    '$rootScope', '$window', '$location', 
    function ($rootScope, $window, $location) {

      var myGoogleAnalytics = {};

      /**
       * Set the page to the current location path
       * and then send a pageview to log path change.
       */
      myGoogleAnalytics.sendPageview = function() {
        if ($window.ga) {
          $window.ga('set', 'page', $location.path());
          $window.ga('send', 'pageview');
        }
      }

      // subscribe to events
      $rootScope.$on('$viewContentLoaded', myGoogleAnalytics.sendPageview);

      return myGoogleAnalytics;
    }
  ])
  .run([
    'myGoogleAnalytics', 
    function(myGoogleAnalytics) {
        // inject self
    }
  ]);

ฉันพบว่าgtag()ฟังก์ชั่นใช้งานได้แทนga()ฟังก์ชั่น

ในไฟล์ index.html ภายใน<head>ส่วน:

<script async src="https://www.googletagmanager.com/gtag/js?id=TrackingId"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'TrackingId');
</script>

ในรหัส AngularJS:

app.run(function ($rootScope, $location) {
  $rootScope.$on('$routeChangeSuccess', function() {
    gtag('config', 'TrackingId', {'page_path': $location.path()});
  });
});

แทนที่TrackingIdด้วยรหัสติดตามของคุณเอง

หากมีคนต้องการนำไปใช้โดยใช้คำสั่งให้ระบุ (หรือสร้าง) div ใน index.html (ใต้แท็ก body หรือที่ระดับ DOM เดียวกัน)

<div class="google-analytics"/>

แล้วเพิ่มรหัสต่อไปนี้ในคำสั่ง

myApp.directive('googleAnalytics', function ( $location, $window ) {
  return {
    scope: true,
    link: function (scope) {
      scope.$on( '$routeChangeSuccess', function () {
        $window._gaq.push(['_trackPageview', $location.path()]);
      });
    }
  };
});

หากคุณใช้ ui-router คุณสามารถสมัครรับข้อมูล $ stateChangeSuccess ได้ดังนี้:

$rootScope.$on('$stateChangeSuccess', function (event) {
    $window.ga('send', 'pageview', $location.path());
});

สำหรับตัวอย่างการทำงานที่สมบูรณ์ดูโพสต์บล็อกนี้

ใช้ GA 'set' เพื่อให้แน่ใจว่าได้รับเส้นทางสำหรับการวิเคราะห์ตามเวลาจริงของ Google ไม่เช่นนั้นการโทรไปยัง GA จะไม่แสดงในแผงเรียลไทม์

$scope.$on('$routeChangeSuccess', function() {
    $window.ga('set', 'page', $location.url());
    $window.ga('send', 'pageview');
});

Google ขอแนะนำอย่างยิ่งให้ใช้วิธีนี้โดยทั่วไปแทนที่จะส่งพารามิเตอร์ที่สามใน 'ส่ง' https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

สำหรับผู้ที่ใช้ AngularUI Router แทน ngRoute สามารถใช้รหัสต่อไปนี้เพื่อติดตามการดูหน้าเว็บ

app.run(function ($rootScope) {
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        ga('set', 'page', toState.url);
        ga('send', 'pageview');
    });
});

นักพัฒนาที่สร้างแอปพลิเคชันหน้าเดียวสามารถใช้autotrackซึ่งรวมถึงปลั๊กอินurlChangeTrackerที่จัดการข้อควรพิจารณาที่สำคัญทั้งหมดที่ระบุไว้ในคู่มือนี้ให้คุณ ดูเอกสารประกอบ autotrackสำหรับคำแนะนำการใช้งานและการติดตั้ง

ฉันกำลังใช้ AngluarJS ในโหมด html5 ฉันพบว่าวิธีการแก้ปัญหาต่อไปนี้น่าเชื่อถือที่สุด:

ใช้ไลบรารีangular-google-analytics เริ่มต้นด้วยสิ่งที่ชอบ:

//Do this in module that is always initialized on your webapp    
angular.module('core').config(["AnalyticsProvider",
  function (AnalyticsProvider) {
    AnalyticsProvider.setAccount(YOUR_GOOGLE_ANALYTICS_TRACKING_CODE);

    //Ignoring first page load because of HTML5 route mode to ensure that page view is called only when you explicitly call for pageview event
    AnalyticsProvider.ignoreFirstPageLoad(true);
  }
]);

หลังจากนั้นเพิ่มผู้ฟังใน $ stateChangeSuccess 'และส่งเหตุการณ์ trackPage

angular.module('core').run(['$rootScope', '$location', 'Analytics', 
    function($rootScope, $location, Analytics) {
        $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams, options) {
            try {
                Analytics.trackPage($location.url());
            }
            catch(err) {
              //user browser is disabling tracking
            }
        });
    }
]);

เมื่อใดก็ตามที่คุณมีผู้ใช้งานของคุณคุณสามารถฉีด Analytics และโทรออก:

Analytics.set('&uid', user.id);

ฉันใช้ ui-router และรหัสของฉันมีลักษณะดังนี้:

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams){
  /* Google analytics */
  var path = toState.url;
  for(var i in toParams){
    path = path.replace(':' + i, toParams[i]);
  }
  /* global ga */
  ga('send', 'pageview', path);
});

วิธีนี้ฉันสามารถติดตามสถานะต่าง ๆ บางทีใครบางคนจะพบว่ามันมีประโยชน์

ฉันชอบตั้งค่าการวิเคราะห์ด้วย URL เทมเพลตแทนเส้นทางปัจจุบัน นี้เป็นส่วนใหญ่เพราะใบสมัครของฉันมีเส้นทางที่กำหนดเองหลายอย่างเช่นหรือmessage/:id profile/:idหากฉันจะส่งเส้นทางเหล่านี้ฉันมีหน้าเว็บจำนวนมากที่ถูกดูอยู่ในการวิเคราะห์มันจะยากเกินไปที่จะตรวจสอบว่าผู้ใช้หน้าไหนกำลังเยี่ยมชมมากที่สุด

$rootScope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', {
        page: $route.current.templateUrl.replace("views", "")
    });
});

ตอนนี้ฉันได้รับการดูหน้าสะอาดภายในการวิเคราะห์ของฉันเช่นuser-profile.htmlและmessage.htmlแทนหน้าเป็นจำนวนมากprofile/1, และprofile/2 profile/3ตอนนี้ฉันสามารถประมวลผลรายงานเพื่อดูจำนวนผู้ที่กำลังดูโปรไฟล์ผู้ใช้

หากใครมีข้อโต้แย้งว่าทำไมการปฏิบัติที่ไม่ดีภายในการวิเคราะห์ฉันจะมีความสุขมากกว่าที่จะได้ยินเกี่ยวกับมัน ค่อนข้างใหม่ในการใช้ Google Analytics ดังนั้นไม่แน่ใจว่านี่เป็นวิธีที่ดีที่สุดหรือไม่

ฉันแนะนำให้ใช้ไลบรารีการวิเคราะห์กลุ่มและทำตามคู่มือเริ่มต้นอย่างรวดเร็วของเรา คุณจะสามารถติดตามการเข้าชมหน้าเว็บและติดตามพฤติกรรมของผู้ใช้ด้วย API เดียว หากคุณมี SPA คุณสามารถอนุญาตให้RouterOutletส่วนประกอบจัดการเมื่อหน้าแสดงผลและใช้ngOnInitเพื่อเรียกการpageโทร ตัวอย่างด้านล่างแสดงวิธีหนึ่งที่คุณสามารถทำได้:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  ngOnInit() {
    window.analytics.page('Home');
  }
}

ฉันดูแลของhttps://github.com/segmentio/analytics-angular ด้วยเซ็กเมนต์คุณจะสามารถเปลี่ยนปลายทางที่แตกต่างกันได้โดยการกดสวิตช์หากคุณสนใจที่จะลองใช้เครื่องมือวิเคราะห์หลายตัว (เรารองรับมากกว่า 250 ปลายทาง) โดยไม่ต้องเขียนโค้ดเพิ่มเติมใด ๆ 🙂

ผสานกันมากขึ้นด้วยคำตอบของเปโดรโลเปซ

ฉันเพิ่มสิ่งนี้ลงในโมดูล ngGoogleAnalytis ของฉัน (ซึ่งฉันนำมาใช้ใหม่ในหลาย ๆ แอป):

var base = $('base').attr('href').replace(/\/$/, "");

ในกรณีนี้ฉันมีแท็กในลิงค์ดัชนีของฉัน:

  <base href="/store/">

มันมีประโยชน์เมื่อใช้โหมด html5 ใน angular.js v1.3

(ลบการแทนที่ () การเรียกใช้ฟังก์ชันหากแท็กฐานของคุณไม่เสร็จสิ้นด้วยเครื่องหมายทับ /)

angular.module("ngGoogleAnalytics", []).run(['$rootScope', '$location', '$window',
    function($rootScope, $location, $window) {
      $rootScope.$on('$routeChangeSuccess',
        function(event) {
          if (!$window.ga) { return; }
          var base = $('base').attr('href').replace(/\/$/, "");

          $window.ga('send', 'pageview', {
            page: base + $location.path()
          });
        }
      );
    }
  ]);

หากคุณกำลังมองหาการควบคุมรหัสติดตามใหม่ของ Google Analytics อย่างสมบูรณ์คุณสามารถใช้Angular-GAของฉันเองได้

มันทำให้gaใช้ได้ผ่านการฉีดจึงง่ายต่อการทดสอบ มันไม่ได้ทำอะไรวิเศษนอกจากการตั้งค่าเส้นทางในทุก ๆ เส้นทางการเปลี่ยนแปลง คุณยังต้องส่งการดูหน้าเว็บแบบนี้

app.run(function ($rootScope, $location, ga) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview');
    });
});

นอกจากนี้ยังมีคำสั่งgaที่อนุญาตให้ผูกฟังก์ชันการวิเคราะห์หลายรายการกับเหตุการณ์เช่นนี้:

<a href="#" ga="[['set', 'metric1', 10], ['send', 'event', 'player', 'play', video.id]]"></a>