رهگیری رفتار کاربران توسط Google Analytics Events
رهگیری رفتار کاربران توسط Google Analytics Events : در این مقاله، سرویس google analytics event و افزونه Google Analytics Debugger را معرفی می کنیم. با استفاده از قابلیت Event آنالیتیکس می توان رفتار کاربران وب سایت را رهگیری کنید. مانند: رهگیری کلیک کاربران، رهگیری اسلایدر و غیره...

رهگیری رفتار کاربران در وب سایت توسط Google Analytics Events

Tracking User Behavior With Google Analytics Events

Google Analytics Events

 

 »»» بخش اول ««« 

شروع بکار با Google-Analytics-Events

 

اهمیت رهگیری رفتار کاربران سایت:

فرض کنید شما بتازگی وب سایت خود را طراحی کرده اید و می خواهید تجربه کاربری قالب جدید را چک کنید. مثلا یک پاپ آپ که برای معرفی یک محصول جدید به کاربر نمایش داده می شود، تا چه حد مورد توجه کاربران قرارگرفته است و یا چه تعداد از کاربران این پیغام popup را بسته اند و از آن استقبال نکرده اند؟ کدامیک از منوهای وب سایت کلیک بیشتری می خورند (یعنی در واقع کاربران بیشتر توسط کدام منو در وب سایت گشت و گذار می کنند؟) چه تعدادی از کاربران بر روی اسلاید اول صفحه اصلی کلیک کرده اند و وارد صفحه مربوط به آن اسلاید شده اند؟ سوالات مختلفی می توانند در این زمینه مطرح شوند.

ما در این مقاله می خواهیم چگونگی پاسخ به سوالات فوق را توسط Google Analytics Events Tracking API را آموزش دهیم.

 

ثبت نام در گوگل آنالیتیکس:

اگر شما هنوز عضوی از گوگل آنالیتیکس نیستید (در Google-Analytics اکانت نساخته اید) هم اکنون در گوگل آنالیتیکس ثبت نام کنید. سپس مراحل لازم را برای دریافت اسکریپت رهگیری (Tracking Script) گوگل آنالیتیک طی کنید. فرمت کد رهگیری GA بصورت UA-XXXXXX-X می باشد که کلید یکتا و منحصربفردی برای وب سایت شما می باشد.

 

(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 = true;

    a.src = g;

    m.parentNode.insertBefore(a, m);

})(window, document, 'script', 'http://www.google-analytics.com/analytics.js', 'ga');

ga( 'create', 'UA-XXXXXX-X', 'auto' );

ga( 'send', 'pageview' );

 

خطایابی اسکریپت های گوگل آنالیتیکس:

برای خطایابی (Debugging) اسکریپت های Google-Analytics وب سایت خود، می توانید افزونه Google Analytics Debugger را بر روی مرورگر گوگل کروم نصب کنید.

 

افزونه Google Analytics Debugger

 

هنگامی که تمام مراحل فوق را انجام دادیم، نوبت آن می رسد که اولین مثال را در زمینه رهگیری رفتار کاربران توسط events مشاهده کنیم.

در بخش دوم از آموزش Google Analytics Events نحوه رهگیری کلیک کاربران در یک وب سایت را شرح خواهیم داد.

 

 »»» بخش دوم ««« 

رهگیری کلیک کاربران (Tracking Users Click)

 

در بخش اول، سرویس Google Analytics Events و افزونه Google Analytics Debugger را معرفی کردیم. در این بخش می خواهیم موضوع رهگیری کلیک کاربران در یک وب سایت را توسط Event های گوگل آنالیتیک توضیح دهیم.

 

استفاده از Event های گوگل آنالیتیک:

استفاده از Event های Google Analytics نسبتا ساده می باشد و نیازی به تعریف event برای هر المان نمی باشد. ابتدا باید برای هر لینک (یا دکمه) رویداد click تعریف کنیم:

var buttons = document.querySelectorAll('.btn');

buttons.forEach( function( btn ) {

   btn.addEventListener('click', function(event) {

   });

} );

 

کد فوق تمام المان هایی را که کلاس btn دارند را انتخاب کرده و برای هریک از آنها رویداد Click تعریف می کند. سپس در رویداد click باید تابعی بنام ga() تعریف کنیم که از اسکریپت Google-Analytics که قبلا به صفحه وب خود افزودیم مشتق می شود. تابع ga() بصورت زیر تعریف می شود:

ga('send', 'event', {

         eventAction: 'click',

         eventCategory: 'Buy Now Buttons',

         eventLabel: event.target.id // buy-now-above || buy-now-below

      });

 

پارامترهای تابع ()ga:

همانطور که در دستورات فوق مشاهده می شود، عبارت send را بعنوان command تابع ga() و عبارت event را بعنوان آرگومان hitType آن تعریف می کنیم. در تابع ga() سه پارامتر زیر را تعریف می کنیم:

  • eventAction: مشخص کننده نوع رفتار و تعامل کاربر می باشد مانند: click و play و pause و…
  • eventCategory: مشخص کننده نوع آبجکت برای رهگیری می باشد مانند: Video و Button و Popup و…
  • eventLabel: یک برچسب و یا ID یکتا و منحصربفردی است که برای دسته بندی کردن نمونه های مختلف از یک نوع بکار می رود مانند اینکه اگر در یک صفحه چندین Button داشته باشیم، باید آنها را توسط پارامتر eventLabel متمایز کنیم.

 

تعریف رویداد Click:

همانطور که قبلا عرض کردیم، گوگل در مورد استفاده و نحوه تعریف event ها سخت گیری نمی کند. ما در این مثال، رویداد click را بصورت زیر تعریف کرده ایم:

var buttons = document.querySelectorAll('.btn');

buttons.forEach( function( btn ) {

   btn.addEventListener('click', function(event) {

      ga('send', 'event', {

         eventAction: 'click',

         eventCategory: 'Buy Now Buttons',

         eventLabel: event.target.id // buy-now-above || buy-now-below

      });

   });

} );

در صورتی که افزونه Google Analytics Debugger را روی کروم نصب کرده باشید، می توانید با کلیک روی دکمه موردنظرتان، تست کنید که آیا کد رهگیری کاربران برای آن دکمه بدرستی کار می کند یا خیر.

 

افزونه Google Analytics Debugger

 

مشاهده گزارشات event بصورت لحظه ای:

وقتی که گوگل آنالیتیکس داده های ارسالی از سمت دکمه را دریافت کند، این داده ها ذخیره می شوند و در قسمت Real-time>Events>Behaviour>Events قابل مشاهده می باشد (تصویر زیر)

 

Real-time>Events>Behaviour>Events

 

در بخش سوم، رهگیری اسلایدر و نیز رویدادهای swipe و afterChange را بررسی می کنیم.

 

 »»» بخش سوم ««« 

رهگیری اسلایدر (Tracking a Carousel)

 

در بخش قبل، نحوه رهگیری کلیک کاربران یک وب سایت را بررسی کردیم. در این بخش می خواهیم رهگیری رفتار کاربران نسبت به یک اسلایدر را مورد بررسی قرار دهیم و رویدادهای swipe و afterChange را معرفی کنیم.

 

رهگیری اسلایدشوی تصاویر یا Carousel:

مثال دوم در زمینه اسلایدشوی تصاویر یا Carousel می باشد. مطمئنا شما تابحال با افراد موافق و مخالف استفاده از اسلایدشوی تصاویر در وب سایت ها مواجه شده اید. مخالفان اسلایدشو می گویند: "مردم جذب اسلایدشو نمی شوند-مردم تنها جذب اسلاید اول می شوند و…" اما آیا این نظرات در مورد وب سایت شما صدق می کند؟ ما تنها می توانیم با گزارش و آمار Google Analytics Events به این سوال پاسخ درستی بدهیم.

فعالسازی کد رهگیری Google-Analytics:

بیایید کد رهگیری Google-Analytics را برای اسلایدشوی تصاویر که توسط پلاگین Slick.js ایجاد شده است را فعال کنیم. این پلاگین، رویدادهای جی کوئری زیادی را در اختیار طراحان وب قرار می دهد که می توانیم از آنها برای درج کد رهگیری GA استفاده کنیم. لطفا برای یادگیری نحوه ایجاد یک اسلایدشو توسط Slick.js به داکیومنت Slick.js مراجعه نمائید.

 

رهگیری اسلایدر (Tracking a Carousel)

 

تعریف ID منحصربفرد برای هر اسلاید:

اسلایدشوی این مقاله شامل ۵ اسلاید می باشد. مانند مثال دکمه ها که قبلا دیدیم، برای هر اسلاید یک ID منحصربفرد تعریف می کنیم (slide-1 و slide-2 و slide-3 و…) که بعنوان مقدار پارامتر eventLabel برای هر اسلاید در نظر می گیریم. هدف ما از رهگیری اسلایدها در این مثال بصورت زیر است:

۱- اینکه آیا کاربر علاوه بر اسلاید اول، از سایر اسلایدها نیز بازدید می کند یا خیر؟

۲- تعداد بازدیدها برای هر اسلاید را مشخص کنیم.

برای تعریف event های GA می توانیم از دو رویداد پلاگین Slick.js بنام های Swipe و afterChange استفاده کنیم.

 

رویداد Swipe:

همانطور که از نام swipe مشخص است، این رویداد زمانی اتفاق می افتد که کاربر با عمل swipe بین اسلایدهای مختلف حرکت کند (در صفحات لمسی مانند موبایل و تبلت کاربرد دارد) در این حالت، پارامتر eventAction را برابر swipe تعریف می کنیم:

$('.carousel').on('swipe', function(event, slick, direction) {

   ga('send', 'event', {

      eventCategory: 'Carousel',

      eventAction: 'swipe',

      eventLabel: $( this ).find( '.slick-active' ).attr('id') // slide-1, slide-2, slide-3, etc.

   });

});

 

رویداد afterChange:

این رویداد زمانی رخ می دهد که کاربر اسلاید را عوض کند؛ مثلا از اسلاید دوم به سوم می رود (اهمیت ندارد کاربر به چه روشی باعث تغییر اسلاید شده است:لمسی، کیبورد، ماوس و…) در این حالت، پارامتر eventAction را برابر view تعریف کرده ایم:

$('.carousel').on('afterChange', function(event, slick, direction) {

   ga('send', 'event', {

      eventCategory: 'Carousel',

      eventAction: 'view',

      eventLabel: $( this ).find( '.slick-active' ).attr('id') // slide-1, slide-2, slide-3, etc.

   });

});

 

دریافت اطلاعات از Event آنالیتیکس:

پس از اینکه گوگل آنالیتیکس داده های مربوطه را بدست آورد، ما می توانیم متوجه شویم که:

  • چه تعداد کاربر با اسلایدشوی وب سایت ما تعامل داشته اند.
  • هر اسلاید چه تعداد بازدیدکننده را به خود اختصاص داده است.
  • چند کاربر از swipe (در اسکرین های لمسی) برای تعامل با اسلایدشو استفاده کرده اند.

 

رویداد afterChange در Google Analytics Events 

 

همانطور که در تصویر فوق مشاهده می کنید، اسلایدشوی ما بطور کلی تعداد ۱۹ بازدیدکننده داشته که ۱۴ نفر از آنها بوسیله swipe بین اسلایدهای مختلف حرکت کرده اند.

 

نتیجه گیری:

ما در این مقاله، دو مثال کاربردی در زمینه استفاده از Google Analytics Events بیان کردیم و شرح دادیم. اولین مثال برای رهگیری تعداد کلیک بر روی دکمه و یا لینک های یک صفحه بود و دیگری برای رهگیری رفتار و تعامل کاربر در برابر اسلایدشوی تصاویر بوده است. ما با استفاده از قابلیت رهگیری رفتار کاربر در سرویس Google Analytics قادر خواهیم بود که طراحی جدید را از لحاظ تجربه کاربری (UX) با قالب قدیمی وب سایت خود مقایسه کنیم و همچنین چک کنیم که کدامیک از المان های وب سایت ما بازدید کمتری دارد و یا اینکه کدام المان بیشتر مورد توجه کاربران قرار گرفته است. در نهایت برای کسب اطلاعات بیشتر در زمینه رویدادهای سرویس گوگل آنالیتیکس، به مستندات Google Analytics رجوع شود.

 

منبع: https://webdesign.tutsplus.com/tutorials/how-to-track-user-behavior-with-google-analytics-events–cms-27727


برچسب‌ها:

google analytics eventsآموزش event آنالیتیکآموزش google analytics eventsافزونه Google Analytics Debuggerپلاگین Debuggerرهگیری اسلایدررهگیری رفتار کاربرانرهگیری کلیکرویداد swipeرویدادها در آنالیتیکس


دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

9 − نه =