راه اندازی قابلیت Event Tracking در Google Analytics (GA4) ممکن است در مقایسه با Universal Analytics ، چالش‌برانگیز باشد. اما با این راهنمای جامع، نحوه این کار را به شما می‌گوییم.
Universal Analytics روزهای آخر خود را سپری می‌کند و همه با سرعت در حال مهاجرت از UA بهGoogle Analytics 4 هستند.
در این راهنما، ما به شما کمک می‌کنیم رویدادهای سفارشی (Custom Events) خود را انتقال دهید و نحوه تنظیم آنها در GA4 را به شما آموزش می‌دهیم.
انواع رویدادهایی که GA4 به طور خودکار و پیش‌فرض، ردیابی می‌کند
Google Analytics 4 رویدادهای مختلفی را به طور خودکار و بدون هیچ گونه پیکربندی اضافی، ردیابی می‌کند. برخی از این رویدادهای مرتبط با ردیابی دارایی‌های وب عبارتند از:
- click.
- file_download.
- form_start.
- form_submit.
- page_view.
- scroll.
- session_start.
- user_engagement.
- video_complete.
- video_progress.
- video_start.
- view_search_results.
GA4 همچنین به طور پیش فرض پارامترهای زیر را جمع آوری می‌کند:
- page_location.
- page_referrer.
- page_title.
- screen_resolution.
- language.
اما در بیشتر موارد، این ویژگی برای ردیابی جامع کافی نیست و اینجاست که ردیابی رویداد سفارشی به شما کمک می‌کند.
بیایید نحوه تنظیم ردیابی رویداد سفارشی (Custom Event Tracking) در GA4 را بررسی کنیم.
Google Analytics Event Tracking چگونه کار می‌کند؟
وقتی اقدامی را در یک وب‌سایت یا برنامه انجام می‌دهید، GA4 درخواست‌هایی را با اطلاعات دقیقی درباره فعالیت شما ارسال می‌کند که رویدادها (Events) نامیده می‌شوند (که قبلاً در Universal Analytics «hits» نامیده می‌شدند).
پس از دریافت این درخواست ها، GA4 داده های ارسالی را پردازش می‌کند، آنها را جمع آوری و سازماندهی می‌کند تا گزارش ها و بینش های معنی دار ایجاد کند.
نحوه تنظیم دستی Custom Event Tracking در GA4
در ابتدا، می‌خواهم یکی از قدرتمندترین جنبه‌های GA4 را با شما به اشتراک بگذارم: در GA4 شما می‌توانید رویدادهای سفارشی را با استفاده از رویدادهای دیگری که حائز معیارهای خاصی هستند، ایجاد کنید.
در GA4 به Events بروید و روی دکمه آبی Create Event در گوشه بالا سمت راست کلیک کنید.
در پنجره بازشونده، روی Create کلیک کنید.
در این پنجره، می‌توانید برای زمانی که رویداد سفارشی جدیدتان باید فعال شود، معیارهایی را تعیین کنید.
اینجا، زمانی که پارامتر page_location در در URL حاوی «newsletter-confirmation» باشد، یک رویداد «newsletter_sign_up» در رویداد page_view ایجاد کردیم (همانطور که در بالا خواندید، GA4 به‌طور پیش‌فرض این موارد را ردیابی می‌کند).
بر اساس مشخصات URL صفحه تشکر از خبرنامه (Newsletter Thank You Page) شما، این ممکن است متفاوت باشد.
و جالب‌تر این است که می‌توانید آن رویداد را به یک Conversion تبدیل کنید و ثبت‌نام‌ها را به عنوان Conversion دنبال کنید.
خیلی آسان است، اینطور نیست؟ این یکی از شگفتی هایی است که GA4 با خود به ارمغان می آورد. هیچ مهارت کدنویسی برای تحقق این جادو مورد نیاز نیست.
شما می‌توانید از این ویژگی در سناریوهای مختلفی استفاده کنید. اما اگر در موقعیتی قرار گرفتید که این ویژگی برای رفع نیازهای شما کافی نبود، ممکن است لازم باشد رویدادها را با پارامترهای سفارشی تنظیم کنید.
در زیر به تکنیک‌های پیشرفته تنظیم رویدادهای سفارشی خواهیم پرداخت.
نحوه تنظیم ردیابی رویداد سفارشی با پارامترهای سفارشی در GA4
در Universal Analytics، چهار پارامتر برای رویدادها وجود دارد که می‌توانید آنها را ردیابی کنید، و هیچ گزینه‌ای برای افزودن پارامترهای بیشتر وجود ندارد:
- Event Category.
- Event Action.
- Event Label.
- Event Value.
در GA4، دیگر چنین ساختاری وجود ندارد، اما این کار با انعطاف پذیری بیشتری همراه است. زیرا می‌توانید هر تعداد پارامتر رویداد را که می‌خواهید تعریف کنید.
مزیتی که این امر دارد این است که شما Custom Event Trackingسازی شده را به همراه داده‌های زیادی دریافت می‌کنید. اما نقطه ضعف آن این است که دیگر یک plug-in-and-play مانند UA نیست.
پیکربندی Custom Event Tracking در Google Analytics 4 (GA4) به چندین مرحله نیاز دارد.
برای Event Tracking با پارامترهای سفارشی در GA4، باید با افزودن ابعاد سفارشی (Custom Dimensions) شروع کنید، و دو راه برای انجام این کار وجود دارد: gtag و GTM-based.
ابتدا، پیاده سازی gtag-based را مورد بحث قرار خواهیم داد. اگر GTM-based را ترجیح می دهید، می‌توانید این بخش را رد کنید و در بخش بعدی آن را بخوانید.
برای پیاده سازی، راهنمای گام به گام زیر را دنبال کنید.
نحوه اضافه کردن Custom Dimensions در GA4
به Admin > Property > Custom Definitions بروید.
روی دکمه آبی Create custom dimensions کلیک کنید و با وارد کردن dimension name و event parameter ، یک event-scoped custom dimension ایجاد کنید.
اجازه دهید با Events Tracking سفارشی مشابه Universal Analytics با پارامترهای سفارشی شروع کنیم.
- Event Category.
- Event Action.
- Event Label.
فرض کنید می‌خواهید کلیک‌ها را در منوی ناوبری اصلی خود ردیابی کنید.
در این حالت، می‌توانید Event Category را روی Menu Clicks ، Event Action را در لینک آنکرتکست و Event Label را بر روی متن آنکرتکست تنظیم کنید.
یک مثال استفاده از این راه‌اندازی، تغییر آنکرتکست آیتم‌های منو و ردیابی آن‌هایی است که کلیک‌های بیشتری دارند. این کار به شما امکان می‌دهد منوی ناوبری خود را برای تعامل کاربر و نرخ تبدیل بهتر بهینه کنید.
بر اساس اسناد GA4، شما باید با کلیک روی آیتم‌های منوی خود، یک رویداد gtag را راه اندازی کنید (فرض می کنیم لینک‌ها در داخل یک html tag به نام <li> قرار دارند که دارای کلاس menu-item. هستند). کد نمونه را در زیر مشاهده می‌کنید.
<script>
document.addEventListener('DOMContentLoaded', function() {
var menu_anchors = document.querySelectorAll('.menu-items a');
//Click event listener to each anchor element
menu_anchors.forEach((anchor) => {
anchor.addEventListener('click', (event) => {
gtag('event', 'menu_clicks', {
'event_category': 'Menu Clicks',
'event_action': anchor.href,
'event_label': anchor.textContent
});
});
});
});
</script>
نام رویداد “menu_clicks” می‌تواند هر چیزی باشد که شما می‌خواهید، و دارای سه پارامتری است که شما ارائه می‌دهید. اگر Google Tag Manager ندارید و پیاده سازی gtag را ترجیح می دهید، این یکی از روش‌هاست.
همچنین می‌توانید برای ارسال مقادیر اضافی به رویدادهای از پیش تعریف شده، از پارامترهای سفارشی استفاده کنید. به عنوان مثال، رویداد sign_up. طبق اسناد GA، این تنها یک پارامتر به نام method را پشتیبانی می‌کند. (که می تواند هر چیزی باشد، به عنوان مثال، ورود به سیستم شبکه اجتماعی، ایمیل و غیره).
gtag("event", "sign_up", {
method: "Google"
});
با افزودن Custom Dimensions ، می‌توانید اطلاعات بیشتری مانند طرح اشتراکی ثبت‌نام را نیز اضافه کنید (به‌عنوان مثال، «دوره آزمایشی رایگان»، «پایه»، «پرمیوم».)
سپس می‌توانید Dimension سفارشی “sign_up_plan” را هم اضافه کنید و با method ارسال کنید.
gtag("event", "sign_up", {
method: "Google",
sign_up_plan: "basic",
});
برای پیاده‌سازی همه این‌ها، به مهارت‌های اولیه برنامه نویسی JS نیاز دارید که با استفاده از ChatGPT می‌توانید به سرعت آن ها را بیاموزید. همین الان می‌توانید این prompt را تست کنید:
JavaScript code that triggers a gtag custom event with the name ‘menu_clicks’ when a user clicks on a menu item with a parent li tag that has class ‘.menu-item’. Pass the following custom event parameters: ‘event_category’ should be set to ‘Menu Clicks’, ‘event_action’ should be set to the link of the clicked item, and ‘event_label’ should be set to the anchor text of the clicked item.
این prompt را امتحان کنید، و خواهید دید که جادو می‌کند.
همچنین می‌توانید آن کد را در CMS code editor خود کپی پیست کنید و همه چیز آماده است!
اکنون، بیایید همان Event Tracking را با استفاده از GTM tag تنظیم کنیم.
من فرض می کنم که شما قبلاً Google Analytics 4 را از طریق Google Tag Manager نصب کرده‌اید و این مراحل را از آن‌جا ادامه خواهید داد.
شما باید Custom Dimensions را طبق مراحل توضیح داده شده در بخش بالا اضافه کنید.
نحوه تنظیم Event Tracking در Google Tag Manager
یک متغیر جاوا اسکریپت جدید در GTM ایجاد کنید که parent tag class name آنکرتکست کلیک شده را برمی‌گرداند. زیرا در GTM هیچ روش داخلی برای دریافت ویژگی‌های عنصر parent DOM وجود ندارد.
به مسیر Variables > User-Defined Variables بروید و روی دکمه New در گوشه بالا سمت راست کلیک کنید. در پنجره بازشونده، Custom Javascript را انتخاب کنید.
این کد را کپی کرده و در آن قرار دهید.
function() {
'use strict';
try {
var clickElement = {{Click Element}}; // clickable element DOM object
var clickParent = clickElement.closest('.menu-item'); //clickable element DOM object parent with class .menu-item
if (!clickParent) return '';
return clickParent.getAttribute('class'); // if element exist return class attribute
} catch (err) {
return '';
}
}
این کد وقتی یک عنصر parent با کلاس “.menu-item” وجود داشته باشد، ویژگی parent class عنصر کلیک شده را برمی‌گرداند، یا اگر عنصر parent این چنینی وجود نداشته باشد، یک empty value برمی‌گرداند.
ما می‌توانیم با این روش اطمینان حاصل کنیم که فقط کلیک‌ها را روی لینک‌های آیتم‌های منو تشخیص می‌دهیم، نه لینک‌های دیگر در جای دیگر صفحه.
یک trigger جدید در GTM ایجاد کنید که روی تمام کلیک‌های روی عناصری با parent مشخص <li> ، که دارای کلاس menu-item است، فعال می‌شود.
به Triggers بروید و روی دکمه New در گوشه سمت راست بالا کلیک کنید.
از پنجره بازشونده، گزینه Click – Just Links را انتخاب کنید.
افزودن click event GTM dialog
Some Link Clicks > Configure را انتخاب کنید تا روی کلیک‌هایی فعال شود که class عنصر parent شامل رشته menu-item است.
به Tags بروید و GA4 Event tag را اضافه کنید.
به عنوان نام رویداد “main_menu_clicks” یا هر چیزی که می‌خواهید رویداد را نامگذاری کنید، وارد کنید و پارامترهای سفارشی event_category، event_action و event_label را اضافه کنید.
برای Event Action و Label ، Click Text و سپس Click URL build-in variables را انتخاب کنید.
trigger مربوط به Menu Clicks را که قبلا ایجاد کرده بودیم، انتخاب و tag را ذخیره کنید.
تغییرات را منتشر و debug کنید تا مطمئن شوید وقتی روی آیتم‌های منو کلیک می‌کنید، رویداد با تنظیم درست همه پارامترها راه‌اندازی می‌شود.
نحوه پیاده سازی Custom Event Tracking با استفاده از متد dataLayer.push
اگر همچنان کدنویسی سفارشی را ترجیح می دهید و GTM دارید، می‌توانید از متد datalayer.push() استفاده کنید.
در این صورت، باید پارامترهای event_category، event_action و event_label را در GTM به عنوان متغیر dataLayer اضافه کنید.
و در بخش <head> وب سایت خود، باید از کد زیر استفاده کنید:
<script>
//Click event listener to menu items with the '.menu-item' class
document.addEventListener('DOMContentLoaded', function() {
const menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach(function(menuItem) {
menuItem.addEventListener('click', function(event) {
//Link and anchor text of the clicked link
let link = menuItem.querySelector('a').href;
let anchorText = menuItem.querySelector('a').textContent;
// Trigger the custom event 'menu_clicks' using dataLayer.push()
dataLayer.push({
'event': 'menu_clicks',
'event_category': 'Menu Clicks',
'event_action': link,
'event_label': anchorText
});
});
});
});
</script>
چگونه بفهمم که Event Tracking مربوط به Google Analytics کار می‌کند؟
همچنین لازم است بررسی کنید آیا گزارش رویدادی با پارامترهای مشابه در GA4 debug view مشاهده می‌کنید یا خیر. ممکن است GTM فعال شود، اما به دلیل پیکربندی نادرست، به GA4 منتقل نشود.
اگر gtag دارید، باید با نصب افزونه کروم یا با افزودن یک خط کد به پیکربندی GA4، debug mode را فعال کنید:
gtag('config', 'G-12345ABCDE', { 'debug_mode':true });
همیشه debugging را انجام دهید و مطمئن شوید که تمام پارامترهای سفارشی همانطور که انتظار می رود، pass شوند.
نتیجه‌گیری
GA4 بسیار چالش برانگیز است و مانند Universal Analytics یک ابزار تجزیه و تحلیل plug-and-play نیست. شما باید زمان زیادی را صرف یادگیری آن کنید.
از سوی دیگر، GA4دارای بسیاری از ویژگی‌های جدید است که می‌توانید از آنها استفاده کنید و تجزیه و تحلیل خود را به سطح بی سابقه‌ای ارتقا دهید.
با توانایی سفارشی‌سازی Event Tracking ، مهارت بالایی در آنالیز به دست می‌آورید که حتی به شما کمک می‌کند تا با ردیابی اولین سورس بازدید کاربران درCustom Dimension ، برخی از مدل‌های attribution را که Google Analytics در حال کنار گذاشتن آن‌هاست، دور بزنید.
Leave feedback about this