اگه از فرم‌های HubSpot تو سایتت برای جذب لید استفاده می‌کنی، می‌بینی که تریگر فرم سابمیت اصلی گوگل تگ منیجر کار نمی‌کنه. خوشبختانه یه راه‌حل هست! تو این مقاله، بهت نشون می‌دم چطور فرم‌های HubSpot رو با گوگل تگ منیجر و گوگل آنالیتیکس ۴ ترکینگ کنی. این راه‌حل با نسخه‌های ۳ و ۴ فرم‌های HubSpot سازگاره.
این فرآیند رو به دو مرحله (با تست تو وسط کار) تقسیم می‌کنیم:
-یه لیسنر ایونت تو گوگل تگ منیجر اضافه کن که پیام تکمیل موفق فرم‌های HubSpot رو چک کنه و این اطلاعات رو به Data Layer بفرسته.
-یه تگ GA4 بساز که داده‌ها رو از Data Layer جمع‌آوری کنه و به گوگل آنالیتیکس ۴ بفرسته.
این پایین یه مثال از داده‌هایی که نهایتاً می‌بینی اومده:
این راه‌حل با نسخه‌های ۳ و ۴ فرم‌های HubSpot سازگاره.
قبل از شروع، دو فرض داریم:
-GA4 رو با گوگل تگ منیجر تو وب‌سایتت نصب کردی.
با ساختن تگ، تریگر و وریبل تو GTM آشنا هستی. اگه نه، دوره آموزش گوگل تگ منیجر رو چک کن.
اضافه کردن ایونت لیسنر کاستوم به کانتینر GTM
از کد کاستوم پایین استفاده می‌کنیم که به ارسال فرم‌های HubSpot گوش میده. وقتی کسی فرم رو پر کنه و بفرسته، کد کاستوم پایین اون ایونت رو می‌گیره و با فرستادن داده‌هاش به Data Layer، اون رو برای گوگل تگ منیجر قابل‌مشاهده می‌کنه.
کد لیسنر فرم‌های HubSpot اینه:
hubspot.txt
باید لیسنر رو به کانتینر گوگل تگ منیجر اضافه کنی. تو GTM، به بخش Tags تو نوار ناوبری سمت چپ برو و "New" رو بزن.
از لیستی که میاره تگ Custom HTML رو انتخاب کن.
کد لیسنر فرم‌های HubSpot (فابل نوت بالا) رو تو کادر متنی پیست کن. این لیسنر هر دو نسخه ۳ و ۴ فرم‌های هاب اسپات رو پشتیبانی می‌کنه.
به بخش Triggering همین تگ برو. اینجا دو گزینه داری که بستگی به نیاز ترکینگ داره: (1) ایونت رو تو بعضی صفحات ترکینگ کن یا (2) تو همه صفحات ترکینگ کن.
بهتره این ایونت فقط تو صفحاتی که واقعاً فرم HubSpot رو دارن تریگر بشه. این باعث میشه سرعت لود سایتت یه کم بهتر بشه چون کد فقط تو صفحاتی که نیازه اجرا میشه.
برای تریگر کردن ایونت تو صفحاتی که فرم HubSpot دارن، علامت + رو بزن تا تریگر رو اضافه کنی. بعد، تو صفحه "Choose a trigger"، دوباره علامت + رو بزن تا تریگر جدید بسازی.
نوع تریگر رو "Page View" انتخاب کن. گزینه "Some Page Views" رو انتخاب کن تا فقط توی بعضی صفحات فعال بشه.
تریگر رو با یه نام مناسب (طبق قواعد نامگذاری که توی یکی از پست های وبلاگی) اسم بزار و ذخیره کن.
اگه می‌خوای ایونت تو همه صفحات تریگر بشه، تریگر Page View باید روی All pages باشه.
حالا که تریگر به تگ وصل شده، اسمش رو "cHTML – HubSpot Forms listener" (cHTML مخفف Custom HTML) بزار و ذخیره کن.
قبل از اینکه مرحله ۱ رو تموم کنیم، باید تست کنیم که لیسنر کار می‌کنه یا نه.
تست کاستوم کد
کانتینر GTM رو با زدن دکمه "Preview" تو گوشه بالا-راست رابط GTM پریویو بگیر.
URL وب‌سایتت رو وارد کن و فرم HubSpot رو تکمیل کن. وقتی پیام ارسال موفق رو دیدی، به تب پیش‌نمایش برو و ایونت form_submission رو پیدا کن.
روی اون ایونت کلیک کن تا اطلاعاتی که جمع‌آوری کرده رو ببینی. باید form_id، conversion_id و form_data (که داده‌های فیلدهای فرم رو دارن) رو ببینی. اگه نسخه ۳ فرم‌های HubSpot رو ترکینگ می‌کنی، ممکنه پارامترهای بیشتری هم داشته باشی.
تو مرحله بعدی، تگ GA4 رو می‌سازیم تا اطلاعات جمع‌آوری شده به GA4 بفرسته.اینجا باید بتونی تصمیم بگیری کدوم اطلاعات رو می‌خوای ترکینگ و گزارش کنی.
ایجاد ایونت GA4 و پیدا کردن داده
با اضافه کردن کد کاستوم به کانتینر GTM، اطلاعاتی که می‌خوای ترکینگ کنی رو تو Data Layer در دسترس داری. ولی هنوز باید ایونتی بسازی تا داده‌ها رو جمع‌آوری کنه و به گوگل آنالیتیکس ۴ بفرسته.
ایجاد ایونت از سه بخش تشکیل شده: تگ، تریگر و پارامترها. با ساختن تریگر و پارامترها شروع می‌کنیم و بعد اونا رو به تگ اضافه می‌کنیم.
ایجاد تریگر
برای ساختن تریگر، به Triggers تو نوار سمت چپ GTM برو و دکمه "New" رو بزن.
"Trigger Configuration" رو بزن و "Custom Event" رو زیر بخش Other انتخاب کن.
تو فیلد Event name، همون نامی که تو کد لیسنر ایونتت هست یعنی "form_submission" - رو وارد کن. خیلی مهمه که دقیقاً همون باشه، پس قبل از ذخیره تریگر دوبار چک کن!
اسم تریگر رو "custom – form_submission" (یا چیزی مشابه) بزار و ذخیره کن.
ایجاد وریبل‌های Data Layer
بسته به اطلاعاتی که تصمیم گرفتی با ایونت تکمیل فرم جمع‌آوری کنی، باید وریبل‌های Data Layer بسازی تا این داده‌ها رو بتونی به GA4 بفرستی. یادت باشه، این اطلاعاتیه که از ایونت جمع‌آوری شده و می‌تونی از بینشون انتخاب کنی:
چون می‌خوای از این ایونت‌ها برای enhanced conversion استفاده کنی، باید یه شناسه برای کاربری که فرم رو فرستاده (مثل آدرس ایمیلش) همراه با form ID بفرستی.
تو GTM، به بخش Variables تو نوار سمت چپ برو و زیر User-Defined Variables روی "New" کلیک کن.
"Variable Configuration" رو بزن و "Data Layer Variable" رو انتخاب کن.
بسته به وریبل‌هایی که انتخاب کردی جمع‌آوری کنی، (1) اسم دقیق وریبل از کد بالا رو وارد کن و (2) اسم وریبل رو "dlv – {variable name}" بزار و ذخیره کن.
بعنوان مثال، دو وریبل Data Layer می‌سازم: form_id و form_data.email (باید مشخص کنیم که ایمیل داخل کلید form_data هست).
ایجاد وریبل User-Provided Data
این بخش لازمه اگه می‌خوای ایونت‌های کلیدی از GA4 رو به‌عنوان کانورژن به گوگل ادز بفرستی و آدرس ایمیل کاربر رو هم باهاش ارسال کنی. فرض بر این هست که پراپرتی گوگل آنالیتیکس رو به حساب گوگل ادز لینک کردی.
اولین قدم اینه که جمع‌آوری داده‌های کاربر رو با رفتن به Admin > Data Collection and Modification > Data Collection فعال کنی. زیر بخش User-provided data collection روی "Turn on" کلیک کن.
تو پاپ‌آپی که میاد، مطمئن شو تاکل مربوط به جمع‌آوری خودکار داده‌های کاربر خاموش باشه و بعد گزینه "Turn on" رو از پایین سمت راست بزن.
بعد، به Data collection and modification > Data streams برو. روی سایتت کلیک کن و به Configure tag settings اسکرول کن.
گزینه Allow user-provided data capabilities رو پیدا کن و "Automatically detect user-provided data" رو خاموش کن.
باز تو GTM، به Variables تو نوار ناوبری سمت چپ برو و زیر User-Defined Variables وریبل دیگه‌ای بساز.
این بار، "User-Provided Data" رو انتخاب کن.
گزینه Manual configuration رو انتخاب کن و زیر Email، وریبل Data Layer ایمیل که قبلاً ساختی رو پیدا کن.
وریبل رو "user-provided data" (یا چیزی مشابه) نام بزار و ذخیره ش کن. حالا که همه قطعات پازل رو داری، قدم بعدی اینه که اونا رو کنار هم مرتب کنی!
ساختن تگ
فقط ساختن تگ GA4 مونده. مراحلش خیلی شبیه به وقتی بود که تگ Custom HTML ساختیم. به قسمت Tags تو نوار سمت چپ برو و "New" رو بزن تا تگ جدید بسازی. برای تنظیمات تگ، Google Analytics > GA4 Event رو انتخاب کن.
مژرمنت آیدی
اگه آیدی اندازه‌گیریت به‌عنوان ثابت تو کانتینرت ذخیره نشده، باید مقدارش رو از تگ config GA4 تو کانتینر GTMت برداری. این مقدار رو کپی کن
و تو بخش Measurement ID تگ GA4 جدید پیست کن.
ترکیب همه المان‌ها
کار سنگین رو قبلاً کردی، پس فقط باید تگ رو بسازی.
اول، می‌تونی یه اسم ایونت اضافه کنی، مثلاً "form_submission" یا "generate_lead".
بعد، پارامترها رو اضافه کن: form_id & user_data.
در آخر، تریگر ایونت کاستوم رو اضافه کن.
اسم تگ رو "GA4 event – form_submission" بزار و ذخیره کن.
تست ایونت
مثل تست تگ Custom HTML، کانتینر GTM رو پریویو بگیر، URL وب‌سایتت رو وارد کن و فرم HubSpot رو تکمیل کن.
وقتی پیام تکمیل موفق رو دیدی، به تب پریویو برو و ایونت from_submission رو چک کن. باید تگت رو زیر بخش "Tags Fired" ببینی.
تگ رو انتخاب کن و چک کن که پارامترها اطلاعات موردنظرت رو جمع‌آوری کرده باشن.
می‌تونی به بخش DebugView تو گوگل آنالیتیکس ۴ هم بری تا داده‌های ورودی رو اونجا هم چک کنی. برای این، به این مسیر بری Admin > Data Display > DebugView و چک کنی که ایونت دریاقت میشه یا نه.
روی ایونت کلیک کن تا پارامترهای جمع‌آوری‌شده رو (زیر تب Parameters) ببینی. چک کن که پارامترهایی که به ایونت اضافه کردی رو می‌بینی. بخش دیباگ ویو نمیتونه user_provided data رو نشون نمی‌ده، پس نگران نباش اگه اینو ندیدی.
توی تب پریویوی GTM هم مشخص شده چی به GA4 فرستاده شده با نگاه کردن به تگ‌ها زیر بخش Google Analytics 4 Measurement ID. اینجاست که می‌تونی چک کنی GA4 ایمیل رو جمع‌آوری می‌کنه یا نه.
روی تگ form_submission کلیک کن و دنبال پارامتر em بگرد (یه مقدار هش‌شده به جای آدرس ایمیل می‌بینی).
اگه پارامتر em رو ندیدی، مطمئن شو گزینه user-provided data collection رو تو تنظیمات پراپرتی گوگل آنالیتیکس فعال کردی.
ایجاد دایمنشن کاستوم با اسکوپ ایونت
برای ساختن گزارش با form ID توی GA4، باید اون رو به‌عنوان دایمنشن کاستوم با اسکوپ ایونت اضافه کنی.
تو گوگل آنالیتیکس، به این مسیر Admin > Data Display > Custom Dimensions برو. روی "Create Custom Dimension" کلیک کن.
سه تا چیز باید در نظر بگیری:
اسم دایمنشن همون اسمی هست که تو گزارش‌های GA4 نمایش داده میشه
پارامتر ایونت باید همون نامی باشه که تو گوگل تگ منیجر واسه اون پارامتر ست کردی
اسکوپ رو روی "Event" تنظیم کن
و در نهایت
دایمنشن کاستوم رو ذخیره کن.
کانتینر رو پابلیش کن
حالا که تگ GA4ت رو ساختی و تست کردی، می‌تونی کانتینر رو منتشر کنی. مطمئن شو کانتینر رو درست نامگذاری کنی و توضیحی براش بذاری تا بعد از این به‌روزسانی به‌راحتی پیداش کنی (اگه مشکلی پیش اومد).
پیدا کردن داده‌ها تو GA4
بعد از پابلیش کانتینر GTM، حداقل ۲۴ ساعت صبر کن تا GA4 داده‌های ایونت جدیدت رو پردازش کنه.
برای دیدن داده‌های ورودی، توی GA4 یه Exploration بساز. به Explore تو نوار ناوبری سمت چپ برو. "Blank" رو بزن تا گزارش جدیدی درست کنی.
توی این گزارش، این دایمنشن‌ها، متریک ها و فیلترها رو انتخاب کن (علامت بعلاوه کنار المان رو بزن):
دایمنشن‌ها: Event name، Form ID
متریک ها: Event count، Total users
فیلتر: Event name "exactly matches" form_submission
هر کدوم از این المان‌ها رو با کشیدن دایمنشن‌ها به Rows و معیارها به Values اضافه کن (یا روی هر دایمنشن و متریک دوبار کلیک کن).
نکات پایانی
اگه دنبال این بودی که چطور فرم‌های HubSpot رو با GA4 ترکینگ کنی، این آموزش هم روش انجامش و هم روش نمایش داده‌ها رو روشن کرده.
اگه از HubSpot برای رزرو جلسات استفاده می‌کنی، متأسفانه این ترکینگ برای اون سناریو کار نمی‌کنه.
دیدگاه خود را بنویسید