داده های فیلد Core Web Vitals را با معیارهای تبلیغات اندازه گیری کنید

۱. قبل از شروع

در این آزمایشگاه کد، یاد می‌گیرید که چگونه Core Web Vitals را با یک الگوی برچسب از پیش ساخته شده Google Tag Manager (GTM) اندازه‌گیری کنید و داده‌ها را به یک ویژگی Google Analytics 4 (GA4) ارسال کنید. همچنین یاد خواهید گرفت که چگونه داده‌ها را از Google Ad Manager و Google AdSense به GA4 منتقل کنید تا داده‌های فیلد Core Web Vitals و معیارهای عملکرد تبلیغات را با یک داشبورد از پیش ساخته شده Looker Studio مرتبط کنید.

کاری که انجام خواهید داد

• یک تگ را در کانتینر گوگل تگ منیجر خود وارد و تنظیم کنید.
• معیارهای حیاتی هسته وب صفحه وب را در GA4 اندازه‌گیری کنید.
• یک تگ رویداد GA4 در گوگل تگ منیجر تنظیم کنید.
• داده‌های حیاتی وب را در dataLayer و گزارش‌های GA4 کاوش کنید.
• ملک GA4 خود را با Google Ad Manager و Google AdSense پیوند دهید.
• از طریق داشبورد Looker Studio، شاخص‌های حیاتی هسته وب (Core Web Vitals) و درآمد حاصل از تبلیغات را با هم مرتبط کنید.

آنچه نیاز دارید

• یک حساب گوگل آنالیتیکس و یک ملک وب GA4 با دسترسی ویرایشگر.
• یک حساب کاربری گوگل تگ منیجر و یک کانتینر وب با حق انتشار.
• یک شبکه مدیریت تبلیغات گوگل و/یا حساب گوگل ادسنس با دسترسی ادمین.
• یک حساب کاربری در استودیو Looker.

۲. قالب تگ را از گیت‌هاب به GTM اضافه کنید

اندازه‌گیری Core Web Vitals از طریق یک الگوی برچسب GTM بر اساس کتابخانه web-vitals انجام می‌شود. ابتدا، الگوی برچسب GTM را دانلود خواهیم کرد.

1. فایل template.tpl را باز کنید
2. فایل را روی رایانه خود دانلود کنید

حالا، به حساب گوگل تگ منیجر خود بروید .

1. کانتینر وب خود را باز کنید.
2. یک فضای کاری جدید ایجاد کنید و یک نام وارد کنید (مثلاً "اندازه‌گیری Core Web Vitals").
3. به بخش «قالب‌ها» بروید.
4. در بخش «قالب‌های برچسب»، روی دکمه‌ی «جدید» کلیک کنید.

5. روی منوی «اقدامات بیشتر» کلیک کنید و «وارد کردن» را انتخاب کنید.

6. فایل TPL که قبلاً دانلود کرده‌اید را از رایانه خود انتخاب کنید.
7. روی دکمه‌ی «ذخیره» کلیک کنید.

شما قالب تگ را به کانتینر گوگل تگ منیجر خود اضافه کردید.

۳. تگ Web Vitals را تنظیم کنید

1. در فضای کاری گوگل تگ منیجر خود، به بخش «برچسب‌ها» بروید.
2. با کلیک روی «جدید»، سپس «پیکربندی برچسب» و انتخاب برچسب «ویتال‌های وب» از بخش «سفارشی»، برچسب «ویتال‌های وب» را اضافه کنید.
3. مرحله بعدی پیکربندی تنظیمات مختلف است. تمام تنظیمات در مخزن گیت‌هاب توضیح داده شده است. برای اینکه این آزمایشگاه کد و داشبورد نهایی کار کنند، تنظیمات زیر کافی است.

4. یکی از تریگرهای نمای صفحه ، مثلاً تریگر "همه صفحات" را اعمال کنید.
5. در صورت نیاز، استثنائات محرک را نیز اضافه کنید.
6. نام تگ را «Core Web Vitals - All Pages» بگذارید و آن را ذخیره کنید.

۴. داده‌های Web Vitals را در لایه داده بررسی کنید

برای مشاهده‌ی عملکرد تگ، به حالت پیش‌نمایش گوگل تگ منیجر بروید . دستیار تگ باز می‌شود و از شما یک URL می‌خواهد تا تنظیمات شما را پیش‌نمایش و اشکال‌زدایی کند. یک URL به صفحه‌ای که کانتینر گوگل تگ منیجر در آن پیاده‌سازی شده است، ارائه دهید و روی «اتصال» کلیک کنید. یک برگه جداگانه با URL ارائه شده باز خواهد شد.

1. با اسکرول کردن و کلیک کردن روی عناصر یا فضاهای خالی، با صفحه تعامل داشته باشید.
2. سپس به تب مربوط به دستیار تگ و حالت پیش‌نمایش گوگل تگ منیجر برگردید.
3. در سمت چپ، رویدادهای مختلفی را که به dataLayer وارد شده‌اند، مشاهده خواهید کرد.
4. ابتدا باید بررسی کنید که آیا تگ Web Vitals در تریگر نمای صفحه انتخابی شما فعال شده است یا خیر.

5. همچنین باید سه رویداد "web_vitals" را ببینید که هر کدام نشان دهنده یک Core Web Vital هستند: LCP، INP و CLS.

6. روی اولی کلیک کنید و در سمت راست، تب "API Call" را باز کنید، جایی که داده‌هایی را که از الگوی تگ به dataLayer منتقل شده‌اند، مشاهده خواهید کرد.

7. همچنین ورودی‌های دیگر رویدادهای "web_vitals" را بررسی کنید. از مستندات web-vitals.js به عنوان مرجع برای انواع داده‌های مختلف استفاده کنید.

۵. داده‌های Web Vitals را به GA4 ارسال کنید

برای دریافت داده‌های Core Web Vitals از dataLayer و ارسال آن به GA4، باید:

• یک تریگر برای تگ GA4 ایجاد کنید
• ایجاد متغیرها برای دریافت داده‌ها از dataLayer
• برچسب رویداد GA4 را ایجاد کنید

ماشه را ایجاد کنید

1. در فضای کاری گوگل تگ منیجر خود، به بخش «تریگرها» (Triggers) بروید.
2. با کلیک روی «جدید»، سپس «پیکربندی ماشه» و انتخاب «رویداد سفارشی» از بخش «سایر»، یک ماشه جدید اضافه کنید.
3. در قسمت نام رویداد، مقدار "web_vitals" را تنظیم کنید، نام تریگر را بنویسید و ذخیره کنید.

متغیرهای لایه داده را ایجاد کنید

1. در فضای کاری گوگل تگ منیجر خود، به بخش «متغیرها» بروید.
2. یک متغیر جدید تعریف‌شده توسط کاربر از نوع "متغیر لایه داده" ایجاد کنید.
3. در فیلد نام متغیر لایه داده، عبارت "webVitalsData.name" را وارد کنید، نام متغیر را وارد کنید (مثلاً "DLV - webVitalsData.name") و ذخیره کنید.

4. این مراحل را برای چهار متغیر لایه داده مورد نیاز دیگر تکرار کنید. "webVitalsData.value" را ایجاد کنید.

5. یک متغیر دیگر با نام "webVitalsData.id" ایجاد کنید.

6. فایل "webVitalsData.rating" را ایجاد کنید.

7. فایل "webVitalsData.delta" را ایجاد کنید.

8. در نهایت باید متغیرهای dataLayer تعریف‌شده توسط کاربر زیر را داشته باشید:

برچسب رویداد GA4 را ایجاد کنید

قبل از ایجاد یک تگ رویداد GA4، مطمئن شوید که تگ گوگل شما از قبل تنظیم شده است .

1. در فضای کاری گوگل تگ منیجر خود، به بخش «برچسب‌ها» بروید.
2. با کلیک روی «جدید»، سپس «پیکربندی برچسب» و انتخاب برچسب «Google Analytics: GA4 event» از بخش «Google Analytics»، یک برچسب رویداد GA4 اضافه کنید.
3. شناسه اندازه‌گیری خود را در فیلد مربوطه وارد کنید .

4. برای فیلد ورودی "نام رویداد"، متغیر dataLayer "DLV - webVitalsData.name" را از مرحله قبلی ایجاد شده انتخاب کنید.

5. همانطور که در تصویر نشان داده شده است، سایر متغیرهای dataLayer را به عنوان پارامترهای رویداد اضافه کنید. همچنین مطمئن شوید که پارامتر "event_category" را با مقداری مانند "Web Vitals" اضافه می‌کنید تا رویدادهای Core Web Vitals گروه‌بندی شوند.

6. این پارامترهای رویداد را به عنوان ابعاد سفارشی در رابط کاربری GA4 ثبت کنید .
7. تنظیمات اضافی را بر اساس الزامات راه‌اندازی GA4 خود اعمال کنید.
8. رویداد سفارشی "web_vitals" را به عنوان یک محرک برای تگ GA4 تنظیم کنید.
9. در صورت نیاز، استثنائات محرک را نیز اضافه کنید.

۶. بررسی داده‌ها در GA4

برای اعتبارسنجی جریان داده‌ها به GA4، دوباره به حالت پیش‌نمایش Google Tag Manager بروید. یک URL به Tag Assistant ارائه دهید و روی «اتصال» کلیک کنید.

1. با اسکرول کردن و کلیک کردن روی عناصر یا فضاهای خالی، با صفحه تعامل داشته باشید.
2. سپس به تب مربوط به دستیار تگ و حالت پیش‌نمایش گوگل تگ منیجر برگردید.
3. در سمت چپ، روی هر یک از ورودی‌های «web_vitals» کلیک کنید و تأیید کنید که تگ GA4 Core Web Vitals فعال می‌شود.

4. با کلیک روی کارت، تگ GA4 را باز کنید تا اعتبارسنجی شود که داده‌ها به درستی از dataLayer دریافت شده‌اند. مطمئن شوید که متغیرها به عنوان مقدار نمایش داده می‌شوند.

5. حالا به ویژگی GA4 خود بروید و گزارش Realtime را باز کنید.
6. در کارت «تعداد رویدادها بر اساس نام رویداد» می‌توانید تأیید کنید که آیا رویدادهای Core Web Vitals شما با موفقیت جمع‌آوری شده‌اند یا خیر.

7. اگر حجم زیادی از داده‌ها در گزارش بلادرنگ پردازش شوند، ممکن است رویدادها به راحتی قابل شناسایی نباشند. در این صورت از گزارش debugview استفاده کنید که به شما امکان می‌دهد داده‌های مربوط به یک دستگاه خاص را مشاهده کنید.

۷. تنظیمات خود را منتشر کنید

وقتی تنظیمات خود را با موفقیت آزمایش کردید، وقت آن است که فضای کاری خود را منتشر کنید .

1. فضای کاری گوگل تگ منیجر خود را باز کنید.
2. در بالا سمت راست درون رابط کاربری، روی «ارسال» کلیک کنید.
3. نام نسخه و توضیحات نسخه را وارد کنید و با کلیک روی «انتشار»، تنظیمات خود را منتشر کنید.

۸. GA4 را به Google Ad Manager یا Google AdSense متصل کنید

پس از جمع‌آوری داده‌های Core Web Vitals در GA4، معیارهای مرتبط با تبلیغات نیز باید در GA4 موجود باشند تا داشبورد کار کند. یا Google Ad Manager و Google AdSense را به GA4 یا فقط یکی از این راه‌حل‌های تبلیغاتی متصل کنید. لطفاً توجه داشته باشید که برای پیوند دادن، باید در GA4 مجوز ویرایشگر (یا بالاتر) و در Google Ad Manager و Google AdSense مجوز مدیر داشته باشید.

اتصال GA4 به مدیر تبلیغات گوگل

1. به شبکه مدیریت تبلیغات گوگل خود بروید.
2. روی «مدیریت» -> «تنظیمات کلی» -> «تنظیمات شبکه» کلیک کنید.
3. در بخش «تنظیمات گزارش»، «گزارش‌های ویژگی Google Analytics 4 در گزارش‌دهی Ad Manager» را فعال کنید.

4. شرایط و ضوابط را بررسی کنید و روی «تأیید» کلیک کنید.
5. به‌روزرسانی را ذخیره کنید.
6. به «مدیر» -> «حساب‌های مرتبط» -> «گوگل آنالیتیکس ۴» بروید.
7. روی «لینک ویژگی جدید گوگل آنالیتیکس ۴» کلیک کنید.
8. ویژگی GA4 مورد نظر خود را برای پیوند پیدا کرده و انتخاب کنید.
9. روی ذخیره کلیک کنید و تمام.

اتصال GA4 به گوگل ادسنس

1. به حساب گوگل ادسنس خود بروید.
2. روی «حساب» -> «دسترسی و مجوز» -> «ادغام با گوگل آنالیتیکس» کلیک کنید.
3. روی «+لینک جدید» کلیک کنید.

4. ویژگی GA4 مورد نظر خود را برای پیوند پیدا کرده و انتخاب کنید.
5. روی «ایجاد پیوند» کلیک کنید.

۹. داده‌ها را با Looker Studio مصورسازی کنید

برای نمایش بصری داده‌های Core Web Vitals به همراه معیارهای تبلیغاتی، این مرحله شامل راه‌اندازی داشبورد Looker Studio است. لطفاً این مراحل را برای مرتبط کردن Core Web Vitals و درآمد حاصل از تبلیغات دنبال کنید.

1. این الگوی داشبورد Looker Studio را باز کنید
2. داشبورد را کپی کنید .
3. با انتخاب ویژگی GA4 خود از لیست کشویی، منبع داده را به‌روزرسانی کنید.
4. انجام شد

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

صفحه اول داشبورد، نمایی تاریخی از عملکرد Core Web Vitals شما را ارائه می‌دهد:

در صفحه دوم می‌توانید Core Web Vitals را با درآمد حاصل از تبلیغات از Google Ad Manager و/یا Google AdSense مرتبط کنید:

صفحه سوم به شما امکان می‌دهد عملکرد Core Web Vitals را در سطح مسیر صفحه به همراه معیارهای مرتبط با تبلیغات تجزیه و تحلیل کنید:

۱۰. نتیجه‌گیری

تبریک! شما یاد گرفتید که چگونه Core Web Vitals را با GA4 و معیارهای عملکرد تبلیغات از Google Ad Manager و Google AdSense اندازه‌گیری و گزارش کنید.

بیشتر بدانید

• ارتباط دادن Core Web Vitals و درآمد حاصل از تبلیغات با ابزارهای گوگل
• بارگذاری موثر تبلیغات بدون تاثیر بر سرعت صفحه
• بزرگترین رنگ محتوا را بهینه کنید
• بهینه‌سازی تغییر چیدمان تجمعی
• بهینه سازی تعامل با رنگ بعدی