همین ابتدای بلاگ پست باید بگم که دو پست وبلاگی جدا برای ترکینگ فرم های contact form 7 و فرم های gravity گذاشتم چون که محبوب ترین فرم های استفاده شده در وبسایت ها هستن.
وقتی با مارکترها حرف میزدم، متوجه شدم یکی از محبوبترین موضوعات بینشون ترکینگ فرمهاست. متأسفانه، تو بعضی موارد، ترکینگ فرم میتونه واقعاً دردسرساز بشه (بهخصوص اگه یه بازاریاب هیچ سررشتهای از CSS یا HTML نداشته باشه). ولی نگران نباش چون تو این پست وبلاگی، ۷ تکنیک ترکینگ فرم به کمک GTM رو بهت نشون میدم.
اگه این پست وبلاگی به نظرت پیچیده اومد
این مقاله طولانیه و بعضی قسمتها ممکنه گیجکننده باشه، بهخصوص اگه تازه کار با GTM رو شروع کردی و یه راهحل سریعی میخوای. تو دوره GTM یه بخش کامل رو به ترکینگ فرم اختصاص دادم.
ترکینگ فرم به کمک GTM: مبانی
تو فضای اینترنت، انواع مختلفی از فرمها وجود داره. بعضیها بعد از ارسال موفق رفرش میشن، بعضیها نه، بعضیها ممکنه تو رو به صفحه "thank u" هدایت کنن و غیره. مشکل اصلی ترکینگ فرم اینه که هیچ استاندارد جهانی برای ساختن این فرمها وجود نداره. بعضی دولوپرها ممکنه یه تکنولوژی (مثلاً AJAX) رو به بقیه ترجیح بدن بعضی ها هم نه.
چون به ترکینگ فرم علاقه داری، احتمالاً تریگر "Form Submission" و وریبل های فرم تو گوگل تگ منیجر رو دیدی. حداقل یه تریگر "Form Submission" رو تو صفحه فعال کن (که به همه ایونت های ارسال فرم گوش میده) و اتو ایونت لیسنر سابمیت فرم رو توی GTM فعال کن.
این لیسنر به ایونت سابمیت استاندارد در مرورگر گوش میده. ولی اکثر فرمها از روشهای دیگه برای ارسال دادههاشون استفاده میکنن (مثلاً jQuery’s $.ajax)؛ بنابراین، ایونت سابمیت توی این موارد ارسال نمیشه. تو این حالت،GTM هیچوقت سابمیت فرم رو ثبت نمیکنه. و این یه مشکل خیلی رایجه (فکر میکنم تو ۹۹٪ مواردی که باهاشون مواجه بودم، از روش ترکینگ دیگهای استفاده کردم و تریگر form submission بکارم نیومد).
اگه فرم لیسنر GTM برات کار نکنه، گزینههای دیگهای برای رسیدن به هدف فرم ترکینگ وجود داره. این پست وبلاگی گزینههای استاندارد و راهحلهای جایگزین برای ترکینگ فرم در گوگل تگ منیجر رو توضیح میده.
تگ + تریگر
احتمالاً با کانسپت اصلی گوگل تگ منیجر آشنا هستی: هر تعاملی که میخوای ترکینگ کنی به یه تگ و یه تریگر نیاز داره. اگه میخوای همه سابمیت های فرم رو با گوگل آنالیتیکس ۴ ترکینگ کنی، باید یه تگ GA و یه تریگر بسازی که زمان اجرا شدن تگ رو مشخص کنی.
ساخت تگ بخش راحت این پروسهست. بیایم یکی بسازیم - تو بخش های بعدی این پست وبلاگی به این تگ نیاز داری.
تو این مقاله، فرض بر این هست که GA4 رو قبلاً نصب کردی. این یعنی کانتینرت شامل تگ کانفیگ گوگل و مژرمنت آیدی GA4 هست.
حالا وقتشه یه تگ ایونت GA4 بسازی که تو همه مثالهای این مقاله استفاده بشه.
در محیط تگ منیجر به بخش Tags برو. دکمه New رو بزن
تو تنظیمات تگ، Google Analytics > Google Analytics: GA4 Event رو انتخاب کن
تو بخش مژرمنت آیدی ، باید آیدی مژرمنت رو وارد کنی. اینطوری، تگ ایونتی که میسازیم تنظیمات تگ کانفیگ گوگل رو استفاده میکنه.
تو فیلد Event Name باید مقدار generate_lead رو وارد میکنم
بخش Triggering رو خالی بذار (فعلا) و Save رو بزن. بعداً برمیگردیم بهش. ۸۰٪ این پست وبلاگی به انواع مختلف تریگرهایی که میتونی استفاده کنی اختصاص داره. انتخاب نوع تریگر به روش ساختن فرم بستگی داره.
بیاید سریع بعضی موارد رو توضیح بدیم. از "generate_lead" بهعنوان نام ایونت استفاده کردیم چون تو لیست GA4 Recommended Events هست. ولی اگه میخوای، میتونی اسم دیگهای بذاری.
تو بخش های بعدی این پست وبلاگی ممکنه پیشنهاد بدم پارامترهای اضافی رو به این تگ اضافه کنی، پس حواست به این مورد باشه.
هر روش ترکینگ فرمی که میخوام توضیحش بدم به المانها/ایونتهای متفاوتی که بعد از ارسال فرم تو وبسایت ثبت میشه وابستهست مثلا:
اتو ایونت لیسنر فرم سابمیت
صفحه "thanku"
ترکینگ فرم AJAX
ترکینگ با تریگرElement Visibility
نوشتن ایونت لیسنر خودکار سابمیت فرم
کمک دولوپر (برای ارسال dataLayer.push)
DOM scraping
یه تریگر به اشتباه ست شده میتونه به دادههای نادرست و گزارشهای غلط (که به نتیجه ها و اکشن های اشتباه ختم بشن) منجر بشه. پس همهچیز رو با دقت بخون.
کدوم روش ترکینگ فرم رو باید انتخاب کنی؟
قبل از پرداختن به اقیانوسی از تریگرها و تکنیکهای ترکینگ، باید خود فرم رو بررسی کنیم و تصمیم بگیریم کدوم تکنیک ترکینگ میتونه نیازهامون رو رفع کنه. به این نقشه روند ترکینگ توجه کن که کارت رو حسابی ساده میکنه:
مطمئنم بعضی قسمتهای نقشه بالا ممکنه مبهم به نظر بیاد.تو ادامه این بلاگ همه چی برات شفاف میشه.
روش #۱. تریگر فرم سابمیت درGTM
اول، بیایم فرم لیسنر داخلی GTM رو امتحان کنیم. لیست وریبل ها تو اکانت GTM رو باز کن. بهطور پیشفرض، وریبل های فرم غیرفعالن. بنابراین، باید اونا رو فعال کنی. از لیست وریبل های built-in باید Configure رو بزنی و تو نوار کناری سمت راست همه وریبل های فرم رو فعال کنی (همه تغییرات بهصورت خودکار ذخیره میشن).
بعد، لیست همه تریگرهات (با زدن Triggers تو نوار کناری سمت چپ رابط GTM) رو باز کن. یه تریگر جدید با این تنظیمات بساز:
یه کم درباره چکباکس Check validation. وقتی این گزینه فعال باشه، GTM تریگر رو فعال نمیکنه اگه اکشن های پیشفرض فرم (سابمیت و ریدایرکت) بلاک شده باشه.
اگه این چک باکس تیک نخورده باشه، تریگر هر وقتی که ایونت سابمیت ثبت بشه فعال میشه (حتی وقتی فرم با خطا ارسال بشه، مثلاً چند فیلد الزامی خالی بمونه).
وقتی این چکباکس فعال باشه، فیلد اضافی "Enable this trigger when…" ظاهر میشه. تو مورد من، میخوام این تریگر تو همه صفحات فعال باشه. برای همین "/ Page Path contain" رو وارد کردم. چرا؟ چون Page Path همیشه حداقل یه اسلش تو هر صفحه داره.
حالا، بیاید با حالت Preview و Debug بفهمیم لیسنر خودکار ایونت فرم در GTM برامون کار میکنه یا نه. تو گوشه بالا-راست اکانت Google Tag Managerت، Preview رو بزن.
بعد، یه تب مرورگر جدید باز میشه که ازت میخواد URL صفحهای که فرم توش هست رو وارد کنی. لینک اون صفحه رو وارد کن و Start رو بزن.
بعد، یه تب (یا پنجره) جدید به وبسایتت باز میشه. تو پایین صفحه، باید یه پاپاپ مشابه این ببینی (که میگه connected):
اگه تب حالت پریویو یا این پاپاپ بالا اومد که نوشته بود not connected ،توی مطالب وبلاگم یه پست در این مورد نوشتم.
بعد از فعال شدن Preview & Debug mode، به سایتی که فرم توشه برو. فرم رو پر کن (سعی کن هیچ فیلدی خالی نمونه):
-دکمه سابمیت رو بزن. ایونت "Form Submit" تو کنسول Preview و Debug ظاهر شد؟ اگه نه، لیسنر خودکار ایونت فرم در GTM با این فرم همخوانی نداره و باید به گزینه بعدی فرم ترکینگ در ادامه بری.
-اگه ایونت "Form Submit" تو کنسول Preview و Debug ظاهر شد، یه تست دیگه انجام بده - حداقل یه فیلد الزامی فرم رو خالی بذار و دوباره ارسال کن. اینطوری وجود خطایی توی اون فرم رو شبیهسازی میکنی:
-اگه ایونت "Form Submit" دوباره فعال بشه، باید گزینههای دیگه فرم ترکینگ که تو ادامه این پست وبلاگی ذکر شده رو چک کنی.
-اگه ایونت "Form Submit" فعال نشد - عالیه! یعنی GTM فقط ارسالهایی که با موفقیت انجام شدن رو ترکینگ میکنه (و این دقیقاً همون چیزیه که نیاز داری).
اگه این پاراگراف رو خوندی، فرض میکنم تریگر "Form Submission" طبق انتظارت کار میکنه و فقط وقتی فرم با موفقیت ارسال بشه تو حالت پیشنمایش ایونت رو فعال میکنه.
بیا تریگری مخصوص اون فرم بسازیم. ایونت "Form Submit" که قبلاً ذکر شد رو به خاطر داری؟ روش کلیک کن (تو حالت Preview و Debug)، بعد تب Variables رو بزن.
بعد اسکرول کن پایین و دنبال وریبل فرمی که منحصربه اون فرم باشه بگرد. معمولاً وریبل "Form ID" هست، تو موارد دیگه - "Form Classes" (ولی "Form ID" گزینه بهتریه). مثل تصویر زیر، فرمی ارسال کردم (که وریبل "Form ID"ش wpdevart-forms-7 هست).
این یه آیدی خوبی هست که تو هیچ المان دیگهای تو وبسایت استفاده نشده، پس ازش برای تریگرم استفاده میکنم:
به Triggers برو و تریگر "Form Submission" که قبلاً ساختی رو باز کن
بهجای "All Forms" بیا و "Some Forms" رو انتخاب کن و شرطی وارد کن که فقط اون فرم خاص رو هدف بگیره. تو این مورد ، کاندیشن اینه: "Form ID equals wpdevarp-forms-7".
اگه وریبل "Form ID" رو نمیبینی - اون رو تو لیست وریبل های built-in اکانت GTM فعال کن.
"Form ID" در فرم تو (نسبت به مثال من) ممکنه متفاوت باشه.
تریگر رو ذخیره کن.
اگه بیشتر از یه فرم داری که بازدیدکنندهها/کاربرها میتونن پرش بکنن، ممکنه منطقی باشه یه پارامتر اضافی تو تگ ایونت GA4ت بگنجونی (که بهت کمک کنه تشخیص بدی کدوم فرم سابمیت شده).
تو GTM، به تگها برو و تگ ایونت GA4 که ساختی رو ویرایش کن.
هیچ الزام سختگیرانهای برای نامگذاری اون پارامتر (پارامتر نشون دهنده نوع فرم پر شده) وجود نداره، پس من اسم اون پارامتر رو "form_id" میذارم. و مقدارش ارزش وریبل {{Form ID}} خواهد بود.
تگ رو ذخیره کن.
بیا تست کنیم + دایمنشن کاستوم form_id رو تو GA4 رجیستر کنیم
این تریگر جدید رو به تگ ایونت Google Analytics 4 که تو شروع این پست وبلاگی ساختی لینک کن .
حالت Preview و Debug رو رفرش کن (با زدن دوباره دکمه Preview تو رابط GTM)
بعد فرم رو پر کن و سابمیت کن. اگه تگ Google Analytics اجرا شد، خبر خوبیه! اگه ممکنه سعی کن فرم دیگهای رو تو وبسایتت سابمیت کنی: بعد از سابمیت موفق اون فرم دوم، تگ GA مربوط به ایونت generate lead نباید اجرا بشه.
باید ایونتهای ورودی رو تو Debug View گوگل آنالیتیکس ۴ هم چک کنی.
اگه قصد داری از "form_id" (یا پارامتر کاستوم دیگهای) تو گزارشهای GA4 استفاده کنی، باید اون رو بهعنوان دایمنشن کاستوم ثبت کنی. از این مسیر این کار رو بکن: admin<custom definition. گزینه create custom dimension رو انتخاب کن. حواست باشه اسم پارامتر توی فیلد Event parameter با اسم پارامتر توی تگ ایونت GA4 یکسان باشه. اسکوپ روی Event باشه و فیلد Dimension Name رو جوری بزار که راحت توی پنل GA4 برات پیدا بشه.
روش #۲. ترکینگ صفحه "thanku" با GTM
اگه روش بالا کار نمیکنه، باید چک کنی که فرم بعد از ارسال موفق, کاربر رو به صفحه دیگهای هدایت میکنه یا نه.
اگه آره، به کدوم URL (آدرس وب) هدایت میکنه؟
آیا اون آدرس یونیکه؟
اگه آره، آیا کاربرها میتونن بدون ارسال واقعی فرم به اون صفحه برن؟ اگه جواب این سؤال آخر نه باشه، میتونی یه تریگر pageview بسازی که فقط زمان لود شدن اون صفحه سابمیت موفق اجرا بشه. هدف اینجا اینه که بازدیدهای تصادفی از صفحه سابمیت موفقیت (یعنی صفحه "thankyou") رو تا حد ممکن کم کنی.
حالا، بیایم تریگری بسازیم که فقط تو صفحه "Thank You" اجرا بشه.
تو Google Tag Manager برو به بخش Triggers.
دکمه New رو بزن
نوع تریگر رو انتخاب کن - Pageview و کاندیشن Some page views
اگه بازدیدکننده به https://www.example.com/form/thankyou.html هدایت بشه، میتونی یکی از این قواعد رو برای این تریگر بذاری:
"Page Path equals /form/thankyou.html".
یا "Page URL contains /form/thankyou.html". سعی کن تریگر تا حد ممکن خاص و هدفمند باشی. فقط تنظیم "thankyou" بهعنوان قاعده فایر شدن این تریگر ایده خوبی نیست چون ممکنه صفحات دیگهای باشن که URLشون اون عبارت "thankyou" رو داشته باشه (و ما نمیخوایم این اتفاق بیفته!).
فراموش نکن تریگر رو درست نامگذاری کنی، مثلاً "Pageview – Successful Form Submission". عنوان باید واضح باشه. وگرنه، تو حساب Google Tag Managerت ممکنه با بقیه تریگرها اشتباه بشه.
تست + بررسی دایمنشنها تو GA4
تریگر جدیدی که ساختی رو به تگ ایونت GA4 که تو شروع این پست وبلاگی ساختی وصل کن .
حالت Preview و Debug رو باز کن (یا رفرش کن) و صفحه وب دارای اون فرمی که میخوای ترکینگ کنی رو رفرش کن.
بعد فرم رو پر کن و ارسال کن. بعد از ارسال موفق، به صفحه "thanku" هدایت میشی - اگه تگ Google Analytics اجرا شد، کار رو درست انجام دادی! اگه ممکنه سعی کن یه فرم دیگهای تو وبسایتت داری رو سابمیت کنی (برای چک اینکه اون تگ سابمیت فرم بهطور تصادفی اجرا نشه).
باید Debug View گوگل آنالیتیکس ۴ رو هم چک کنی.
اگه چندتا فرم داری و همهشون صفحه "thanku" متفاوتی دارن، نیازی به تنظیم پارامتر کاستوم تو تگ ایونت GA4 نداری. GA4 بهطور خودکار "page_location" رو ترکینگ میکنه و میتونی ارسالهای فرم رو با دایمنشنی مثل Page Path تشخیص بدی.
اگه برعکس، چندتا فرم داری و همشون یه صفحه "thanku" یکسان ریدایرکت میشن، باید این کارو بکنی:
همه این نکات رو چک کن و ببین میتونی وریبل خاصی که حاوی ID فرم (مثلاً form id، form name و غیره) هست رو بگیری و ازش تو مورد بعدی استفاده کنی.
بعد، اون پارامتر اضافی رو تو تگ ایونت generate_lead GA4 بگنجون. این پارامتر میتونه چیزی مثل "form_id"، "form_name" یا هر چیزی که یونیک بود باشه، مثلاً:
روش #۳. ترکینگ سابمیت فرمهای AJAX با GTM
اگه داری بخش رو میخونی، فرم مدنظرت احتمالاً ایونتهای form_submit معتبری نمیفرسته و کاربرها رو به صفحه "thanku" هدایت نمیکنه. احتمالاً فقط فرم رو رفرش میکنه و بعد پیام "شما با موفقیت فرم رو پر کردید" رو بدون رفرش واقعی صفحه نمایش میده.
این روش AJAX تو وبسایتها خیلی رایجه چون تعامل با اون برای کاربرها سریع و راحت به نظر میاد. بهجای ریلود کل صفحه فقط برای نشون دادن پیام "thanku"، فرم دادهها رو تو پسزمینه به صورت سریعی ارسال میکنه و تنها یه بخش کوچیک از صفحه رو آپدیت میکنه. اگرچه این برای تجربه کاربری عالیه، کار ما رو یه کم سختتر میکنه چون تریگر استاندارد GTM رو مطلع نمیکنه. برای همین به یه "لیسنر" خاص نیاز داریم که این ارسالهای پسزمینه ای رو زیر نظر داشته باشه.
احتمال زیادی هست که این فرم از AJAX استفاده کنه. میتونی از هوش مصنوعی یا افزونه های مثل whatruns در مرورگر کروم استفاده کنی تا این قضیه مشخص بشه. یا از دولوپر بپرسی.
بعد از مطمین شدن از این قضیه از این ایونت لیسنر استفاده کن:
ajax form event listener.txt
یه تگ Custom HTML رو ست کن که تو همه صفحات اجرا بشه.
حالا، بیایم چک کنیم فرم با AJAX ساخته شده یا نه:
حالت Preview و Debug رو فعال کن (یا رفرش کن).
فرم رو تو وبسایتت سابمیت کن (بدون خطا).
ایونت "ajaxComplete" تو کنسول Preview و Debug ظاهر شد؟
اگه آره، فرم از AJAX استفاده میکنه. ولی اگه نه، به عنوان بعدی این پست وبلاگی برو.
اگه جواب سؤالم آره بود، بیا ببینیم با این فرم AJAX چی میتونیم بکنیم. تو حالت Preview و Debug، روی ایونت "ajaxComplete" کلیک کن، بعد API call رو باز کن:
چیزی که میبینی برات سخت و مبهم به نظر میاد اگه دولوپر نیستی، درسته؟ ولی راحتتر از چیزیه که فکر میکنی.
این دادهها بعد از ارسال موفق فرم به dataLayer ارسال شدن. هر خط یه دیتاپوینت جدا از dataLayer هست که میتونی بهعنوان یه وریبل dataLayer تو GTM ازش استفاده کنی.
حالا باید دنبال چیزی بگردی که سابمیت های موفق فرم رو شناسایی کنه. اسکرول کن به پایین و دنبال "response" بگرد.
بیایم دقیقتر نگاه کنیم. میتونی پیام "Thanks for contacting us! We will be in touch with you shortly" رو ببینی؟ بله! میتونیم ازش بهعنوان تریگر استفاده کنیم.
اول، بیایم تو Google Tag Manager یه وریبل Data Layer بسازیم.
به Variables برو
در لیست user-defined variables اسکرول کن و New رو بزن
تنظیمات وریبل رو انتخاب کن و نوع وریبل - Data Layer Variable رو انتخاب کن
نام وریبل Data Layer - attributes.response.data.message رو وارد کن
احتمالاً حدس میزنی چرا "attributes.response.data.message" رو بهعنوان نام وریبل Data Layer وارد کردم، بهجای فقط "response".شما با یه ساختار درختی مواجهی.
تو خط ۲، ایونتی با نام "ajaxComplete" میبینی - همون نامی که تو سمت چپ کنسول Preview و Debug ظاهر میشه. بعد، attributes رو میبینیم، که یه آبجکت شامل دیتاپوینتای مختلف (جفتهای کلید-ولیو) هست. و response یکی از اون کلیدهاست. تو اون response (۲) ما data (۳) رو میبینیم، و تو اون دیتا، message (۴) رو میبینیم.
این مثل دسترسی به فولدرهای لپتاپت هست. اول باید به attributes دسترسی پیدا کنی، بعد به response بری، بعد به پوشه data، و بعد به message دسترسی پیدا کنی.
مهم: ممکنه واسه تو، ساختار داده متفاوت باشه و پارامترها ممکنه اسمهای دیگهای داشته باشن. همیشه با "attributes.response" شروع میشه، ولی بعد از اون، ممکنه تو هر فرم فرق کنه. ممکنه "attributes.response.message" باشه یا چیزی شبیه اون.
مثال دیگه: فرض کن به داده های سرور (از همون پاسخ AJAX بالا) توجه داری. تو این حالت، نام وریبل Data Layer باید "attributes.headers.Server" باشه.بعد از اینکه وریبل Data Layer رو تو Google Tag Manager ساختیم، بیایم دیباگ کنیم. حالت Preview و Debug رو رفرش کن (با زدن دکمه Preview تو رابط GTM).
خوب برگردیم به مثال اول. نوبت تست رسیده:
فرم رو پر کن و سابمیت رو بزن. روی ایونت "ajaxComplete" آخری تو کنسول Preview و Debug کلیک کن، بعد به تب Variables برو و وریبل جدید "dlv – attributes.response.data.message" رو پیدا کن. اگه همهچیز رو درست انجام دادی، باید اینجوری به نظر بیاد:
این پیام نشون میده که فرم با موفقیت ارسالشده. اگه مقدار اون وریبل undefined باشه، باید دنبال اشتباهت بگردی. شایعترینهاش املای غلط اسم وریبل یا مسیر وریبل اشتباهه. بعضیها فقط از "response" بهجای "attributes.response.data.message" استفاده میکنن.
حالا بیا تریگری بسازیم که وقتی ایونت "ajaxComplete" پوش شد و وریبل Data Layer جدیدمون شامل "Thanks for contacting us" بود فایر بشه.
از منوی GTM به Triggers برو و New رو بزن
نوع تریگر - Custom Event باید باشه.
نام ایونت - "ajaxComplete" رو وارد کن
این تریگر باید تو Some Custom Events اجرا بشه.
شرطی که تریگر اجرا بشه رو تعریف کن - "dlv – attributes.response.data.message contains Thanks for contacting us!"
بیا تست کنیم
این تریگر جدید رو به تگ ایونت Google Analytics 4 که تو شروع این پست وبلاگی ساختی وصل کن.
حالت Preview و Debug رو باز کن (یا رفرش کن)
بعد، فرم AJAX رو پر کن و ارسال کن. بعد از ارسال موفق، تگ ایونت Google Analytics 4 باید اجرا بشه (تو حالت Preview و Debug نمایش داده میشه. باید Debug View گوگل آنالیتیکس ۴ رو هم چک کنی).
چیزایی که موقع ترکینگ فرمهای AJAX باید به خاطر داشته باشی:
پاسخ فرم برای تو ممکنه متفاوت باشه، پس باید وریبل Data Layer و تریگر Custom Eventت رو طیق اون تنظیم کنی.
اگه دولوپرها دیتای پاسخ رو تغییر بدن، تریگرت خراب میشه. توسعهدهندهها رو از پیادهسازی GTMت مطلع کن.
اگه صفحه بیشتر از یه فرم AJAX داره، تو Data Layer دنبال اطلاعات بیشتری بگرد که به Google Tag Manager کمک کنه بین اون فرمها فرق بذاره.
روش #۴. ترکینگ ارسال فرم با تریگرElement Visibility
یکی از فوقالعادهترین تریگرها تو GTM (از نظر من) تریگر Element Visibility هست. این بهت اجازه میده وقتی یه المان خاص(مثل یه بنر) تو صفحه ظاهر میشه (به خاطر اسکرول یا شرایط دیگه) بتونی اون رو ترکینگ کنی.
همین تکنیک میتونه برای فرمها -وقتی پیامی (مثلاً "thank you") بعد از ارسال موفق فرم ظاهر میشه- اعمال بشه.
اولین چیزی که اینجا نیاز هست انجام بدیم، بررسی پیام سابمیت موفق فرم هست. باید راهی پیدا کنیم که به Google Tag Manager بگیم کدوم المان وبسایت برامون مهمه.
بعد از ارسال موفق فرم، روی پیام ارسال موفق راستکلیک کن و "Inspect Element" رو انتخاب کن.
بعد developer tools مرورگر رو باز میشه که اطلاعات مختلفی درباره پیام بهت میده: محتوایش، کلاس CSS و غیره.
تو این مثال خاص، میبینم پیام کلاسی به اسم "thanks" داره که میتونه بهعنوان شرط تو تریگر دیداری المان استفاده بشه. بهتر بود که پیام موفقیت پارامتر "id" میداشت، ولی چون نداره، از CSS class استفاده میکنیم.
نکته: اگه پیامی که نشون داده میشه زود غیب میشه اینکار رو بکن:
_جلوگیری از محو شدن (سریع): تو Developer Tools، تب "Elements" رو نگاه کن. اگه پیام غیبش میزنه، قبل از اون کلید F8 (Pause) رو بزن تا اجرای اسکریپت متوقف بشه
تو مرحله بعد به کانتینر Google Tag Managerت برو و از بخش Triggers یه تریگر جدید بساز و نوعش رو Element Visibility انتخاب کن. مؤلفه کلیدی اینجا روش انتخاب المان هست که به GTM کمک میکنه بفهمه دنبال چی هستیم.
فیلد Selection Method دو گزینه داره: Element ID و CSS Selector. چون پیام موفقیت تو مثال من "id" نداره (ولی "class" داره)، با CSS Selector میریم.
تو فیلد Element Selector، باید کلاس "thanks" رو پیست کنیم. تو CSS، هر کلاس با نقطه قبلش تعریف میشه، پس همون کارو میکنیم.
نهایتاً مطمئن شو که "Observe DOM changes" رو تیک بزن. این تنظیم یعنی اگه المانی به خاطر اسکرول تو صفحه ظاهر نشه GTM همچنان اون رو میگیره (احتمالاً).
به شات پایین نگاه کن. اگه میخوای، میتونی تنظیمات دیگهای اضافه بکنی ولی حداقل کار رو انجام دادم.
تریگر رو ذخیره کن.
بیا تست کنیم
این تریگر جدید رو به تگ Google Analytics که تو شروع این پست وبلاگی ساختی وصل کن.
حالت Preview و Debug رو باز کن (یا رفرش کن)
بعد فرم رو پر کن و ارسال کن. بعد از ارسال موفق، تو کنسول P&D ایونت Element Visibility رو میبینی. روش کلیک کن و میبینی تگ GA4 اجرا شده. اگه ایونت Element Visibility رو نمیبینی، احتمالاً اشتباهی تو تریگر (روش انتخاب یا مقدار فیلد CSS selector) داشتی. یا چکباکس Observe DOM changes رو فعال نکردی. یا فرم تو iFrame هست.
روش #۵. خودت یه ایونت لیسنر خودکار برای فرم بنویس
بله، میدونم که این پیچیده به نظر میاد ولی اصلاً اینطور نیس.
اگه هیچ روش ترکینگ دیگه ای (که بالا توضیح دادم) کار نکرد، چیزی برای از دست دادن نداری.میخوام چی بگم:
یه شانس کم داری که مستقل (بدون مهارتهای کدنویسی قوی) یه ایونت لیسنر خودکار بنویسی. و اینو تو پست وبلاگی مربوط به ترکینگ فرم Gravity توضیح دادم.
روش #۶. ترکینگ فرم با ایونتهای dataLayer
اخطار: هرچند این روش ترکینگ فرم یه راهحل نسبتا بی نقصه، بهعنوان گزینه شماره ۶ تو این لیست قرارش دادم به این دلیل.
وقتی بقیه مارکترها برای فرم ترکینگ ازم مشاوره میخوان، دنبال راهحلی هستن که دخالت دولوپر رو کم کنه. "مدیریت تگهای مارکتینگی بدون کمک دولوپر" یکی از دلایل اصلیه که Google Tag Manager رو به کار میگیرن.
یادت باشه درگیر کردن دولوپر به معنای شکست نیست. در واقع، توصیهشدهترین و قابلاعتمادترین راه برای مطمئن شدن از دقت و پایداری ترکینگ تو درازمدت همینه. در حالی که روشهای دیگه این بلاگ پست میتونه تو رو خیلی جلو ببره، یه ایونت کاستوم پوش شده از دیتالیر مثل گرفتن داده مستقیم از منبعه. احتمال خراب شدنش موقع بهروزرسانی وبسایت کمتره و تمیزترین سیگنال ممکن رو از سابمیت موفق فرم میده.
نظر من چیه:
اگه به دولوپرها دسترسی داری و ایونت لیسنر ها برات کار نمیکنن، استفاده از روش dataLayer.push رو توصیه میکنم.
اگه به دولوپرها دسترسی نداری یا خیلی مشغولن (که معمولاً هستن)، اشکالی نداره با تکنیکهای دیگه که تو این پست وبلاگی توضیح دادم ترکینگ کنی. فقط بدون که راهحلهای دیگه با احتمال بیشتری خراب میشن بخصوص موقع آپدیت های مداوم وبسایت توسط دولوپرها. این بهخصوص برای تکنیک DOM scraping صدق میکنه.
امیدوارم نظرم رو واضح گفته باشم و بتونیم ادامه بدیم.
در کل اگه راه حل های بالا کار نکنه، بهترین گزینه بعدی اینه که از دولوپر بخوای یه کاستوم dataLayer.push رو توی تابع callback که موقع ارسال موفق فرم فعال میشه پیادهسازی کنه. اسکریپتش میتونه چیزی مثل این باشهباید یه تسک کوتاه ولی واضح برای دولوپر آماده کنی:
اول، یه اسم برای ایونت انتخاب کن. تو شات بالا، من "formSubmission" رو انتخاب کردم.
بعد، فکر کن ممکنه به داده اضافی نیاز داشته باشی. اون دیتاپوینت ها رو هم بنویس و سعی کن دستهبندیشون کنی.
فرض کن چندتا فرم داریم - "Contact us" و "Newsletter Subscription". پس تصمیم گرفتم وریبل dataLayer "formType" رو هم داشته باشم.
یه پارامتر مفید دیگه (از نظر من) موقعیت فرم هست چون بعضی فرمها تو فوتر و بعضیها تو سایدبار وبسایتن. چرا اینم یه وریبل dataLayer نباشه؟
اگه دولوپر با مفهوم دیتالیرپوش آشنا نباشه، میتونی از منابع موجود در وب استفاده کنی.
ولی یادت باشه تأکید کنی که دولوپر باید مقادیر پارامترهایی مثل "formType" و "formPosition" رو به صورت داینامیک پر کنه. اگه فرم X ارسال بشه، دادههای اون فرم X باید به Data Layer ارسال بشه. کار دولوپر اینه که کدی بنویسه که مقادیر واقعی رو ارسال کنه.
تموم! بعد از اینکه توسعهدهنده dataLayer.push رو تو همه فرمها پیادهسازی کرد، باید تستش کنی:
حالت Preview و Debug رو باز کن.
فرم رو پر و ارسال کن:
حداقل یه فیلد الزامی رو خالی بذار. تو این حالت، ایونت dataLayer نباید ارسال بشه.
حالا همه فیلدها رو پر کن و دوباره ارسال کن. ایونت تو کنسول Preview و Debug ظاهر شد؟ باید اینجوری به نظر بیاد:
چک کن که همه دادهها درست به dataLayer ارسال شده باشن. روی ایونت "formSubmission" کلیک کن و بعد API call رو از باز کن. دادهها باید اینجوری به نظر بیاد:
وریبل ها و تریگرها رو تو GTM ست کن. تو مثال dataLayer.push من، دو دیتاپوینت هست که میخوام بهعنوان وریبل ازشون استفاده کنم - "formType" و "formPosition" (میخوام اونا رو تو تگ ایونت GA4م بگنجونم)، پس باید با ساخت وریبلهای Data Layer توی GTM اونا رو اضافه کنم.
وریبل اول:
عنوان: dlv – formType
نوع وریبل: Data Layer Variable
نام وریبل Data Layer: formType
همه تنظیمات دیگه رو همونجوری بذار
وریبل دوم:
عنوان: dlv – formPosition
نوع وریبل: Data Layer Variable
نام وریبل Data Layer: formPosition
همه تنظیمات دیگه رو همونجوری بذار
حالا بیایم تریگر بسازیم. به Triggers برو و New رو بزن. این تنظیمات رو وارد کن:
نوع تریگر: Custom event
نام ایونت: formSubmission (ممکنه بسته به موقعیتت فرق کنه. فقط مطمئن شو تو و دولوپر از یه نام استفاده میکنین).
این تریگر تو: All custom events اجرا باید بشه. این یعنی همه ایونتهای "formSubmission" ترکینگ میشن.
تغییر تگ ایونت GA4
چون دو وریبل Data Layer ساختم ("formType" و "formPosition")، میتونم اونا رو تو تگ ایونت GA4م استفاده کنم. یه نکته: هیچ الزام سختگیرانهای برای نامگذاری اون پارامترها نیست.
تصمیم گرفتم از اسم پارامتری "form_type" و "form_position" استفاده کنم. مقادیرشون همون دو وریبل Data Layer هستن که تازه ساختم.
تگ رو ذخیره کن.
بیا تست کنیم + دایمنشنهای کاستوم GA4
حالت Preview و Debug رو باز کن (یا رفرش کن)
بعد فرم رو پر کن و ارسال کن. بعد از ارسال موفق، تگ Google Analytics باید اجرا بشه (تو حالت Preview و Debug نمایش داده میشه).
باید ایونتهای ورودی رو تو Debug View گوگل آنالیتیکس ۴ چک کنی.
"form_position" و "form_type" رو بهعنوان دایمنشنهای کاستوم تو GA4 رجیستر کن (اگه قصد داری تو گزارشها ازشون استفاده کنی).
روش #۷. ترکینگ ارسال فرم با DOM Scraping
این روش نباید اولین گزینهت باشه. قبل از ادامه این فصل، همه روشهای دیگه ترکینگ فرم با GTM (که تو این پست وبلاگی توضیح داده شده) رو امتحان کن.
اگه توسعهدهندهها مکررا سورس کد وبسایت رو بهروزرسانی میکنن، DOM scraping رو بهعنوان آخرین راهحل در نظر بگیر. ریسک بالایی داره و ممکنه سریعتر از چیزی که فکر میکنی از کار بیفته.
حتی یه تغییر کوچیک توسط دولوپر میتونه پیادهسازیت رو خراب کنه. علاوه بر این، نیاز به مهارت کار با JavaScript و آشنایی با مفاهیم DOM داری (که مهارتی رایج بین بازاریابها نیست).
تو این مثال، از وریبل DOM Element استفاده میکنیم. این وریبل تو GTM بهت اجازه میده محتوا رو مستقیم از Document Object Model بخونی (به عبارت دیگه، با کمکش میتونی هر متنی تو وبسایتت رو به یه وریبل تبدیل کنی و به ابزارهای مارکتینگی (مثلاً گوگل آنالیتیکس) پاس بدی).
تو این مثال، از یه فروشگاه دموی Shopify استفاده میکنم. فرمی برای "Signup up to our mailing list" تو پایین صفحه اصلی سایت هست.
ایمیل example@example.com رو تو اون فرم Shopify وارد کن و Subscribe رو بزن. صفحه رفرش میشه، آدرس وب به https://somewebsite.com/?customer_posted=true#contact_form تغییر میکنه و اون فرم کوچیک پیام "Thank you" رو نمایش میده.
تو این حالت، میتونستیم بهراحتی ارسال فرمها رو با تریگر Pageview صفحه "thankyou" ترکینگ کنیم، ولی فرض کنیم آدرس صفحه (URL) تغییر نکرده. این موقعیت رایج نیست، ولی ممکنه پیش بیاد. اینجا وریبل DOM Element میتونه مفید باشه. میتونیم تریگری بسازیم که وبسایت رو اسکن کنه و دنبال پیام موفقیت "Thanks for subscribing" بگرده.
اول، بیا یه وریبل DOM Element رو بسازیم که دنبال اون پیام موفقیت خاص بگرده. نشانگر ماوس رو روی متن پیام موفقیت نگه دار، راستکلیک کن و "Inspect" رو انتخاب کن.
کنسول دولوپر با کلی کد HTML ظاهر میشه. توجه کن که کد پیام موفقیت تو اون کنسول انتخاب شده. اون پیام هیچ "id" یونیکی نداره، پس باید از CSS selector استفاده کنیم.
تو پایین تصویر، خطی از CSS selector ها مثل div.note.form-success میبینی. این سلکتورها میتونن به ما کمک کنن دقیقا این المان از وبسایت رو شناسایی کنیم.
بیایم وریبل المان DOM بسازیم و سعی کنیم متن "Thanks for subscribing" رو باهاش تارگت کنیم.
اول به Variables برو
از لیست user defined variablesگزینه New رو بزن
نوع وریبل - DOM Element Variable رو انتخاب کن
روش انتخاب - CSS selector
تو فیلد Element selector، باید "div.note.form-success" رو وارد کنی
دیدی چی کار کردم؟ آخرین CSS Selector از شات بالا رو وارد کردم.
اگه بیشتر از یه پیام موفقیت تو وبسایت با CSS Selector مشابه وجود داشت، از انتخابگر CSS طولانیتر مثل "#contact_form div div.note.form-success" (بدون نقلقول) استفاده میکردم که دقیقا اون پیام ارسال موفق مدنظرم تارگت بشه.
attribute name رو خالی بذار.
تایتل وریبل میتونه "DOM – Form Success Message" باشه.
Save رو بزن.
بیا تست کنیم
حالت Preview و Debug رو فعال کن. فرم رو ارسال کن. ایونت DOM Ready (نه Container Loaded) رو تو کنسول Preview و Debug انتخاب کن و Variables رو بزن.
اگه مقدار وریبل "DOM – Form Success Message" معادل "Thanks for subscribing" باشه، کار خوبی کردی.
خب! باید تریگری بسازیم که به وریبل DOM جدیدمون وابسته باشه.
به Triggers برو و New رو بزن
نوع تریگر - DOM Ready رو انتخاب کن
این تریگر تو Some Pages اجرا بشه
این شرط رو وارد کن: "DOM – Form Success Message equals Thanks for subscribing". این یعنی تریگر فقط تو صفحاتی اجرا بشه که پیام موفقیت فرم به بازدیدکنندهها نمایش داده میشه.
تریگر رو ذخیره کن
فراموش نکن تست کنی:
این تریگر جدید رو به تگ ایونت Google Analytics 4 که تو شروع این پست وبلاگی ساختی لینک بده.
حالت Preview و Debug رو باز کن (یا رفرش کن)
فرم رو پر کن و ارسال کن. بعد از ارسال موفق، تگ Google Analytics باید اجرا بشه (تو حالت Preview و Debug نمایش داده میشه).
باید ایونتهای ورودی رو تو Debug View گوگل آنالیتیکس ۴ هم چک کنی.
علاوه بر این برای اطمینان بیشتر، فرم رو با خطای عمدی ارسال کن و ببین تگ فایر میشه یا نه (نباید فایر بشه).
نکات آخر
تو این پست وبلاگی، روش های مختلف فرم ترکینگ با GTM رو توضیح دادم. این یه مسیر پرهیجان بود، ولی امیدوارم برات مفید بوده باشه. حالا باید بتونی بدون دخالت دولوپر، فرمهای بیشتری رو ترکینگ کنی.
یادت باشه - اشکالی نداره از کمک دولوپر استفاده کنی. همیشه استفاده از روش dataLayer.push رو به DOM scraping ترجیح بده. راهحلهای قابل اتکاتر باید اولویتت باشن.
چیزی تو این پست جا انداختم؟ کامنت بذار.
دیدگاه خود را بنویسید