آموزش: گوگل آنالیتیک

این آموزش استفاده از Google Analytics را برای ردیابی استفاده از برنامه افزودنی خود نشان می دهد. اگر در حال توسعه یک برنامه پلت فرم هستید، به Analytics for Apps مراجعه کنید زیرا برنامه‌ها محدودیت‌های متفاوتی نسبت به برنامه‌های افزودنی دارند.

الزامات

در این آموزش انتظار می رود که شما تعدادی برنامه افزودنی برای نوشتن آشنایی برای Google Chrome داشته باشید. اگر به اطلاعاتی در مورد نحوه نوشتن افزونه نیاز دارید، لطفاً آموزش شروع کار را بخوانید.

همچنین برای ردیابی برنامه افزودنی خود به یک حساب Google Analytics نیاز دارید. توجه داشته باشید که هنگام راه‌اندازی حساب، می‌توانید از هر مقداری در فیلد URL وب‌سایت استفاده کنید، زیرا برنامه افزودنی شما URL خودش را نخواهد داشت.

راه‌اندازی تجزیه و تحلیل با اطلاعات افزونه کروم تکمیل شد

نصب کد رهگیری

اگر صفحه فعلی با استفاده از پروتکل https:// بارگیری شده باشد، قطعه کد ردیابی استاندارد Google Analytics فایلی به نام ga.js را از یک URL محافظت شده SSL واکشی می کند. برنامه‌های افزودنی و برنامه‌های Chrome فقط می‌توانند از نسخه محافظت شده با SSL ga.js استفاده کنند . بارگیری ga.js از طریق HTTP ناامن توسط خط‌مشی امنیت محتوای پیش‌فرض Chrome مجاز نیست. این، به‌علاوه این واقعیت که برنامه‌های افزودنی Chrome تحت طرح chrome-extension:// میزبانی می‌شوند، نیاز به تغییر جزئی در قطعه ردیابی معمول دارد تا ga.js مستقیماً از https://ssl.google-analytics.com/ga.js به جای مکان پیش فرض.

در زیر یک قطعه اصلاح شده برای API ردیابی ناهمزمان آمده است (خط اصلاح شده پررنگ است):

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

همچنین باید اطمینان حاصل کنید که برنامه افزودنی شما به بارگیری منبع دسترسی دارد و خط مشی امنیتی محتوای پیش فرض را کاهش می دهد. تعریف خط مشی در manifest.json شما ممکن است به شکل زیر باشد:

{
  ...,
  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
  ...
}

در اینجا یک صفحه بازشو وجود دارد ( popup.html ) که کد ردیابی ناهمزمان را از طریق یک فایل جاوا اسکریپت خارجی ( popup.js ) بارگیری می کند و یک نمای صفحه را ردیابی می کند:

<!DOCTYPE html>
<html>
 <head>
   ...
  <script src="popup.js"></script>
 </head>
 <body>
   ...
 </body>
</html>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

به خاطر داشته باشید که رشته UA-XXXXXXXX-X باید با شماره حساب Google Analytics خودتان جایگزین شود.

پیگیری بازدید از صفحه

_gaq.push(['_trackPageview']); کد یک نمایش صفحه را ردیابی می کند. این کد ممکن است در هر صفحه در پسوند شما استفاده شود. وقتی در یک صفحه پس‌زمینه قرار می‌گیرد، یک بار در هر جلسه مرورگر یک نما ثبت می‌کند. هنگامی که در یک پنجره بازشو قرار می گیرد، هر بار که پنجره باز می شود یک نما را ثبت می کند.

با مشاهده داده‌های نمایش صفحه برای هر صفحه در برنامه افزودنی خود، می‌توانید تصوری از چند بار تعامل کاربران با برنامه افزودنی شما در هر جلسه مرورگر داشته باشید:

نمای تحلیلی از محتوای برتر یک سایت

نظارت بر درخواست های تجزیه و تحلیل

برای اطمینان از اینکه داده های ردیابی از برنامه افزودنی شما به Google Analytics ارسال می شود، می توانید صفحات برنامه افزودنی خود را در پنجره Developer Tools بررسی کنید (برای اطلاعات بیشتر به آموزش رفع اشکال مراجعه کنید). همانطور که در شکل زیر نشان داده شده است، اگر همه چیز به درستی تنظیم شده باشد، باید درخواست فایلی به نام __utm.gif را مشاهده کنید.

پنجره Developer Tools که درخواست __utm.gif را نشان می دهد

ردیابی رویدادها

با پیکربندی ردیابی رویداد، می توانید تعیین کنید که کاربران شما با کدام بخش از برنامه افزودنی خود بیشتر تعامل دارند. برای مثال، اگر سه دکمه دارید، کاربران می‌توانند روی:

<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>

تابعی بنویسید که رویدادهای کلیک را به Google Analytics ارسال می کند:

function trackButton(e) {
  _gaq.push(['_trackEvent', e.target.id, 'clicked']);
};

و از آن به عنوان کنترل کننده رویداد برای کلیک هر دکمه استفاده کنید:

var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', trackButtonClick);
}

صفحه مرور کلی ردیابی رویداد Google Analytics به شما معیارهایی را در مورد چند بار کلیک روی هر دکمه ارائه می دهد:

نمای تجزیه و تحلیل داده های ردیابی رویداد برای یک سایت

با استفاده از این روش، می توانید ببینید که کدام بخش از برنامه افزودنی شما کمتر یا بیش از حد استفاده شده است. این اطلاعات می تواند به تصمیم گیری در مورد طراحی مجدد UI یا عملکردهای اضافی برای پیاده سازی کمک کند.

برای اطلاعات بیشتر درباره استفاده از ردیابی رویداد، به مستندات برنامه‌نویس Google Analytics مراجعه کنید.

کد نمونه

یک نمونه افزودنی که از این تکنیک ها استفاده می کند در مخزن نمونه موجود است.