7 روش رهگیری فرم با تگ منیجر و GA4 برای رسیدن به هدف

7 روش رهگیری فرم با تگ منیجر و GA4 برای رسیدن به هدف

رهگیری فرم با تگ منیجر و GA4 یکی از روش‌های رهگیری متداول در دنیای اینترنت است. شما می‌توانید برای ارزیابی عملکرد کمپین‌های مختلف خودتون از جمله کمپین‌های تبلیغات در گوگل از این روش استفاده کنید. در این مقاله از سری مقاله‌های وبسایت وی دیجیتال مارکتینگ به شما 7 راه رسیدن به هدف در رهگیری فرم‌ها را آموزش می‌دهیم. برخی بخش‌های این مقاله به صورت برنامه‌نویسی ارائه شده است و شما باید دانشی در زمینه کدهای برنامه‌نویسی و ساختار وب‌سایت‌ها داشته باشید.

رهگیری فرم با تگ منیجر و GA4

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

 چرا باید از رهگیری فرم با تگ منیجر و GA4 استفاده کنیم؟

به عنوان یک متخصص در زمینه طراحی وب ممکن است که با بازاریابان صحبت‌هایی داشته باشید.  یکی از محبوب‌ترین موضوعات در بین بازاریابی‌ها  رهگیری فرم‌ها در وب‌سایت‌ها است. متأسفانه، در برخی موارد، رهگیری فرم ممکن است برای طراح سایت به دردسر واقعی تبدیل شود (مخصوصاً اگر یک بازاریاب هیچ آشنایی با CSS یا HTML نداشته باشد)؛ اما جای نگرانی نیست. در این مقاله در خصوص رهگیری فرم با تگ منیجر و GA4 و  راه رسیدن به هدف با استفاده از گوگل تگ منیجر به شما آموزش‌هایی ارائه می‌شود. این مقاله کمک زیادی به شما در رهگیری فرم با تگ منیجر و GA4 و استفاده از گوگل تگ منیجر خواهد کرد.

 رهگیری فرم با تگ منیجر و GA4 و استفاده از گوگل تگ منیجر

از آنجایی که شما به دنبال رهگیری فرم با تگ منیجر و GA4 هستید، احتمالاً به متغیرهای ارسال فرم و متغیرهای داخلی در Google Tag Manager توجه کرده‌اید. در نتیجه حداقل یک راه‌انداز ارسال فرم در یک صفحه فعال را باید داشته باشید (که به همه فرم‌های ارسالی گوش می‌دهد) و شنونده رویداد خودکار Google Tag Manager Form را روشن می‌کنید.

گوگل تگ منیجر

استفاده از Tag + Trigger در رهگیری فرم با تگ منیجر و GA4

احتمالاً قبلاً با مفهوم اصلی Google Tag Manager آشنا هستید. هر تعاملی که می‌خواهید در رهگیری فرم با تگ منیجر و GA4 استفاده کنید نیاز به یک برچسب یا همان تگ و یک محرک یا همان تریگر دارد. اگر می‌خواهید همه فرم‌های ارسالی را با رهگیری فرم با تگ منیجر و GA4 رهگیری کنید، باید یک برچسب Google Analytics و یک Trigger (قانون) در زمانی که یک برچسب باید فعال شود ایجاد کنید. ایجاد یک برچسب بخش آسان این فرآیند است.

حتما بخوانید: رصد کلیک دکمه های وب سایت با کمک تگ منیجر

ایجاد برچسب در گوگل تگ منیجر برای استفاده در رهگیری فرم با تگ منیجر و GA4

در این جا ما فرض می‌کنیم که شما قبلاً Google Analytics 4 را نصب کرده‌اید و قبلاً برچسب پیکربندی GA4 را دارید. بعد از اینکه یک تگ پیکربندی GA4 در ظرف GTM خود داشتید، وقت آن است که یک برچسب رویداد GA4 برای رهگیری فرم با تگ منیجر و GA4 ایجاد کنید که در این مقاله از این برچسب به دفعات استفاده می‌شود.

برای اینکار مراحل زیر را انجام دهید

  • به برچسب‌ها (tag) بروید
  • دکمه New را فشار دهید
  • در پیکربندی برچسب، Google Analytics: GA4 Event را انتخاب کنید
  • در قسمت Configuration Tag، تگ پیکربندی GA4 فعلی خود را انتخاب کنید. تگ رویدادی که در حال ایجاد آن هستیم، از برخی تنظیمات تگ پیکربندی مجدد استفاده می‌کند (مانند شناسه اندازه‌گیری)
  • در قسمت Event Name ما generative_lead را وارد می‌کنیم
  • قسمت Triggering را خالی بگذارید (فعلاً) و روی Save کلیک کنید. بعداً به آن باز خواهیم گشت 80٪ از این پست وبلاگ به انواع مختلفی از محرک‌ها اختصاص داده شده است که می‌توانید از آن‌ها استفاده کنید. انتخاب نوع تریگر بستگی به روش توسعه یک فرم دارد.

تگ منیجیر 2

بررسی 7 راه رسیدن به هدف در رهگیری فرم با تگ منیجر و GA4

دلیل اینکه ما از gene_lead به عنوان نام رویداد استفاده کردیم این است که در لیست رویدادهای پیشنهادی GA4 قرار دارد؛ اما اگر بخواهید می‌توانید نام دیگری را بر آن بگذارید.

هر روش رهگیری فرم با تگ منیجر و GA4  که می‌خواهیم پوشش دهیم به عناصر/ رویدادهای مختلفی بستگی دارد که پس از ارسال فرم در یک وب‌سایت رخ می‌دهد.

این عناصر / رویدادها عبارت‌اند از:

  • فرم شنونده رویداد خودکار
  • صفحه تشکر
  • رهگیری فرم AJAX
  • رهگیری با تریگر Element Visibility
  • نوشتن شنونده رویداد خودکار فرم خود را
  • کمک توسعه‌دهنده (برای درخواست push)
  • DOM scraping

 

نکته مهم: یک راه‌اندازی گوگل تگ منیجر با پیکربندی نادرست منجر به داده‌ها و گزارش‌های نادرست می‌شود. پس همه بخش‌های این مقاله را با دقت بخوانید.

قبل از اینکه ادامه دهیم باید به موارد زیر توجه کنیم:

قبل از اینکه به  صورت عمیق به راهنمای رهگیری فرم با تگ منیجر و GA4 بپردازیم، موردی  وجود دارد که باید بدانید. این راهنما به صورت کلی و بر اساس استاندارد جهانی در رهگیری فرم با تگ منیجر و GA4 است. در نتیجه  احتمالاً حدود 95٪ موارد رهگیری فرم را که شما باید با آن‌ها برخورد داشته باشید، پوشش می‌دهد. در نتیجه جای نگرانی نیست می‌توانید از این مقاله برای رهگیری فرم با تگ منیجر و GA4  در سایت خود استفاده کنید.

حتما بخوانید:

کدام روش رهگیری فرم با تگ منیجر و GA4 را باید انتخاب کنید؟

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

در این جا ما به شما 7 راه رسیدن به هدف و رهگیری فرم با تگ منیجر و GA4 را آموزش می‌دهیم. هرکدام از این راه‌ها می‌تواند برای شما مؤثر باشد. انتخاب آن‌ها بر عهده خودتان است.

7 راه رسیدن به هدف در گوگل تگ منیجر

 روش شماره 1 در رهگیری فرم با تگ منیجر و GA4 و استفاده از راه‌انداز ارسال فرم مدیریت برچسب گوگل

در زیر متغیرهای داخلی، روی پیکربندی کلیک کنید و در نوار کناری سمت راست همه متغیرهای فرم را فعال کنید (همه تغییرات به طور خودکار ذخیره می‌شوند).

تگ منیجر 3

سپس فهرستی از همه محرک‌های خود را باز کنید (با کلیک روی Triggers در نوار کناری سمت چپ رابط GTM). یک تریگر جدید با تنظیمات زیر ایجاد کنید:

گوگل تگ منیجر 5

پس از بررسی این مورد، اگر از عملکرد پیش‌فرض فرم (ارسال و تغییر مسیر) جلوگیری شود، Google Tag Manager Trigger را فعال نمی‌کند. در نتیجه اگر این بخش را اگر علامت نگذارید، هر زمان که یک رویداد ارسال ثبت شود، تریگر خاموش می‌شود (حتی زمانی که فرمی با خطا ارسال می‌شود (به عنوان مثال چندین فیلد ضروری خالی گذاشته می‌شوند)).

هنگامی که این چک باکس فعال است، یک فیلد اضافی “Enable this trigger when…” ظاهر می‌شود. در این آموزش ما می‌خواهم این تریگر در تمام صفحات فعال باشد، به همین دلیل است که مسیر Page شامل / را وارد کردم. چرا باید این مسیر را وارد کنیم؟ زیرا Page Path همیشه دارای حداقل یک اسلش در هر صفحه خواهد بود.

در پایان در گوشه سمت راست بالای حساب Google Tag Manager خود، روی Preview کلیک کنید.

گوگل آنالیتیکس

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

گوگل آنالیتیک

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

گوگل تگ منیجر 31

حال مراحل زیر را به‌دقت انجام دهید:

  • دکمه ارسال را بزنید. آیا رویداد ارسال فرم در کنسول پیش‌نمایش و اشکال‌زدایی ظاهر شد؟ اگر نه شنونده رویداد خودکار فرم GTM با این فرم کار نمی‌کند و باید به گزینه رهگیری فرم بعدی که در این پست وبلاگ توضیح داده شده است بروید.تگ منیجر 20
  • اگر رویداد Form Submit در کنسول Preview و Debug ظاهر شد، باید آزمایش دیگری انجام دهید – سعی کنید حداقل یک قسمت فرم مورد نیاز را خالی بگذارید و دوباره فرم را ارسال کنید. به این ترتیب شما یک خطا را در فرم خود تقلید خواهید کرد.

در نتیجه یکی از دو حالت زیر برای شما پیش می‌آید:

  1. اگر رویداد ارسال فرم یک‌بار دیگر فعال شد، باید سایر گزینه‌های رهگیری فرم ذکرشده در این پست وبلاگ را بررسی کنید.
  2. اگر رویداد ارسال فرم فعال نشد – عالی است! این بدان معناست که GTM فقط فرم‌های ارسالی را که با موفقیت تکمیل شده‌اند رهگیری می‌کند (و این دقیقاً همان چیزی است که شما نیاز دارید).

اگر شما در حال خواندن این بخش از مقاله رهگیری فرم با تگ منیجر و GA4 هستید، به این معنی است که راه‌انداز ارسال فرم همان‌طور که انتظار می‌رود کار می‌کند و رویداد را فقط زمانی در حالت پیش‌نمایش فعال می‌کند که یک فرم با موفقیت ارسال شود. حال که به این نتیجه رسیده‌ایم، بیایید یک تریگر به طور خاص برای آن فرم ایجاد کنیم. رویداد Form Submit را که قبلاً ذکر شد به خاطر دارید؟ روی آن کلیک کنید (در حالت پیش‌نمایش و اشکال‌زدایی)، سپس روی متغیرها کلیک کنید.

گوگل تگ منیجر 33

سپس به پایین بروید و شروع به جستجوی هر متغیر Form کنید که برای آن فرم منحصر به فرد است. معمولاً متغیر Form ID خواهد بود، در موارد دیگر – Form Classes (اما Form ID گزینه بهتری است). همان‌طور که در تصویر زیر می‌بینید، ما فرمی را ارسال کرده‌ایم که متغیر Form ID آن wpdevart-forms-7 است. این متغیر در سایت شما ممکن چیز دیگری باشد. پس با دقت به دنبال آن بگردید.

تگ منیجر 101

در ادامه مراحل زیر را دنبال کنید:

  • به Triggers بروید و محرک ارسال فرم را که قبلاً ایجاد کرده‌اید باز کنید
  • به جای « All Forms » گزینه « Some Forms » را انتخاب کنید و شرط را وارد کنید تا فقط آن فرم خاص را هدف قرار دهید. در این آموزش شناسه فرم ما برابر با wpdevarp-forms-7 است. ولی ممکن است در سایت شما چیز دیگری باشد.
  • اگر متغیر Form ID را نمی‌بینید – آن را در لیست متغیرهای داخلی تگ منیجر گوگل فعال کنید.
  • شناسه فرم در سایت شما احتمالاً متفاوت با شناسه‌ای باشد که در این آموزش نشان داده شده و این به دلیل ماهیت سایت شما است
  • گوگل تگ منیجر 11
  • در پایان باید تریگر را ذخیره کنید.

در GTM، به Tags بروید و تگ رویداد GA4 را که ایجاد کرده‌اید ویرایش کنید. هیچ الزام دقیقی در مورد نحوه نامگذاری آن پارامتر در گوگل تگ منیجر وجود ندارد، بنابراین نام آن را form_id یا هر چیزی که دوست دارید بگذارید؛ و مقدار آن مقدار متغیر {{ Form ID }} خواهد بود.

تگ منیجر 12

در پایان برچسب را ذخیره کنید.

حال بهتر است که Dimension Custom را در GA4 به صورت Test + Register آزمایش کنیم.

  • این تریگر جدید را به برچسب رویداد Google Analytics 4 که در ابتدای این مقاله ایجاد کردید اختصاص دهید.
  • یک حالت پیش‌نمایش و اشکال‌زدایی را بازخوانی کنید (با یک‌بار دیگر کلیک کردن روی دکمه پیش‌نمایش در رابط GTM)
  • سپس فرم را پر کرده و ارسال کنید. اگر تگ گوگل آنالیتیکس فعال شود، این خبر خوبی است! همچنین (در صورت امکان)، سعی کنید فرم دیگری را در وب‌سایت خود ارسال کنید: در صورت ارسال موفقیت‌آمیز، یک برچسب GA نباید فعال شود.
  • همچنین باید رویدادهای دریافتی را در Google Analytics 4 Debug View بررسی کنید.
  • اگر قصد دارید از form_id (برخی پارامترهای سفارشی دیگر در گزارش‌های رهگیری فرم با تگ منیجر و GA4) استفاده کنید، باید آن‌ها را به عنوان ابعاد سفارشی ثبت کنید.

روش شماره 2. در رهگیری فرم با تگ منیجر و GA4 و استفاده از رهگیری صفحه “ thankyou ” با Google Tag Manager

 برای اینکار باید مراحل زیر را به‌دقت دنبال کنید:

  • اگر شنونده فرم استاندارد در Google Tag Manager کار نمی‌کند، باید بررسی کنید که آیا آن فرم کاربر را پس از ارسال موفقیت‌آمیز به صفحه دیگری هدایت می‌کند یا خیر. باید شبیه به عکس زیر باشد:
  • تگ منیجر 14
  • اگر بله به چه URL (آدرس وب) هدایت می‌شود؟ آیا آن آدرس منحصر به فرد است؟ آیا کاربران می‌توانند بدون ارسال فرم به آن صفحه بروند؟
  • اگر پاسخ آخرین سؤال منفی است، می‌توانید یک تریگر مشاهده صفحه‌ایجاد کنید که فقط در آن صفحه موفقیت‌آمیز فعال شود. هدف شما در اینجا این است که تا حد امکان از بازدیدهای تصادفی از موفقیت (با نام مستعار صفحه “متشکرم”) جلوگیری کنید.

 حال مراحل زیر را دنبال کنید:

  • در Google Tag Manager به Triggers بروید
  • دکمه New را فشار دهید
  • نوع تریگر را انتخاب کنید – نمایش صفحه و برخی از نمایش‌های صفحه
  • اگر بازدیدکننده به https://www.example.com/form/thankyou.html هدایت شود، می‌توانید یکی از قوانین زیر را برای این تریگر تنظیم کنید:
  1. مسیر صفحه برابر با /form/thankyou.html است.
  2. یا آدرس صفحه حاوی /form/thankyou.html است. سعی کنید تا حد امکان خاص باشید. تنظیم فقط «متشکرم» به‌عنوان قانون برای این راه‌انداز ممکن است بهترین ایده نباشد، زیرا ممکن است صفحات دیگری وجود داشته باشند که URL‌های آن‌ها می‌توانند حاوی آن کلمه باشند و ما آن را نمی‌خواهیم! پس بهتر است که کمی خلاق باشید.
  • فراموش نکنید که تریگر را به درستی نامگذاری کنید، به عنوان مثال. ” Pageview – Successful Form Submission ” می‌توانید قرار دهید. در حالت کلی یک عنوان باید واضح باشد، در غیر این صورت، در حساب Google Tag Manager خود (در دراز مدت) دچار آشفتگی خواهید شد. در صورتی که به درستی این مراحل را طی کنید تصویر باید به شما نمایش داده شود.

تگ منیجر 15

 

در ادامه برای تست مراحل زیر را دنبال کنید:

  • این تریگر جدید را به تگ Google Analytics 4 که در ابتدای این پست وبلاگ ایجاد کردید، اختصاص دهید.
  • یک حالت پیش‌نمایش و اشکال‌زدایی را باز کنید (بازخوانی کنید)، یک صفحه وب را با فرمی که می‌خواهید رهگیری کنید، بازخوانی کنید.
  • سپس فرم را پر کرده و ارسال کنید. پس از ارسال موفقیت‌آمیز، به صفحه “متشکرم” هدایت می‌شوید – اگر برچسب Google Analytics فعال شود، کار خوبی است! همچنین (در صورت امکان)، فرم دیگری را در وب‌سایت خود ارسال کنید (برای اینکه ببینید آیا برچسب به صورت تصادفی ارسال نمی‌شود).
  • همچنین باید Google Analytics 4 Debug View را بررسی کنید.
  • اگر چندین فرم دارید و همه آن‌ها صفحات تشکر متفاوتی دارند، نیازی به تنظیم هیچ پارامتر سفارشی برای تگ رویداد GA4 ندارید. GA4 قبلاً به طور خودکار page_location را رهگیری می‌کند و می‌توانید فرم‌های ارسالی را با ابعادی مانند Page Path تشخیص دهید.
  • از طرف دیگر، اگر چندین فرم و یک صفحه “متشکرم” دارید، باید این کار را انجام دهید:
  1. همه این نکات را بررسی کنید و ببینید آیا می‌توانید متغیری را دریافت کنید که حاوی شناسه فرم (مانند شناسه فرم، نام فرم و غیره) باشد و از آن در مورد بعدی لیست استفاده کنید.
  2. سپس یک پارامتر اضافی را در تگ رویداد GA4genere_lead قرار دهید. می‌تواند چیزی مانند form_id، form_name یا هر چیزی که برای شما کار می‌کند، به عنوان مثال به تصویر زیر دقت کنید:

تگ منیجر 16

روش شماره 3 در رهگیری فرم با تگ منیجر و GA4 و استفاده از رهگیری فرم‌های ارسالی AJAX با Google Tag Manager

اگر در حال خواندن این بخش از مقاله رهگیری فرم با تگ منیجر و GA4 هستید، احتمالاً فرم شما رویدادهای ارسال فرم معتبری را ارسال نمی‌کند و کاربران را به صفحه «متشکرم» هدایت نمی‌کند. احتمالاً فقط خود را رفرش می‌کند و سپس پیام “شما با موفقیت فرم را پر کرده‌اید” را بدون رفرش واقعی صفحه نمایش می‌دهد.

احتمال زیادی وجود دارد که این فرم از AJAX استفاده کند. پیشنهاد می‌کنیم از تمام جزئیات فنی در اینجا صرف نظر کنید. تنها چیزی که در اینجا باید بدانید شنونده AJAX است.

Bounteous (یک کمپانی پیشرو در زمینه تکنولوژی و علوم IT) یک شنونده عالی AJAX برای GTM به اشتراک گذاشته است که همه می‌توانند به صورت رایگان از آن استفاده کنند. در اینجا ما کد آن‌ها را برای رهگیری فرم‌های ارسالی قرض می‌گیریم.

کد زیر را کپی کرده و در تگ HTML سفارشی در Google Tag Manager قرار دهید:

 

تگ منیجر 17

تگ منیجر 18

تگ منیجر 19

این تگ HTML سفارشی را طوری تنظیم کنید که در همه صفحات فعال شود.

تگ منیجر 20

اکنون، بیایید بررسی کنیم که آیا یک فرم بر روی AJAX ساخته شده است یا خیر:

  • حالت پیش‌نمایش و اشکال‌زدایی را فعال کنید (بازخوانی کنید).
  • سعی کنید فرم را در وب‌سایت خود ارسال کنید (بدون خطا).
  • آیا رویداد ajaxComplete در کنسول Preview و Debug ظاهر شد؟
  1. اگر بله فرم از AJAX استفاده می‌کند.
  2. اگر نه به فصل بعدی این پست وبلاگ بروید.

اگر پاسخ شما به سؤالات قبلی بله بود، بیایید نگاهی بیندازیم که با آن فرم AJAX چه‌کاری می‌توانیم انجام دهیم. روی رویداد ajaxComplete در حالت Preview و Debug کلیک کنید، سپس فراخوانی API را بر همانند تصویر زیر گسترش دهید:

تگ منیجر 21

 

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

اکنون باید به دنبال چیزی باشید که به شناسایی ارسال موفق فرم کمک کند. به پایین بروید و به دنبال ” response ” بگردید.

تگ منیجر 22

بیایید نگاهی دقیق‌تر به آن بیندازیم. آیا می‌توانید پیامی ببینید ” Thanks for contacting us! We will be in touch with you shortly”؟ آفرین! می‌توانیم از این به عنوان محرک استفاده کنیم.

 

ابتدا اجازه دهید یک متغیر لایه داده در Google Tag Manager ایجاد کنیم. برای اینکار مراحل زیر را دنبال کنید:

  • به متغیرها بروید
  • به سمت پایین به متغیر User-Defined بروید و New را بزنید
  • روی پیکربندی متغیر کلیک کنید و نوع متغیر – متغیر لایه داده را انتخاب کنید
  • نام متغیر لایه داده را به صورت response.data.message وارد کنید.

تگ منیجر 24

احتمالاً حدس می‌زنید که چرا ما به جای response، متغیر.response.data.message را به‌عنوان نام متغیر لایه داده وارد کردیم. بیایید نگاهی دقیق‌تر به لایه داده در حالت پیش‌نمایش و اشکال‌زدایی بیندازیم.

در خط 2 رویدادی با نام ajaxComplete را مشاهده می‌کنید – این همان نامی است که در قسمت چپ کنسول Preview و Debug ظاهر می‌شود. سپس ویژگی‌هایی را می‌بینیم که یک شی حاوی نقاط داده مختلف (جفت کلید-مقدار) است؛ و پاسخ یکی از آن کلیدهاست.

در آن response (گزینه شماره 2)، data ها (گزینه شماره 3) و message (گزینه شماره 4) را می‌بینیم.

بررسی 7 راه رسیدن به هدف در رهگیری فرم با تگ منیجر و GA4

گوگل آنالیتیکس 4

 

این را به عنوان دسترسی به پوشه‌ها در نظر بگیرید. ابتدا باید به attributes ها دسترسی داشته باشید، سپس به response می‌روید، سپس به پوشه data و سپس به message دسترسی پیدا می‌کنید.

 

نکته مهم:

در سایت شما، ساختار داده‌ها می‌تواند متفاوت باشد و پارامترها را می‌توان متفاوت نامگذاری کرد. در حالت کلی همیشه با attributes.response شروع می‌شود، اما پس از آن، ممکن است همه چیز به هر شکلی متفاوت باشد. ممکن است attributes.response.message یا چیزی شبیه به آن باشد. در هر صورت شما باید به ساختار سایت خود دقت کرده و با آن سازگار شوید.

 

مثالی دیگر برای شما می‌زنیم:

فرض کنید به داده‌های ارسال شده از سمت سرور علاقه‌مند هستید (این اطلاعات از طریق پاسخ‌های دقیق AJAX به دست شما می‌رسد). در این صورت، نام متغیر لایه داده در سیستم شما باید attributes.headers.Server نام داشته باشد.

پس از ایجاد متغیر لایه داده در Google Tag Manager، آن را اشکال‌زدایی (debug) می‌کنیم. Refresh Preview و Debug mode (با کلیک روی دکمه Preview در رابط GTM).

 

فرم را پرکنید و ارسال کنید. روی آخرین رویداد ajaxComplete در کنسول Preview و Debug کلیک کنید، سپس به تب Variables بروید و متغیر جدید dlv را پیدا کنید – features.response.data.message. اگر همه چیز را به درستی انجام داده‌اید، باید به شکل زیر باشد:

آنالیتیکس 1

بررسی 7 راه رسیدن به هدف در رهگیری فرم با تگ منیجر و GA4

 

اگر فرم ارسال شده با موفقیت باشد این پیام را نمایش می‌دهد. اگر مقدار آن متغیر تعریف نشده باشد، باید شروع به جستجوی اشتباهاتی که ممکن است در این فرایند انجام می‌دهید بکنید. رایج‌ترین این اشتباهات اشتباه تایپی در نام متغیر یا تعریف نادرست مسیر متغیر است. برخی از افراد فقط سعی می‌کنند از response به جای ویژگی s.response.data.message استفاده کنند.

 

اکنون بیایید یک تریگر ایجاد کنیم که وقتی رویداد ajaxComplete است فعال شود و متغیر لایه داده جدید ما حاوی “Thanks for contacting us”” باشد.

برای اینکار مراحل زیر را انجام دهید:

  • به Triggers بروید و روی New کلیک کنید
  • نوع تریگر را Custom Event قرار دهید.
  • نام رویداد را ajaxComplete قرار دهید.
  • این تریگر باید در برخی رویدادهای سفارشی فعال شود.
  • شرایطی را تعریف کنید که تریگر فعال شود از dlv – features.response.data.message و بخش Thanks for contacting us! استفاده کنید.

گوگل آنالیتیکس 1

بررسی 7 راه رسیدن به هدف در رهگیری فرم با تگ منیجر و GA4

 

حال بهتر است این فرآیند را تست کنیم.

  • این تریگر جدید را به برچسب رویداد Google Analytics 4 که در ابتدای این مقاله آن را ایجاد کرده‌اید اختصاص دهید.
  • یک حالت پیش‌نمایش و اشکال‌زدایی را باز کنید (refresh کنید).
  • سپس فرم AJAX را پر کرده و ارسال کنید. پس از ارسال موفقیت‌آمیز، برچسب رویداد Google Analytics 4 باید فعال شود در حالت پیش‌نمایش و اشکال‌زدایی نمایش داده می‌شود. همچنین باید Google Analytics 4 Debug View را بررسی کنید.

 

مواردی که هنگام رهگیری فرم با تگ منیجر و GA4 با استفاده از فرم‌های AJAX باید در نظر داشته باشید عبارت‌اند از:

  • پاسخ فرم شما ممکن است متفاوت به نظر برسد، همان‌طور که در بالا هم چند بار به آن اشاره شد این تفاوت به دلیل ساختار سایت شما است.
  • اگر توسعه‌دهندگان سایت شما (طراحان سایت شما) داده‌های response’s را تغییر دهند، این رهگیری شما ناموفق خواهد بود. به طراحان سایت خود در مورد اجرای GTM خود اطلاع دهید تا تغییرات ناخواسته ایجاد نکنند.
  • اگر صفحه حاوی بیش از یک فرم AJAX است، سعی کنید اطلاعات بیشتری را در لایه داده جستجو کنید که می‌تواند به Google Tag Manager کمک کند تفاوت بین آن فرم‌ها را تشخیص دهد.

 

 

 روش شماره 4 در رهگیری فرم با تگ منیجر و GA4، استفاده از رهگیری فرم ارسالی با محرک مشاهده عنصر (Element Visibility)

 

یکی از عالی‌ترین محرک‌ها در GTM تریگر Element Visibility است. این تریگر به شما این امکان را می‌دهد که تا زمانی که یک عنصر خاص روی صفحه ظاهر می‌شود (به دلیل پیمایش یا برخی شرایط دیگر) بتوانید آن را رهگیری کنید. هنگامی که یک پیام خاص (مثلاً “Thank you”) پس از ارسال موفقیت‌آمیز فرم ظاهر می‌شود، می‌توان از همین روش برای فرم‌ها استفاده کرد.

برای اینکار از یک روش قدیمی ولی بسیار کاربردی استفاده می‌کنیم، این فرآیند روشی است که از Universal Analytics استفاده می‌کند. اولین کاری که رهگیری فرم با تگ منیجر و GA4 با استفاده از این روش و در اینجا باید انجام دهیم این است که پیام موفقیت یک فرم را بررسی کنیم. ما باید راهی پیدا کنیم که چگونه به گوگل تگ منیجر این آموزش را بدهیم که به کدام عنصر خاص از وب‌سایت علاقه داریم.

در نتیجه پس از اینکه فرم را با موفقیت ارسال گردید، روی پیام موفقیت‌آمیز کلیک راست کرده و Inspect Element را انتخاب کنید. (برای اینکه این گزینه را انتخاب کنید یادتان باشد که باید از مرورگر گوگل کروم استفاده کنید)

گوگل آنالیتیک 3

بررسی 7 راه رسیدن به هدف در رهگیری فرم با تگ منیجر و GA4

 

سپس ابزارهای توسعه‌دهنده مرورگر را خواهید دید که حاوی اطلاعات مختلفی در مورد پیام هستند: محتوای آن، کلاس CSS و غیره.

در عکس زیر می‌بینم که پیام دارای یک کلاس “thanks” است که می‌تواند به عنوان یک شرط در تریگر Element Visibility استفاده شود. حتی بهتر است که پیام موفقیت پارامتری به نام “id” داشته باشد، اما از آنجایی که در دسترس نیست، از کلاس CSS استفاده خواهیم کرد.

تگ منیجر 33

بررسی 7 راه رسیدن به هدف در رهگیری فرم با تگ منیجر و GA4

 

حال به صفحه مربوط به Google Tag Manager خود می‌رویم و به بخش Triggers می‌رویم. یک تریگر جدید ایجاد کنید و نوع آن را Element Visibility قرار دهید. عنصر اصلی در اینجا روش انتخاب (Selection Method) است که به GTM کمک می‌کند تا بفهمد ما به دنبال چه هستیم.

آنالیتیکس

بررسی 7 راه رسیدن به هدف در رهگیری فرم با تگ منیجر و GA4

 

روش انتخاب دو گزینه دارد: Element ID و CSS Selector. از آنجایی که پیام موفقیت در مثال ما هیچ شناسه‌ای ندارد (“class”)، ما با Selector CSS پیش می‌رویم.

در قسمت Element Selector، باید آن کلاس “thanks” را جای‌گذاری کنیم. در CSS، هر کلاس با یک نقطه در جلوی آن تعریف می‌شود، پس بیایید همین کار را انجام دهیم.

در پایان، مطمئن شوید که تیک “Observe DOM changes” را بزنید. این گزینه به این معنی است که اگر عنصری بر روی صفحه نمایش ظاهر شود نه به دلیل پیمایش، بلکه تحت برخی شرایط دیگر (مثلاً “فقط به‌سادگی ظاهر می‌شود”)، GTM آن را رهگیری می‌کند.

به عکس زیر نگاهی بیندازید. اگر بخواهید، می‌توانید چند ترفند دیگر هم انجام دهید تا نتایج بهتری در رهگیری فرم با تگ منیجر و GA4 به دست بیاورید. در این جا ما از حداقل فرآیند کاری برای رهگیری فرم با تگ منیجر و GA4 استفاده کرده‌ایم.

گوگل آنالیتیکس

بررسی 7 راه رسیدن به هدف در رهگیری فرم با تگ منیجر و GA4

 

تریگر را ذخیره کنید.

حال بهتر است این فرآیند را در رهگیری فرم با تگ منیجر و GA4 تست کنیم

  • این تریگر جدید را به برچسب Google Analytics که در ابتدای این مقاله آن را ایجاد کرده‌اید اختصاص دهید.
  • یک حالت پیش‌نمایش و اشکال‌زدایی را باز کنید (Preview and Debug mode) یا صفحه را refresh کنید.
  • سپس فرم را پر کرده و ارسال کنید. پس از ارسال موفقیت‌آمیز، در کنسول P&D رویداد Element Visibility را مشاهده خواهید کرد. روی آن کلیک کنید و خواهید دید که تگ GA4 فعال شده است. اگر رویداد Element Visibility را نمی‌بینید، احتمالاً در فیلد election method و یا CSS selector اشتباهی کرده‌اید. شاید هم ممکن است فراموش کرده‌اید که چک باکس مشاهده تغییرات DOM را فعال کنید. شاید هم ممکن است که آن فرم در iFrame است (در این صورت مقاله رهگیری فرم با تگ منیجر و GA4 به کار شما نمی‌آید و باید به سراغ راه‌حل‌های پیشرفته در رهگیری فرم با تگ منیجر و GA4 باشید)

 

روش شماره 5 در رهگیری فرم با تگ منیجر و GA4 و استفاده از شنونده رویداد (Event Listener)، فرم خودکار سایت را خودتان بنویسید !

 بله می‌دانیم که فرآیند کد نویسی برای طراحی فرم در رهگیری فرم با تگ منیجر و GA4 پیچیده به نظر می‌رسد. درواقع همین‌طور هم هست. راه دیگری ندارید. اگر هیچ روش دیگری که در مقاله رهگیری فرم با تگ منیجر و GA4 تا به الآن توضیح داده شده در ساختار سایت شما کار نمی‌کند، پس دیگر چیزی برای از دست دادن ندارید. حال باید چه‌کار کنیم؟

برای حل این مشکل و استفاده از رهگیری فرم با تگ منیجر و GA4 باید بررسی‌های زیادی روی سایت خود انجام دهید. برای این کار باید از کد نویسی حرفه‌ای استفاده کنید. احتمال بسیار کمی وجود دارد که بتوانید به تنهایی یک شنونده رویداد خودکار بنویسید! (بدون استفاده از مهارت‌های کد نویسی قوی). برای اینکار باید به سراغ مقاله‌هایی با عنوان کد نویسی فرم‌ها و ایجاد Event Listener بروید که مبحثی حرفه‌ای است و در مقاله رهگیری فرم با تگ منیجر و GA4 قرار نمی‌گیرد.

بنابراین قبل از اینکه به صورت مبتدیان به سراغ مقاله‌های کد نویسی فرم‌ها برای Event Listener بروید و شروع به کد نویسی کنید، ابتدا به این سؤال پاسخ دهید: آیا دوست دارید از فرم‌های سفارشی که توسط یک توسعه‌دهنده (افزونه‌های فرم در سایت‌های وردپرسی) به طور خاص برای وب‌سایت شما (وب‌سایت‌های مشابه وب‌سایت شما) ساخته شده است، فرآیند رهگیری فرم با تگ منیجر و GA4 را انجام دهید؟

  • اگر جواب شما بله است، به روش شماره 6 این مقاله بروید.
  • در غیر این صورت، باید از همان مقاله‌های گفته شده در بالا استفاده کرده و آن‌ها را امتحان کنید.

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

برای مثال راهنمای رهگیری فرم با تگ منیجر و GA4 با استفاده از فرم Gravity به راحتی امکان‌پذیر است.

 

 روش شماره 6 رهگیری فرم با تگ منیجر و GA4 و استفاده از رهگیری فرم با رویدادهای dataLayer

نکته مهم:

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

وقتی بازاریابان برای مشاوره رهگیری فرم با تگ منیجر و GA4 به گروه ما (گروه شما) مراجعه می‌کنند، به دنبال راه حلی هستند که بتوانند از ورودی‌های توسعه‌دهنده جلوگیری کنند.

در نتیجه جای تعجب نیست که بازاریابان انتظار داشته باشند که این فرایند همیشه و در همه حال به صورت 100٪ درست باشد. اگرچه می‌دانیم که در بسیاری از موقعیت‌ها، کمک توسعه‌دهندگان سایت (طراحان سایت) برای رهگیری فرم با تگ منیجر و GA4 به‌شدت توصیه می‌شود.

 

حال با توجه به توضیحات بالا به موارد زیر توجه کنید:

  • اگر به توسعه‌دهندگان سایت خود (طراحان سایت) دسترسی دارید و شنونده فرم Google Tag Manager برای شما کار نمی‌کند، توصیه می‌کنیم از روش push استفاده کنید. این روش رهگیری فرم با تگ منیجر و GA4 را در ادامه بیشتر توضیح خواهیم داد.
  • اگر به توسعه‌دهندگان دسترسی ندارید یا آن‌ها بسیار شلوغ هستند (که معمولاً هم همین‌طور هستند)، پس اشکالی ندارد که سایر تکنیک‌های ذکرشده در مقاله رهگیری فرم با تگ منیجر و GA4 را دنبال کنید. فقط توجه داشته باشید که وقتی توسعه‌دهندگان به‌روزرسانی‌های مداوم یک وب‌سایت را انجام می‌دهند، این راه‌حل‌های دیگر احتمال بیشتری برای شکست و غیرفعال شدن دارند. دلیل آن‌هم مطلع نبودن طراحان سایت از فعالیت‌های شما و ارائه بروزرسانی و تغییرات ناخواسته و بدون اطلاعات شما در ساختار کد سایت است. این موارد در روش شماره 7 رهگیری فرم با تگ منیجر و GA4 که با نام DOM scraping است، به‌شدت صدق می‌کند.

 

حال که منظور خود را به‌خوبی برای شما بیان کردیم به سراغ ادامه آموزش روش شماره 6 در رهگیری فرم با تگ منیجر و GA4 می‌رویم.

همان‌طور که در بالا ذکر شد، اگر شنونده فرم Google Tag Manager داخلی با فرم شما کار نمی‌کند، بهترین کار بعدی این است که از توسعه‌دهنده بخواهید که یک dataLayer.push() سفارشی را در تابع callback که پس از موفقیت‌آمیز بودن فعال می‌شود را در فرم شما پیاده سازی کند. نمونه کدی که برای اینکار استفاده می‌شود مانند شکل زیر است:

window.dataLayer = window.dataLayer || []; window.dataLayer.push({ ‘event’: ‘formSubmission’, ‘formType’: ‘Contact us’, ‘formPosition’: ‘Footer’});

این کد کوتاه اما کاربردی می‌تواند کم زیای دبه طراح سایت شما کند.

حال باید موارد زیر را انجام دهیم:

  • ابتدا یک نام برای رویداد انتخاب کنید. در مثال بالا ما formSubmission را انتخاب کرده‌ایم.
  • سپس به هر داده اضافی که ممکن است نیاز داشته باشید فکر کنید. آن نقاط داده را یادداشت کنید و سعی کنید آن‌ها را دسته‌بندی کنید: دو دسته برای اینکار به شما پیشنهاد می‌کنیم:
  1. در ابتدا بگوییم که چندین نوع فرم داریم به عنوان مثال فرم‌های ” Contact us ” و ” Newsletter Subscription ” را داریم؛ بنابراین تصمیم گرفتیم که یک متغیر dataLayer formType داشته باشیم.
  2. یکی دیگر از پارامترهای مفید موقعیت فرم است، زیرا برخی از فرم‌ها در فوتر و برخی دیگر در نوار کناری یک وب‌سایت هستند. چرا برای آن‌ها یک متغیر dataLayer دیگر نمی‌سازیم؟
  • اگر برنامه‌نویسان سایت شما با رویدادهای dataLayer و به‌طور کلی Google Tag Manager آشنا نیستند، بهتر است به آن‌ها مقاله‌های آموزش در خصوص push نشان بدهید و مثال‌های واضحی برای آن‌ها بزنید. به آن‌ها توضیح دهید که پس از ارسال موفقیت‌آمیز فرم به یک رویداد با پارامترهای اضافی در dataLayer نیاز دارید. اگر توسعه‌دهندگان هنوز سؤالاتی دارند، باید به سراغ مقالات دیگر برای آشنایی بیشتر با رهگیری فرم با تگ منیجر و GA4 بروند.
  • اما به یاد داشته باشید که تأکید کنید که مقادیر پارامترهایی مانند formType و formPosition باید به صورت پویا توسط یک توسعه‌دهنده جایگزین شوند. اگر فرم X ارسال شده باشد، داده‌های آن فرم X باید به لایه داده منتقل شوند. این وظیفه توسعه‌دهنده شماست که راه حلی را بشناسد و طوری آن را کد نویسی کند که مقادیر واقعی را درج می‌کند.

خب حال که همه فرایندها انجام شد. پس از اینکه توسعه‌دهنده dataLayer.push را در همه اشکال پیاده سازی کرد، باید آن را آزمایش کنید:

  • حالت پیش‌نمایش و اشکال‌زدایی را باز کنید.
  • سعی کنید فرم را ارسال کنید:
  • حداقل یک فیلد الزامی را خالی بگذارید. در این مورد، رویداد dataLayer نباید فشار داده شود.
  • همه فیلدها را پرکنید و دوباره ارسال کنید. آیا رویداد در کنسول پیش‌نمایش و اشکال‌زدایی ظاهر شد؟ می‌بایست شبیه به عکس زیر باشد:

تگ منیجر

بررسی 7 راه رسیدن به هدف در رهگیری فرم با تگ منیجر و GA4

 

  • بررسی کنید که آیا تمام داده‌ها به درستی به dataLayer اعمال شده‌اند یا خیر. روی رویداد formSubmission و سپس فراخوانی API در کنسول Preview را کلیک کنید. داده‌ها باید به این شکل باشند:

گوگل آنالیتیکس

بررسی 7 راه رسیدن به هدف در رهگیری فرم با تگ منیجر و GA4

 

متغیرها و محرک‌ها را در GTM تنظیم کنید. در مثال dataLayer.push ما، دو نقطه داده وجود دارد که می‌خواهیم از آن‌ها به عنوان متغیر استفاده کنیم – formType و formPosition (ما آن‌ها را در تگ رویداد GA4 خود قرار خواهیم داد)، بنابراین باید با ایجاد لایه داده آن‌ها را در Google Tag Manager قرار دهم. متغیرها باید به صورت زیر باشند:

1st variable:
Title:
 dlv – formType
Variable type: Data Layer Variable
Data Layer Variable Name: formType

 

تمام تنظیمات دیگر را همان‌طور که هستند رها کنید و تغییری در آن‌ها ایجاد نکنید

 

2nd variable:
Title:
 dlv – formPosition
Variable type: Data Layer Variable
Data Layer Variable Name: formPosition

 

تمام تنظیمات دیگر را همان‌طور که هستند رها کنید و تغییری در آن‌ها ایجاد نکنید.

 

حال باید یک تریگر ایجاد کنیم. برای اینکار مراحل زیر را انجام دهید:

 

به Triggers بروید و روی New کلیک کنید. تنظیمات زیر را وارد کنید:

Trigger Type: Custom event
Event name: formSubmission

ممکن است بسته به موقعیت شما برخی شرایط متفاوت باشد. فقط مطمئن شوید که شما و برنامه‌نویس سایت از یک نام استفاده می‌کنید.

This trigger fires on: All custom events

این به این معناست که تمام رویدادهای formSubmission رهگیری خواهند شد.

 

 حال باید تگ رویداد GA4 را به‌روز کنید.

از آنجایی که ما دو متغیر لایه داده (formType و formPosition) ایجاد کرده‌ایم، می‌توانیم از آن‌ها در تگ رویداد GA4 خود استفاده کنیم. همان‌طور که قبلاً در مقاله رهگیری فرم با تگ منیجر و GA4 گفته‌ایم، هیچ الزامات دقیقی در مورد نحوه نامگذاری آن پارامترها وجود ندارد.

تصمیم گرفته‌ایم از form_type و form_position استفاده کنیم. مقادیر آن‌ها همان دو متغیر لایه داده است که ما به تازگی ایجاد کرده‌ایم.

تگ منیجر

بررسی 7 راه رسیدن به هدف در رهگیری فرم با تگ منیجر و GA4

برچسب را ذخیره کنید.

 

حال بهتر است که GA4 Custom Dimensions را تست کنیم.

 برای این کار بهتر است که مراحل زیر را انجام دهید:

  • این تریگر جدید را به برچسب Google Analytics که در ابتدای این مقاله ایجاد کرده‌اید اختصاص دهید.
  • یک حالت پیش‌نمایش و اشکال‌زدایی را باز کنید (refresh کنید).
  • سپس فرم را پر کرده و ارسال کنید. پس از ارسال موفقیت‌آمیز، برچسب Google Analytics باید فعال شود (در حالت پیش‌نمایش و اشکال‌زدایی نمایش داده می‌شود).
  • همچنین باید رویدادهای دریافتی را در Google Analytics 4 Debug View بررسی کنید.
  • form_position و form_type را به عنوان ابعاد سفارشی در GA4 ثبت کنید (اگر قصد دارید از آن‌ها در گزارش‌ها استفاده کنید).

 

روش شماره 7 در رهگیری فرم با تگ منیجر و GA4 و استفاده رهگیری فرم ارسالی با DOM Scraping

نکات مهم در روش شماره 7 مقاله رهگیری فرم با تگ منیجر و GA4:

  • این روش هرگز نباید اولین گزینه شما در رهگیری فرم با تگ منیجر و GA4 باشد. قبل از ادامه خواندن این بخش، از سایر روش‌های رهگیری فرم با تگ منیجر و GA4 که در بالا به آن‌ها اشاره کرده‌ایم استفاده کنید.
  • اگر توسعه‌دهندگان سایت شما اغلب کد وب‌سایت شما را به‌روز (آپدیت) می‌کنند، باید با DOM scraping به عنوان آخرین راه حل در رهگیری فرم با تگ منیجر و GA4 فکر کنید. البته این کار این خطرناک است و می‌تواند سریع‌تر از آنچه فکر می‌کنید در گوگل تگ منیجر غیرفعال شود.
  • حتی یک تغییر جزئی انجام شده توسط توسعه‌دهنده ممکن است رهگیری فرم با تگ منیجر و GA4 شما را با شکست روبرو کند. همچنین، به دانشی از مفاهیم جاوا اسکریپت و DOM نیاز دارد. (این مهارت‌ها در بین بازاریابان مهارت چندان رایجی نیست).

 

برای این مثال، از متغیر عنصر DOM استفاده خواهیم کرد. این یک متغیر در Google Tag Manager است که به شما امکان می‌دهد محتوا را مستقیماً از Document Object Model حذف کنید (به عبارت دیگر: با کمک آن می‌توانید هر متنی را در وب‌سایت خود به یک متغیر منتقل کنید و آن را به ابزارهای بازاریابی خود (به عنوان مثال Google Analytics) منتقل کنید).

به عنوان مثال، ما از فروشگاه نمایشی Shopify استفاده خواهیم کرد. یک Signup up to our mailing list در پایین صفحه اصلی سایت ما وجود دارد.

تگ منیجر 50

در فرم Shopify عبارت example@example.com را وارد کرده و Subscribe را بزنید. یک صفحه بازخوانی می‌شود، آدرس وب به https://somewebsite.com/?customer_posted=true#contact_form تغییر می‌کند و فرم کوچک پیام « Thank you » را نمایش می‌دهد.

تگ منیجر 51

بررسی 7 راه رسیدن به هدف در رهگیری فرم با تگ منیجر و GA4

 

در این مورد، ما به راحتی می‌توانیم فرم‌های ارسالی را با راه‌انداز صفحه نمایش صفحه تشکر دنبال کنیم، اما بیایید تصور کنیم که آدرس صفحه (URL) تغییر نکرده است. این یک وضعیت رایج نیست، اما احتمال آن وجود دارد. اینجاست که متغیر عنصر DOM ممکن است مفید باشد. ما می‌توانیم تریگری ایجاد کنیم که می‌تواند یک وب‌سایت را اسکن کند و به دنبال پیام موفقیت‌آمیز « Thanks for subscribing » بگردد.

 

ابتدا، اجازه دهید یک متغیر عنصر DOM به دنبال پیام موفقیت خاص ایجاد کنیم. نشانگر ماوس خود را روی متن پیام موفقیت‌آمیز ببرید، کلیک راست کرده و Inspect را انتخاب کنید. (برای اینکار از مرورگر گوگل کروم باید استفاده کنید)

گوگل تگ منیجر

بررسی 7 راه رسیدن به هدف در رهگیری فرم با تگ منیجر و GA4

کنسول یک توسعه‌دهنده با کدهای HTML زیادی ظاهر می‌شود. توجه داشته باشید که کد پیام موفقیت از قبل در آن کنسول انتخاب شده است. این پیام هیچ شناسه منحصر به فردی ندارد، بنابراین ما باید از انتخابگرهای CSS استفاده کنیم.

گوگل آنالیتیکس 47

بررسی 7 راه رسیدن به هدف در رهگیری فرم با تگ منیجر و GA4

 

در پایین تصویر شما می‌توانید خطی از انتخابگرهای CSS را ببینید، به عنوان مثال. div.note.form-success. این انتخابگرها می‌توانند به ما در شناسایی عنصر دقیق وب‌سایت کمک کنند.

بیایید یک متغیر DOM Element ایجاد کنیم و سعی کنیم متن “Thanks for subscription” را پاک کنیم.

برای اینکار مراحل زیر را انجام دهید:

  • به متغیرها بروید
  • به سمت پایین به متغیرهای تعریف شده توسط کاربر بروید و روی New کلیک کنید
  • نوع متغیر – DOM Element Variable را انتخاب کنید
  • روش انتخاب – CSS selector
  • در قسمت انتخابگر عنصر، note.form-success را وارد کنید

تگ منیجر

بررسی 7 راه رسیدن به هدف در رهگیری فرم با تگ منیجر و GA4

 

دقت کنید که آنجا چه کاری کردیم؟ ما آخرین انتخابگر CSS را از تصویر بالا وارد کردیم.

  • در صورتی که بیش از یک پیام موفقیت‌آمیز در وب‌سایتی با انتخابگر CSS مشابه وجود داشته باشد، از انتخابگر CSS طولانی‌تر استفاده می‌کنیم، به عنوان مثال، “#contact_form div div.note.form-success” (بدون علامت نقل‌قول) را استفاده می‌کنیم.

تگ منیجر

 

  • نام ویژگی را خالی بگذارید.
  • عنوان متغیر می‌تواند DOM – Form Success Message باشد.
  • کلید ذخیره را بزنید.

حال بهتر است که این فرایند را در رهگیری فرم با تگ منیجر و GA4 تست کنیم

برای اینکار مراحل زیر را دنبال کنید:

  • حالت پیش‌نمایش و اشکال‌زدایی را فعال کنید
  • فرم را ارسال کنید.
  • رویداد DOM Ready(not Container Loaded) را در Preview and Debug console انتخاب کنید و روی Variables کلیک کنید.

گوگل آنالیتیکس

  • اگر مقدار متغیر DOM – Form Success Message عبارت Thanks for subscribing باشد یعنی کار را به درستی انجام داده‌اید.

 

بسیار خوب! اکنون باید یک تریگر ایجاد کنیم که به متغیر DOM جدید ما بستگی دارد.

برای اینکار مراحل زیرا را انجام دهید:

  • به Triggers بروید و روی New کلیک کنید
  • نوع تریگر را انتخاب کنید – DOM Ready
  • این تریگر در Some Pages فعال می‌شود
  • شرایط زیر را وارد کنید: DOM – Form Success Message برابر است با Thanks for subscribing. این بدان معنی است که تریگر فقط در صفحاتی فعال می‌شود که پیام موفقیت فرم برای بازدیدکنندگان نمایش داده می‌شود.
  • تریگر را ذخیره کنید

 

تست کردن رهگیری فرم با تگ منیجر و GA4 را فراموش نکنید:

  • این تریگر جدید را به برچسب رویداد Google Analytics 4 که در ابتدای این مقاله ایجاد کردید اختصاص دهید.
  • باز کردن یک حالت پیش‌نمایش و اشکال‌زدایی (یا refresh)
  • فرم را پرکنید و ارسال کنید. پس از ارسال موفقیت‌آمیز، برچسب Google Analytics باید فعال شود (در حالت پیش‌نمایش و اشکال‌زدایی نمایش داده می‌شود).
  • همچنین باید رویدادهای دریافتی را در Google Analytics 4 Debug View بررسی کنید.
  • همچنین، سعی کنید فرمی را با خطای عمدی ارسال کنید و ببینید که آیا تگ فعال می‌شود (نباید تگ فعال شود).

 

 

نتیجه‌گیری در خصوص Google Tag Manager Form Tracking و رهگیری فرم با تگ منیجر و GA4

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

اما به یاد داشته باشید – برای رهگیری فرم با تگ منیجر و GA4 مشکلی نیست که از یک طراح وب‌سایت و توسعه‌دهنده کمک بخواهید. در صورت امکان، روش dataLayer.push را برای رهگیری فرم با تگ منیجر و GA4 انتخاب کنید (به سراغ DOM scraping نروید). به یاد داشته باشید که استفاده از راه‌حل‌های قوی باید اولویت شما باشد.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

اشتراک مقاله:

علی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جدیدترین مقالات وی دیجیتال مارکتینگ