আমি অ্যাঙ্গুলারজেএসকে ফ্রন্টএন্ড হিসাবে ব্যবহার করে একটি নতুন অ্যাপ সেট আপ করছি। ক্লায়েন্টের পাশের সমস্ত কিছু HTML5 পুসস্টেট দিয়ে সম্পন্ন হয়েছে এবং আমি গুগল অ্যানালিটিকসে আমার পৃষ্ঠা দর্শনগুলি ট্র্যাক করতে সক্ষম হতে চাই।
আমি অ্যাঙ্গুলারজেএসকে ফ্রন্টএন্ড হিসাবে ব্যবহার করে একটি নতুন অ্যাপ সেট আপ করছি। ক্লায়েন্টের পাশের সমস্ত কিছু HTML5 পুসস্টেট দিয়ে সম্পন্ন হয়েছে এবং আমি গুগল অ্যানালিটিকসে আমার পৃষ্ঠা দর্শনগুলি ট্র্যাক করতে সক্ষম হতে চাই।
উত্তর:
আপনি যদি ng-view
নিজের অ্যাংুলার অ্যাপ্লিকেশন ব্যবহার করে থাকেন তবে আপনি $viewContentLoaded
ইভেন্টটি শুনতে এবং একটি ট্র্যাকিং ইভেন্ট গুগল অ্যানালিটিকসে ঠেলাতে পারেন।
ধরে var _gaq
নিই যে আপনি আপনার ট্র্যাকিং কোডটি আপনার মূল ইনডেক্স.ইচটিএমএল ফাইলে এবং মাইসিটিআরএল নামের সাথে সেট করেছেন যা আপনি ng-controller
নির্দেশকে সংজ্ঞায়িত করেছেন ।
function MyCtrl($scope, $location, $window) {
$scope.$on('$viewContentLoaded', function(event) {
$window._gaq.push(['_trackPageView', $location.url()]);
});
}
আপডেট: গুগল-অ্যানালিটিক্সের নতুন সংস্করণটির জন্য এটি ব্যবহার করুন
function MyCtrl($scope, $location, $window) {
$scope.$on('$viewContentLoaded', function(event) {
$window.ga('send', 'pageview', { page: $location.url() });
});
}
_trackPageview
এবং নয় _trackPageView
... 10 মিনিটের মাথার স্ক্র্যাচিংয়ে ব্যয় করেছেন :)
$rootScope.$on('$routeChangeSuccess', ...)
$rootScope
নিশ্চিত করে যে এটি অন্য কোনও ইভেন্ট বা ডিওএম পরিবর্তন দ্বারা মুছে ফেলা হবে না এবং এটি ব্যবহারের routeChangeSuccess
ফলে প্রতিবারই গুলি চালানো হবে আপনার বারের উত্স টেম্পলেটটি পরিবর্তন করার পরিবর্তে লোকেশন বার পরিবর্তন হয়। যে জানার জন্য?
$window.ga('send', 'pageview', { page: $location.path() });
পরিবর্তে $window._gaq...
। এছাড়াও, আপনি ga('send', 'pageview');
যখন কোনও পৃষ্ঠায় প্রথম অবতরণ করবেন তখন ডুপ্লিকেটগুলি রোধ করতে আপনি আপনার আসল জিএ কোড থেকে সরিয়ে নিতে পারেন ।
যখন কোনও নতুন ভিউ লোড হয় AngularJS
, গুগল অ্যানালিটিক্স এটিকে কোনও নতুন পৃষ্ঠা লোড হিসাবে গণনা করে না। ভাগ্যক্রমে GA কে ম্যানুয়ালি বলার একটি নতুন পৃষ্ঠা ভিউ হিসাবে একটি ইউআরএল লগ করার উপায় আছে।
_gaq.push(['_trackPageview', '<url>']);
কাজটি করবে, তবে অ্যাঙ্গুলারজেএসের সাথে কীভাবে তা বাঁধবে?
এখানে একটি পরিষেবা যা আপনি ব্যবহার করতে পারেন:
(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']);
আপডেট :
আপনার সাথে নতুন ইউনিভার্সাল গুগল অ্যানালিটিক্স ট্র্যাকিং কোডটি ব্যবহার করা উচিত:
$window.ga('send', 'pageview', {page: $location.url()});
this.track = function($window.ga('send', 'pageview', {page: $location.url()});
এটি আপনাকে googleAnalytics.track();
আপনার অ্যাপ.আরুন () ফাংশনের মধ্যে ব্যবহার করতে দেয়
app.run(function ($rootScope, $location) {
$rootScope.$on('$routeChangeSuccess', function(){
ga('send', 'pageview', $location.path());
});
});
app.run(["$rootScope", "$location", function(...
মাত্র একটি দ্রুত সংযোজন। আপনি যদি নতুন অ্যানালিটিক্স.জে ব্যবহার করেন, তবে:
var track = function() {
ga('send', 'pageview', {'page': $location.path()});
};
অতিরিক্তভাবে একটি পরামর্শ হ'ল গুগল বিশ্লেষণগুলি লোকালহোস্টে চালিত হবে না। সুতরাং আপনি যদি লোকালহোস্টে পরীক্ষা করে নিচ্ছেন তবে ডিফল্ট তৈরি ( সম্পূর্ণ ডকুমেন্টেশন ) এর পরিবর্তে নিম্নলিখিতটি ব্যবহার করুন
ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});
$window
উইন্ডোটি অ্যাক্সেস করতে ব্যবহার করেছেন ( ga
একা কৌণিকের মধ্যেই সম্ভবত খুব সম্ভবত undefined
)। এছাড়াও, আপনি ga('send', 'pageview');
যখন কোনও পৃষ্ঠায় প্রথম অবতরণ করবেন তখন ডুপ্লিকেটগুলি রোধ করতে আপনি আপনার আসল জিএ কোড থেকে সরিয়ে নিতে পারেন ।
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { ga('send', 'pageview', { 'page': $location.path(), 'title': toState.name }); });
$location.url()
আমি একটি পরিষেবা + ফিল্টার তৈরি করেছি যা আপনাকে এইগুলিতে সহায়তা করতে পারে এবং আপনি যদি ভবিষ্যতে যুক্ত করতে চান তবে অন্য কোনও সরবরাহকারীর সাথেও থাকতে পারে।
পরীক্ষা করে দেখুন https://github.com/mgonto/angularytics এবং আমাকে কিভাবে এই আপনার জন্য কাজ করা যাক।
আমার কাছে ওয়াইন্নু এবং ডিপিন্ডা দ্বারা উত্তরগুলি মার্জ করা ছিল।
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()
});
});
}
]);
তৃতীয় প্যারামিটারটিকে অবজেক্ট হিসাবে সেট করা (কেবলমাত্র $ লোকেশন.পাথ () এর পরিবর্তে) এবং $ stateChangeSuccess এর পরিবর্তে $ রুটচেনজস্যাক্সেস ব্যবহার করে কৌতুকটি করেছে।
আশাকরি এটা সাহায্য করবে.
উপরের পদ্ধতির সাহায্যে আমি গিথুব এ একটি সাধারণ উদাহরণ তৈরি করেছি।
/account/:accountId
ওরফে পথের রুটটি থাকে তবে http://somesite.com/account/123
এটি এখন সেই পথটির মতোই রিপোর্ট করবে/account?accountId=123
এটি করার সর্বোত্তম উপায় হ'ল ইতিহাস শ্রোতার উপর ভিত্তি করে গুগল অ্যানালিটিক্স ট্যাগগুলিকে ফায়ার করতে গুগল ট্যাগ ম্যানেজার ব্যবহার করা। এগুলি জিটিএম ইন্টারফেসে অন্তর্নির্মিত এবং সহজেই ক্লায়েন্টের পক্ষের HTML5 ইন্টারঅ্যাকশনগুলিতে ট্র্যাকিংয়ের অনুমতি দেয় allow
ইতিহাসে অন্তর্নির্মিত ভেরিয়েবলগুলি সক্ষম করুন এবং ইতিহাসের পরিবর্তনের উপর ভিত্তি করে কোনও ইভেন্ট ফায়ার করার জন্য একটি ট্রিগার তৈরি করুন।
আপনার মধ্যে index.html
, গা স্নিপেটটি অনুলিপি করুন এবং আটকান তবে লাইনটি সরিয়ে দিন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
}
]);
page
বর্তমান পথটি সেট করলেন এবং তারপরে এটি জমা দেবেন pageview
? ন্যায়বিচারের পরিবর্তে সেভাবে করার পার্থক্য কী $window.ga('send', 'pageview', {page: $location.url()});
?
আমি gtag()
ফাংশনটির পরিবর্তে ফাংশনটি কাজ করেছি ga()
।
এই <head>
বিভাগের মধ্যে সূচক। Html ফাইলে :
<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>
অ্যাঙ্গুলারজেএস কোডে:
app.run(function ($rootScope, $location) {
$rootScope.$on('$routeChangeSuccess', function() {
gtag('config', 'TrackingId', {'page_path': $location.path()});
});
});
TrackingId
আপনার নিজের ট্র্যাকিং আইডির সাথে প্রতিস্থাপন করুন ।
যদি কেউ নির্দেশ ব্যবহার করে বাস্তবায়ন করতে চান তবে সূচক html এ একটি ডিভ সনাক্ত করুন (কেবল বডি ট্যাগের নিচে বা একই ডিওএম স্তরে)
<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()]);
});
}
};
});
আপনি যদি ইউআই-রাউটার ব্যবহার করছেন তবে আপনি এই জাতীয় han stateChangeSuccess ইভেন্টে সাবস্ক্রাইব করতে পারেন:
$rootScope.$on('$stateChangeSuccess', function (event) {
$window.ga('send', 'pageview', $location.path());
});
একটি সম্পূর্ণ কাজের উদাহরণের জন্য এই ব্লগ পোস্ট দেখুন
গুগল রিয়েলটাইম বিশ্লেষণের জন্য রুটগুলি নেওয়া হয়েছে তা নিশ্চিত করতে GA 'সেট' ব্যবহার করুন। অন্যথায় পরবর্তী সময়ে জিএ-তে কলগুলি রিয়েলটাইম প্যানেলে প্রদর্শিত হবে না।
$scope.$on('$routeChangeSuccess', function() {
$window.ga('set', 'page', $location.url());
$window.ga('send', 'pageview');
});
গুগল 'প্রেরণ' এ তৃতীয় পরম পাস করার পরিবর্তে এই পদ্ধতির দৃ strongly়ভাবে পরামর্শ দেয়। https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
আপনারা যারা এনজিআরউটের পরিবর্তে অ্যাংুলার ইউআই রাউটার ব্যবহার করছেন তাদের জন্য পৃষ্ঠা ভিউ ট্র্যাক করতে নিম্নলিখিত কোডটি ব্যবহার করতে পারেন।
app.run(function ($rootScope) {
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
ga('set', 'page', toState.url);
ga('send', 'pageview');
});
});
সিঙ্গল পেজ অ্যাপ্লিকেশন তৈরি করা বিকাশকারীরা অটোট্র্যাক ব্যবহার করতে পারেন , এতে একটি urlChangeTracker প্লাগইন রয়েছে যা আপনার জন্য এই গাইডের তালিকাভুক্ত সমস্ত গুরুত্বপূর্ণ বিবেচনা পরিচালনা করে। ব্যবহার এবং ইনস্টলেশন নির্দেশের জন্য অটোট্র্যাক ডকুমেন্টেশন দেখুন ।
আমি এইচটিএমএল 5 মোডে অ্যাংলুয়ারজেএস ব্যবহার করছি। আমি নিম্নলিখিত সমাধানটি সবচেয়ে নির্ভরযোগ্য হিসাবে খুঁজে পেয়েছি:
কৌনিক-গুগল-অ্যানালিটিক্স লাইব্রেরি ব্যবহার করুন । এর মতো কিছু দিয়ে এটি সূচনা করুন:
//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 'এ শ্রোতা যুক্ত করুন এবং ট্র্যাকপেজ ইভেন্টটি প্রেরণ করুন।
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.set('&uid', user.id);
আমি ইউআই-রাউটার ব্যবহার করছি এবং আমার কোডটি দেখতে এমন দেখাচ্ছে:
$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
। যদি আমি এই পাথগুলি প্রেরণ করতাম তবে বিশ্লেষণের মধ্যে আমার এতগুলি পৃষ্ঠাগুলি দেখা হচ্ছিল, কোন পৃষ্ঠা ব্যবহারকারীরা সবচেয়ে বেশি পরিদর্শন করছেন তা পরীক্ষা করা খুব কঠিন difficult
$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
। আমি এখন কত লোক ব্যবহারকারীর প্রোফাইল দেখছি তা দেখতে রিপোর্টগুলি প্রক্রিয়া করতে পারি।
বিশ্লেষকগুলির মধ্যে কেন এটি খারাপ অভ্যাস বলে কারও যদি আপত্তি থাকে তবে আমি এটি সম্পর্কে শুনে খুশি হতে পারব। গুগল অ্যানালিটিক্স ব্যবহারে বেশ নতুন, তাই এটি নিশ্চিত না যে এটি সেরা পদ্ধতির বা না।
আমি সেগমেন্ট বিশ্লেষণ গ্রন্থাগারটি ব্যবহার করার এবং আমাদের কৌণিক কুইকস্টার্ট গাইড অনুসরণ করার পরামর্শ দিচ্ছি । আপনি একক এপিআই দিয়ে পৃষ্ঠা ভিজিট এবং ব্যবহারকারী আচরণ ক্রিয়াকে ট্র্যাক করতে সক্ষম হবেন। আপনার যদি এসপিএ থাকে, 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+ এরও বেশি গন্তব্য সমর্থন করি) চেষ্টা করতে আগ্রহী যদি আপনি একটি স্যুইচ ফ্লিপ দ্বারা অন-অফ-অফ করে বিভিন্ন গন্তব্য স্যুইচ করতে সক্ষম হবেন। 🙂
পেড্রো লোপেজের উত্তরের সাথে আরও একত্রীকরণ,
আমি এটিকে আমার এনজিওগ্রাণালিটিস মডিউলে যুক্ত করেছি (যা আমি অনেক অ্যাপে পুনরায় ব্যবহার করি):
var base = $('base').attr('href').replace(/\/$/, "");
এই ক্ষেত্রে, আমার আমার সূচী লিঙ্কটিতে একটি ট্যাগ রয়েছে:
<base href="/store/">
এঙ্গুলার.জেএস ভি 1.3-তে এইচটিএমএল 5 মোড ব্যবহার করার সময় এটি কার্যকর
(যদি আপনার বেস ট্যাগটি স্ল্যাশ / দিয়ে শেষ না করে তবে প্রতিস্থাপন () ফাংশন কলটি সরিয়ে ফেলুন /)
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()
});
}
);
}
]);
আপনি যদি গুগল অ্যানালিটিক্সের নতুন ট্র্যাকিং কোডের পুরো নিয়ন্ত্রণের সন্ধান করে থাকেন তবে আপনি আমার খুব নিজস্ব অ্যাংুলার-জিএ ব্যবহার করতে পারেন ।
এটি 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>