4 راه فرم ترکینگ توسط گوگل تگ منیجر (Form tracking)

آخرین باری که در یک سایت، فرمی را پر کرده‌اید، به یاد می‌آورید؟ فکر می‌کنید تا‌به حال چند مرتبه اطلاعات خود را در فرم‌های مختلف وب‌سایت‌ها وارد کرده‌اید؟

تقریبا وب‌سایتی وجود ندارد که در آن از فرم‌ها استفاده ‌نشده باشد. ما از فرم‌ها در برنامه دیجیتال مارکتینگ برای دریافت سرنخ یا همان لید «Lead» استفاده زیادی می‌کنیم. اما سؤال اصلی این است که این لید یا اطلاعات، مربوط به کدام یک از فعالیت‌های بازاریابی ما است؟ چند درصد از افرادی که آنها را به صفحه‌ دارای فرم هدایت کرده‌ایم آن را پُر کرده‌اند و سؤالاتی از این دست، که تنها با داده‌ها می‌توانیم به صورت منطقی به آن‌ها پاسخ دقیق دهیم.

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

در این مقاله موارد زیر را با هم بررسی می‌کنیم

• آموزش اولیه فرم ترکینگ با گوگل تگ منیجر
• تگ‌ها و تریگرها
• روش اول: ترک کردن توسط Form Auto-Event Listener
• روش دوم: ترک کردن صفحه تشکر یا تأیید
• روش سوم: ترک کردن فرم‌های Ajax
• روش چهارم: ترک کردن توسط Element Visibility trigger

آموزش اولیه فرم ترکینگ با گوگل تگ منیجر

در دنیای وب، فرم‌های مختلفی وجود دارند. بعضی از آن‌ها با تأیید موفق فرم رفرش می‌شوند و بعضی دیگر نه. مشکلی اصلی در جمع‌آوری داده‌های فرم‌ها این است که یک روش استاندارد جهانی برای توضیح چگونگی کارکرد فرم‌ها وجود ندارد. بعضی برنامه‌نویس‌ها ممکن است یک تکنولوژی مانند «Ajax» را بر دیگر تکنولوژی‌ها ترجیح دهند. در گوگل تگ منیجر به صورت پیش‌فرض تنها می‌توانیم یک نوع از فرم‌ها را با استفاده از تریگر پیش فرض آن ترک کنیم. تریگر «Form Submission» این کار را برای ما با چند کلیک و تنظیمات کلی انجام می‌دهد.

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

ساخت تگ و تریگر ارسال فرم

 برای ترک کردن یا اجرای هر چیزی در تگ منیجر نیاز به یک «تگ» و «تریگر» داریم. اگر شما می‌خواهید فرم‌های سایتان را توسط گوگل آنالیتیکس ردیابی کنید، باید یک تگ گوگل آنالیتیکس و تریگر مربوط به آن یعنی «Form Submission» را بسازید. ساختن تگ، ساده‌ترین قسمت این مقاله است. بیاید باهم یک تگ بسازیم. شما در تمام روش‌های گفته‌ شده در ادامه مقاله، به این تگ احتیاج دارید.

اگر تجربه کار با گوگل تگ منیجر را ندارید و بعضی مفاهیم برایتان تازه هستند مقاله گوگل تگ منیجر چیست  را بخوانید.

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

1.  در قسمت Tag، بر روی دکمه «new» برای ساخت یک تگ جدید کلیک کنید.
2. در قسمت «Tag Configuration» گزینه «Universal Analytics» را انتخاب کنید.
3. در قسمت «Track type» گزینه «Event» را انتخاب کنید.
4. در قسمت «category» یک موضوع دسته‌بندی مانند «Form submission» را بنویسید.
5. در قسمت «Action» یک تیتر مناسب مانند «Contact Form» را بنویسید.
6. در قسمت «Label» یک «Label» مناسب مانند «{{Page Path}}» را بنویسید. (متن اختیاری است.)
7. در قسمت «Google Analytics Settings» متغیر تعیین‌ شده گوگل آنالیتیکس خود را انتخاب کنید. (اگر از قبل این متغیر را تعریف نکرده‌اید، باید روی گزینه «new variable»  کلیک کرده و در قسمت «Tracking ID» کد ترکینگ سایت خود را از گوگل آنالیتیکس وارد کرده و ذخیره کنید).

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

فعلا قسمت «triggering» را خالی گذاشته و گزینه «save» را بزنید. در ادامه به این قسمت برمی‌گردیم. بیشتر مطالب در ادامه مربوط به همین قسمت تریگر و انواع آن است. این‌که از چه نوع تریگری باید استفاده کنید، بستگی به نوع فرم شما دارد. نتیجه کار را در تصویر زیر می‌توانید مشاهده کنید. 

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

در صورت استفاده یا تنظیم اشتباه تریگر‌‌ها، آمار و گزارش‌های غلط به شما داده می‌شود که باعث نتیجه‌گیری اشتباه شما می‌شود. پس با دقت، تمام مراحل هر روش را بخوانید و اگر با سؤالی مواجه شدید حتما آن را در قسمت نظرات بپرسیدد:)

روش اول: ترک کردن توسط Form Auto-Event Listener

این روش، کلی‌ترین راه ترکینگ یک فرم است که برای اغلب فرم‌های موجود در سایت جوابگو است. در ابتدا باید متغیرهای فرم را در گوگل تگ منیجر فعال کنید؛ چون به‌صورت کلی این متغیرها غیرفعال هستند. اما اگر قبلا آن‌ها را فعال کرده‌اید به قسمت بعد بروید. برای این کار از منوی کناری گوگل تگ منیجر، «variables» را انتخاب کنید و در قسمت «Built-In Variables» گزینه «configure» را بزنید. قسمت «form» را پیدا کنید و تمام متغیرهای آن را مانند تصویر پایین، تیک بزنید. تغییرات خودبه‌خود ذخیره خواهند شد.

پس از انجام این تغییر از منوی کناری تگ منیجر «Triggers» را انتخاب کنید و برای ساخت یک تریگر جدید، دکمه «new» را بزنید:

1. در قسمت بالا یک نام اختیاری مرتبط برای تریگر خود انتخاب کنید.
2. در قسمت «Trigger Configuration» کلیک کرده و نوع «Form Submission» را برای تریگر خود انتخاب کنید.
3. قسمت «wait for Tags» را تیک نخورده باقی بگذارید.
4. تیک قسمت «Check Validation» را بزنید. اگر تیک این قسمت را نزنید هر بار که دکمه تائید در فرم زده شود (حتی زمانی که کاربر تمام فیلدهای لازم را پر نکرده و فرم شما ارور می‌دهد)، تگ فراخوانی می‌شود که باعث ایجاد داده‌های اشتباه در آمار شما می‌گردد.
5.  با تیک زدن قسمت قبل، مرحله شرط‌ گذاری برای تریگر باز می‌شود که می‌توانید مانند تصویر زیر،  «Page Path» را انتخاب کنید و آدرس صفحه‌ای که فرم شما در آن قرار دارد را وارد کنید. مثلا برای فرم تماس با ما، با آدرس «example.com/contact-us» باید همانند تصویر عمل کنید. (یعنی بخش دوم آدرس سایت را وارد کنید: contact-us).
6. در قسمت آخر یعنی «This trigger fires on» چون از قبل مشخص کردید که فرم شما در کدام صفحه قرار دارد گزینه «All form» را انتخاب کنید.

حالا وقت تست کردن این روش برای فرم موجود در سایت‌تان است. برای این کار، برای تگی که در ابتدای مقاله ساختید، تریگر «Form Submission» که تعریف کردید را انتخاب کنید.

 سپس در صفحه تگ منیجر بر روی گزینه «Preview» کلیک کنید. این گزینه در بالا و سمت راست صفحه است. در صفحه Preview Mode که برای شما باز می‌شود آدرس کامل سایت را مانند تصویر زیر وارد کنید.

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

 

اکنون در سایت، فرم خود را یک‌بار به طور کامل پر کنید و دکمه تائید فرم را بزنید:

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

 

• اگر گزینه «formSubmit» وجود داشت، باید یک تست دیگر نیز انجام دهید. این بار فرم خود را پر کنید؛ اما یکی از فیلدهای اجباری آن را خالی بگذارید و دکمه تائید فرم را بزنید. در این حالت باید صفحه سایت شما ارور بدهد.

نکته: اگر با زدن تائید، باز هم گزینه «gtm.formSubmit» در جدول وجود داشت، باز هم باید از روش‌های بعدی برای فرم خود استفاده کنید. اما اگر این بار این گزینه وجود نداشت، یعنی این روش کاملا مناسب شما است و  و فقط زمانی که فرم به صورت کامل پر شده است، تگ فراخوانی می‌شود.

حالا وقت این رسیده که یک تریگر مناسب همین فرم را بسازید تا مرحله پایانی انجام شود. برای این کار، بعد از پر کردن و تائید فرم روی گزینه «gtm.formSubmit» کلیک کرده و مطابق تصویر، از بالای جدول گزینه «Variables» را انتخاب کنید.

سپس در متغیرها بگردید و یک متغیر با مقدار همتا که تنها برای این فرم است را پیدا کنید. معمولا متغیر «Form ID» بهترین انتخاب است. البته در صورت لزوم می‌توانید از متغیر «Form Classes» هم استفاده کنید. به‌ عنوان مثال، در حالت زیر ما از متغیر ایدی با نام «form_contact2» استفاده کرده‌ایم.

اکنون برای ساخت تریگر مناسب این فرم مراحل زیر را دنبال کنید:

1. در تگ منیجر و تریگرها گزینه «new» را بزنید.
2. در قسمت «Trigger Configuration» کلیک کرده و همچون قسمت قبل، نوع «Form Submission» را برای تریگر خود انتخاب کنید.
3. تیک قسمت «Check Validation» را بزنید. سپس همان‌طور که گفته شد، شرط محدود کننده تریگر خود را وارد کنید. به عنوان مثال، آدرس صفحه فرم خود را بزنید.
4. در قسمت آخر، گزینه «some forms» را کلیک کنید، متغیری که برای فرم خود ست کرده بودید را انتخاب کرده و مقدار آن را وارد کنید. قسمت وسط را «equals» انتخاب کنید.
5. تریگر را با زدن دکمه «save» ذخیره کنید.

تست نهایی

1. تریگر ساخته‌ شده را به تگی که در ابتدای مقاله ساختید، متصل کنید. برای این کار به صفحه تگ‌ها بروید، روی تگ ساخته‌ شده کلیک کرده و در قسمت تریگرها، تریگر ساخته‌ شده خود را انتخاب و ذخیره کنید.
2. دکمه «Preview» را بزنید.
3. فرم خود را کامل کنید و دکمه تائید فرم را بزنید. اگر تگ به درستی اجرا و فراخوانی شد، کار ترکینگ شما تمام شده است. برای اطمینان بیشتر می‌توانید یک فرم دیگر در سایت خود را تکمیل و بررسی‌های لازم را انجام دهید. بهتر است حتما در بخش «Real time» گوگل آنالیتیکس از قسمت «Events» چک کنید که داده‌ها را گوگل آنالیتیکس دریافت می‌کند یا خیر و سپس با خیال راحت، تغییرات را با کلیک روی ‌«submit» در تگ منیجر منتشر کنید. به این ترتیب از این لحظه به بعد می‌توانید داده‌های فرم مربوط به تمام کاربران را داشته باشید.

روش دوم: ترک کردن صفحه تشکر یا تأیید

در بعضی فرم‌ها کاربران سایت بعد از پر کردن و تائید فرم، وارد یک صفحه تشکر می‌شوند. به همین دلیل شما می‌توانید از این صفحه برای هدف خود استفاده کنید. اما ابتدا باید از دو نکته مهم مطمئن شوید:

• آیا آدرس صفحه تشکر یکتا است و تنها بعد از تائید همین فرم ظاهر می‌شود؟
• آیا کاربران راهی برای باز کردن این آدرس یکتا به‌ جز تائید فرم دارند؟

تنها در صورتی می‌توانید از این روش استفاده کنید که جواب سؤال اول مثبت و سؤال دوم منفی باشد. در غیر این صورت به روش‌های دیگر مراجعه کنید.

اکنون برای ساخت تریگر مناسب این فرم مراحل زیر را دنبال کنید:

1. در تگ منیجر و تریگرها گزینه «new» را بزنید.
2. روی قسمت «Trigger Configuration» کلیک کنید و نوع «Page View» را برای تریگر خود انتخاب کنید.
3. در قسمت بعد، گزینه «Some Page Views» را کلیک کنید.
4. اکنون باید آدرس صفحه تشکر خود را به تریگر معرفی کنید. به‌ عنوان مثال اگر آدرس این صفحه به شکل «example.com/form/thankyou.html» باشد می‌توانید متغیر «Page Path» و سپس «equals» را انتخاب کنید و مقدار را برابر «/form/thankyou.html» قرار داده و یا متغیر «Page URL» و قسمت «Contains» را برابر «form/thankyou.html» قرار دهید. بهتر است که تا جای ممکن آدرس را با جزییات کامل وارد کنید تا به اشتباه شامل صفحه دیگری از سایت نشود.
5. فراموش نکنید که نام مناسبی برای تریگر خود انتخاب کرده و آن را ذخیره کنید. نام مرتبط و واضح در آینده که تعداد تریگرهایتان زیاد می‌شود بسیار به شما کمک خواهد کرد.

تست نهایی

1. تریگر ساخته شده را به تگی که در ابتدای مقاله ساختید، متصل کنید. برای این کار، همانند قبل، به صفحه تگ‌ها بروید، روی تگ ساخته شده کلیک کرده و در قسمت تریگرها، تریگر ساخته شده خود را انتخاب و ذخیره کنید.
2. دکمه «Preview» را بزنید.
3. فرم خود را کامل کنید و دکمه تائید فرم را بزنید. اگر صفحه تشکر باز شد و تگ به درستی اجرا و فراخوانی شد، مراحل تست در گوگل آنالیتیکس و سپس پابلیش کردن تغییرات در تگ منیجر را نباید فراموش کنید!

روش سوم: ترک کردن فرم‌های Ajax

اگر شما در حال خواندن این قسمت از مقاله هستید، احتمالا فرم سایت شما مانند روش اول از رویدادهای معمول برای تائید استفاده نمی‌کند یا مثل روش دوم کاربر را به یک صفحه تشکر انتقال نمی‌دهد. احتمالا بعد از تائید، بدون اینکه کلِ صفحه رفرش شود، خود فرم رفرش شده و یک پیام تائید را نشان می‌دهد. به احتمال زیاد فرم شما یک فرم «Ajax» است. مانند تصویر زیر که بدون رفرش صفحه، پیغام تایید، ظاهر می‌شود.

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

• در تگ منیجر وارد تگ‌ها شوید و دکمه «new» را برای ساخت تگ جدید کلیک کنید.
• در قسمت «Tag Configuration» گزینه «custom HTML» را انتخاب کنید.
• کد زیر را کپی کنید، در کادر وارد کرده و تگ را ذخیره کنید.

<script id="gtm-jq-ajax-listen" type="text/javascript">
 (function() {

 'use strict';
 var $;
 var n = 0;
 init();

 function init(n) {

 // Ensure jQuery is available before anything
 if (typeof jQuery !== 'undefined') {
 
 // Define our $ shortcut locally
 $ = jQuery;
 bindToAjax();

 // Check for up to 10 seconds
 } else if (n < 20) {
 
 n++;
 setTimeout(init, 500);

 }

 }

 function bindToAjax() {

 $(document).bind('ajaxComplete', function(evt, jqXhr, opts) {

 // Create a fake a element for magically simple URL parsing
 var fullUrl = document.createElement('a');
 fullUrl.href = opts.url;

 // IE9+ strips the leading slash from a.pathname because who wants to get home on time Friday anyways
 var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname;
 // Manually remove the leading question mark, if there is one
 var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search;
 // Turn our params and headers into objects for easier reference
 var queryParameters = objMap(queryString, '&', '=', true);
 var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':');

 // Blindly push to the dataLayer because this fires within GTM
 dataLayer.push({
 'event': 'ajaxComplete',
 'attributes': {
 // Return empty strings to prevent accidental inheritance of old data
 'type': opts.type || '',
 'url': fullUrl.href || '',
 'queryParameters': queryParameters,
 'pathname': pathname || '',
 'hostname': fullUrl.hostname || '',
 'protocol': fullUrl.protocol || '',
 'fragment': fullUrl.hash || '',
 'statusCode': jqXhr.status || '',
 'statusText': jqXhr.statusText || '',
 'headers': headers,
 'timestamp': evt.timeStamp || '',
 'contentType': opts.contentType || '',
 // Defer to jQuery's handling of the response
 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '')
 }
 });

 });

 }

 function objMap(data, delim, spl, decode) {

 var obj = {};

 // If one of our parameters is missing, return an empty object
 if (!data || !delim || !spl) {

 return {};

 }

 var arr = data.split(delim);
 var i;

 if (arr) {

 for (i = 0; i < arr.length; i++) {

 // If the decode flag is present, URL decode the set
 var item = decode ? decodeURIComponent(arr[i]) : arr[i];
 var pair = item.split(spl);

 var key = trim_(pair[0]);
 var value = trim_(pair[1]);

 if (key && value) {

 obj[key] = value;

 }

 }

 }

 return obj;

 }

 // Basic .trim() polyfill
 function trim_(str) {

 if (str) {

 return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');

 }

 }


 })();

</script>

• یک تریگر از نوع «Page View »که روی «All Page» است، روی تگ ست کرده و آن را ذخیره کنید. اکنون می‌توانید تست کنید که فرم شما از نوع «Ajax» است یا خیر:

1. تگ منیجر را در حالت «Preview» قرار دهید.
2. فرم را کامل پرکرده و دکمه تائید را بزنید.
3. تست کنید که رویداد «ajaxComplete» در جدول پایین صفحه ظاهر شده یا خیر. در صورت جواب مثبت، فرم شما «Ajax» است و می‌توانید از این روش برای ترکینگ آن استفاده کنید و در صورت جواب منفی باید از روش‌های دیگر استفاده کنید.

اکنون ببینم که چگونه می‌توان این فرم را به تریگر معرفی کرد. روی رویداد «ajaxComplete» کلیک کرده و سپس از گزینه‌های بالای جدول «Data Layer» را انتخاب کنید.

شاید برای کسانی که سررشته‌ای از کدنویسی ندارند سخت به نظر برسد اما آن‌چنان هم سخت نیست! این‌ها داده‌هایی هستند که بعد از تائید فرم به «Data Layer» فرستاده می‌شوند و شما از هر خط آن می‌توانید برای ساخت یک متغیر در تگ منیجر استفاده کنید. اما باید به دنبال یک داده یکتا که تنها برای این فرم استفاده می‌شود، بگردید تا به هدف خود برسید. به عنوان مثال، مانند شکل، دنبال کلمه «response» بگردید.

جمله «This message has been successfully sent» را می‌بینید؟ می‌توانید از همین پیام یکتا برای تریگر استفاده کنید. ممکن است این پیام باید برای شما فارسی باشد. نگران نباشید، چون تگ منیجر زبان فارسی را در بخش تریگرها به خوبی پشتیبانی می‌کند.

ابتدا باید یک متغیر از نوع «Data Layer» بسازید. برای ساخت آن مراحل زیر را دنبال کنید:

1. در سمت چپ تگ منیجر، روی «Variables» کلیک کنید.
2. پایین صفحه و در قسمت «User-Defined Variables» دکمه «new» را بزنید.
3. روی گزینه «Variable Configuration» کلیک کنید و نوع متغیر را «Data Layer Variable»  انتخاب کنید.
4. در قسمت «Data Layer Variable Name» نام متغیر خود را وارد کنید. در مثال ما باید عبارت «response» وارد شود.
5. به بقیه گزینه‌ها را دست نزنید و بعد از انتخاب نام مناسب برای متغیر، آن را ذخیره کنید.

شاید برای شما سوال باشد که چرا در قسمتی که در تصویر با فلش نارنجی نشان داده‌شده، از عبارت «attributes.response» استفاده شده است؟ اگر دوباره به صفحه «Data Layer» نگاهی بیندازید، متوجه می‌شوید که در خط دوم، نام «attributes» که یک «Object» است، دیده می‌شود که شامل داده‌ها و نام‌های آن است. به همین دلیل برای فراخوانی یک متغیر باید نام «Object» آن نیز در ابتدای آن نوشته شود.

برای تست ساخت درست متغیر، دوباره «Preview» را انتخاب، فرم را پرکرده و تائید کنید. سپس در جدول و در قسمت «Variable» به دنبال نام متغیر ساخته‌ شده خود باشید. اگر همه چیز را به درستی انجام داده باشید، باید همانند شکل، متغیر شما دارای مقدار صحیح آن باشد.

اگر مقدار متغیر درست نبود باید دوباره تمام مراحل را چک کنید؛ مثلا شاید نام متغیر را به اشتباه وارد کرده‌اید.

اکنون برای ساخت تریگر مناسب این فرم، مراحل زیر را دنبال کنید:

1. در قسمت تریگرها، گزینه «new» را بزنید.
2. در قسمت «Trigger Configuration» کلیک کرده و نوع «Custom Event» را برای تریگر خود انتخاب کنید.
3. در قسمت «Event name» عبارت «ajaxComplete» را بنویسید.
4. در قسمت «fire on» گزینه «Some Custom Events» را انتخاب کنید.
5. در بخش اضافه شده برای شرط در قسمت اول، نام متغیر ساخته شده خود را بزنید و در قسمت بعد گزینه «contains» و در قسمت آخر متن تاییدی که از صفحه «Data Layer» برداشتید، را وارد کنید.

تست نهایی

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

نکاتی در مورد فرم‌های Ajax 

• این فرم‌ها ممکن است جواب‌های مختلفی به تأیید بدهند، به همین دلیل باید خودتان بتوانید شرایط را بر اساس فرم به تگ منیجر معرفی کنید.
• اگر برنامه نویسان سایت مقدار متغیری که شما ساخته‌اید را در سایت تغییر دهند، تگ شما دچار مشکل می‌شود. پس متغیر استفاده‌ شده را به برنامه نویسان سایت خود اطلاع دهید.
• اگر یک صفحه دارای بیشتر از یک فرم «Ajax» باشد، باید دنبال متغیرهای بیشتری بگردید تا بتوانید آن را به عنوان یک فرم یکتا به تگ منیجر معرفی کنید. به این ترتیب، هر فرم به‌صورت مجزا مشخص می‌شود.

روش چهارم: ترک کردن توسط Element Visibility trigger

یکی از تریگرهای پرکاربرد در گوگل تگ منیجر «Element Visibility» است. اگر با این تریگر آشنایی ندارید، این مقاله را از دست ندهید!

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

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

در صفحه باز شده مشاهده می‌کنید که کد مربوط به پیام تایید، انتخاب شده است. در آن کد، دنبال متغیری بگردید که بتوان آن را به تریگر معرفی کرد. به طور معمول این پیام‌ها دارای یک کلاس هستند که می‌توان از آن استفاده کرد. اگر بتوانید در کد، یک آیدی پیدا کنید، بهتر است. اما با داشتن کلاس هم می‌توان ادامه داد. در مثال ما متن دارای کلاسی با نام «thanks» است.

اکنون برای ساخت تریگر مناسب این فرم، مراحل زیر را دنبال کنید:

1.  در قسمت تریگرها، گزینه «new» را بزنید.
2. در قسمت «Trigger Configuration» کلیک کرده و نوع «Element Visibility» را برای تریگر خود انتخاب کنید.
3. اگر المان شما دارای یک آیدی است، باید گزینه «ID» را انتخاب کرده و در صورت داشتن کلاس «CSS Selector» را کلیک کنید.
4. در قسمت «Element Selector» یک نقطه در ابتدای نام کلاس خود وارد کنید. چون در «CSS» ، کلاس‌ها با یک نقطه ابتدایی مشخص می‌شوند.
5. بقیه گزینه‌ها را همانند شکل وارد کنید.
6. تیک گزینه «Observe DOM changes» را بزنید. این تیک به این معنا است که اگر این المان بدون اسکرول کردن صفحه و تحت شرایط دیگر هم در صفحه ظاهر شد، تریگر فعال شود که برای استفاده ما در این قسمت الزامی است. تریگر را ذخیره کنید.

تست نهایی

1. تریگر ساخته‌ شده را به تگی که در ابتدای مقاله ساختید، متصل کنید. برای این کار به صفحه تگ‌ها بروید، روی تگ ساخته‌ شده کلیک کنید و در قسمت تریگرها، تریگر ساخته‌ شده خود را انتخاب و ذخیره کنید.
2. تگ منیجر را در حالت «Preview» قرار دهید.
3. فرم خود را کامل کنید و دکمه تائید فرم را بزنید. در جدول «Preview» باید رویداد «elementVisibility» ظاهر شود، روی آن کلیک کنید تا مطمئن شوید تگ شما درون آن فراخوانی شده است. در صورت دیدن هرگونه مشکل در این قسمت، باید به ابتدای این مقاله آموزشی برگردید و تمام مراحل را دوباره چک کنید تا اشتباهی در هیچ‌کدام نباشد.

نکته

اگر المان شما نه آیدی و نه کلاس داشت، باز هم می‌توانید از این روش استفاده کنید. فقط باید بدانید که در «CSS» باید از چه روشی برای نشان دادن المان در «CSS Seletor» استفاده کنید.

آنچه در این مقاله آموختید:

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