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

1. قبل از شروع

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

کاری که خواهی کرد

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

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

• یک حساب Google Analytics و یک ویژگی وب GA4 با دسترسی ویرایشگر.
• یک حساب Google Tag Manager و کانتینر وب با حقوق انتشار.
• یک شبکه Google Ad Manager و/یا حساب Google AdSense با دسترسی سرپرست.
• یک حساب کاربری Looker Studio.

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

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

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

اکنون به حساب Google Tag Manager خود بروید .

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

5. روی منوی More Actions کلیک کنید و Import را انتخاب کنید.

6. فایل TPL دانلود شده قبلی را از رایانه خود انتخاب کنید.
7. روی دکمه "ذخیره" کلیک کنید.

شما الگوی برچسب را به ظرف Google Tag Manager خود اضافه کردید.

3. تگ Web Vitals را راه اندازی کنید

1. در فضای کاری Google Tag Manager خود، به "Tags" بروید.
2. تگ Web Vitals را با کلیک بر روی "جدید"، سپس "پیکربندی برچسب" اضافه کنید و تگ "Web Vitals" را از بخش "Custom" انتخاب کنید.
3. گام بعدی این است که تنظیمات مختلف را پیکربندی کنید. تمام تنظیمات در مخزن GitHub توضیح داده شده است. برای کارکرد این کد لبه و داشبورد نهایی تنظیمات زیر کافی است.

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

4. داده های Web Vitals را در dataLayer کاوش کنید

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

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

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

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

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

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

برای بیرون کشیدن داده های Core Web Vitals از dataLayer و ارسال آن به GA4، باید:

• یک ماشه برای تگ GA4 ایجاد کنید
• متغیرهایی ایجاد کنید تا داده ها را از dataLayer بکشید
• تگ رویداد GA4 را ایجاد کنید

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

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

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

1. در فضای کاری Google Tag Manager خود، به "Variables" بروید.
2. یک متغیر جدید تعریف شده توسط کاربر از نوع "متغیر لایه داده" ایجاد کنید.
3. "webVitalsData.name" را در قسمت نام متغیر لایه داده تنظیم کنید، متغیر را نامگذاری کنید (به عنوان مثال "DLV - webVitalsData.name") و ذخیره کنید.

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

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

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

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

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

تگ رویداد GA4 را ایجاد کنید

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

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

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

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

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

6. داده ها را در GA4 بررسی کنید

برای تأیید جریان داده به GA4 دوباره به حالت پیش‌نمایش Google Tag Manager بروید. یک URL به دستیار برچسب ارائه دهید و روی "اتصال" کلیک کنید.

1. با پیمایش و کلیک کردن روی عناصر یا فضاهای سفید با صفحه تعامل برقرار کنید.
2. سپس با دستیار برچسب و حالت پیش‌نمایش Google Tag Manager به تب برگردید.
3. در سمت چپ، روی هر یک از ورودی های "web_vitals" کلیک کنید و تأیید کنید که برچسب GA4 Core Web Vitals فعال می شود.

4. تگ GA4 را با کلیک بر روی کارت باز کنید تا اعتبار آن داده ها به درستی از dataLayer کشیده شود. اطمینان حاصل کنید که متغیرها را به عنوان مقادیر نمایش می دهید.

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

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

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

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

1. فضای کاری Google Tag Manager خود را باز کنید.
2. در سمت راست بالای UI، روی «ارسال» کلیک کنید.
3. نام نسخه و توضیحات نسخه را ارائه دهید و با کلیک کردن بر روی "انتشار"، تنظیمات خود را فعال کنید.

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

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

GA4 را با Google Ad Manager متصل کنید

1. به شبکه Google Ad Manager خود بروید.
2. روی "Admin" -> "Global settings" -> "Network settings" کلیک کنید.
3. در بخش «تنظیمات گزارش»، «Google Analytics 4 Property Reports in Ad Manager Reporting» را فعال کنید.

4. شرایط و ضوابط را بررسی کنید و روی "تأیید" کلیک کنید.
5. به روز رسانی را ذخیره کنید.
6. به "Admin" -> "Linked accounts" -> "Google Analytics 4" بروید.
7. روی «پیوند ویژگی جدید Google Analytics 4» کلیک کنید.
8. ویژگی GA4 خود را که می خواهید پیوند دهید، پیدا کرده و انتخاب کنید.
9. روی ذخیره کلیک کنید و کارتان تمام شد.

GA4 را با Google AdSense متصل کنید

1. به حساب Google AdSense خود بروید.
2. روی "حساب" -> "دسترسی و مجوز" -> "ادغام Google Analytics" کلیک کنید.
3. روی "+ پیوند جدید" کلیک کنید.

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

9. داده ها را با Looker Studio تجسم کنید

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

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

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

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

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

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

10. نتیجه گیری

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

بیشتر بدانید

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