🔥 دوره‌های 20 میلیونی رو رایگان برنده شو!

ردیابی تبدیل ها با iFrame در گوگل تگ منیجر

همان طور که مطلع هستید گوگل تگ منیجر ابزار بسیار قدرتمند است که با وصل کردن آن به آنالیتیکس می توانید آنالیزهای بسیار دقیقی را داشته باشید. حال در این مقاله به ردیابی تبدیل ها به کمک iFrame در گوگل تگ منیجر خواهیم پرداخت. آیا می دانید iFrames چیست؟ چگونه interaction ها را به وسیله ی iFrame ردیابی کنیم؟ یا چگونه تریگر فرم ثبت نام ایجاد کنیم و چگونه با iFrame تبدیل ها را ردیابی کنیم و ...

در این مقاله می خوانید

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

در این مقاله به شما نحوه ردیابی تعداد تبدیل ها از طریق iFrame در گوگل تگ منیجر را آموزش خواهیم داد.

آیا می دانید iFrames چیست؟ چگونه interaction ها را به وسیله ی iFrame ردیابی کنیم؟ یا چگونه تریگر فرم ثبت نام ایجاد کنیم و چگونه با iFrame تبدیل ها را ردیابی کنیم و …

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

iFrame چیست؟

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

بنابراین شما دسترسی به خود iFrame زمانی که با گوگل تگ منیجر کار می کنید ندارید زمانی که گوگل تگ منیجر خود را در Frame مادر نصب کردید چون آن یک وبسایت کاملا متفاوت است. اگر برایتان سوال پیش آمده است که چطور می توان این دسترسی را ایجاد کرد، باید بگوییم که شما نیاز به دسترسی Developer به iFrame داشته باشید. بیش از ۸۰ درصد مواردی که در این زمینه با آنها برخورد می کنیم که مردم می خواهند تعاملات در یک Frame را ردیابی کنند امکان پذیر نیست چرا که دسترسی به خود iFrame وجود ندارد.

بررسی المان iFrame

حال اگر بخواهیم که تعاملاتی مانند کلیک برروی دکمه ها، ثبت فرم های مختلف و موارد مشابه را با کمک گوگل تگ منیجر درون یک iFrame ردیابی کنیم، چه کاری می توان انجام داد؟

ابتدا شما باید دسترسی به آن iFrame  داشته باشید تا بتوانید جاوا اسکریپت و احتمالاً گوگل تگ منیجر را نصب کنید. زمانی که دسترسی را پیدا کردید می توانید هرچیزی که درون این Frame قرار دارد را ردیابی کنید و این موارد دقیقا مشابه همان موارد قابل ردیابی هستند که در هر وب سایت معمولی وجود دارند. مقاله امروز ما در یک فروشگاه دمو شروع می شود. من یک صفحه به اسم  iFrame ایجاد کرده ام و برروی این صفحه نیز گوگل تگ منیجر نصب شده است، و همانطور که می بینید یک iFrame نیز قرار داده شده است.

از کجا بفهمیم که این یک iFrame است؟ شما این قاب را می بینید اما این به طور کامل در صفحه آشکار نیست، کاری که می توانید بکنید این است که می توانید در بخشی از صفحه که شک دارید شاید iFrame وجود داشته باشد کلیک راست کنید، و گزینه ای می بینید با نام View Frame Source، چرا که iFrame در واقع یک وبسایت دیگر درون یک وبسایت است.

بررسی المان iFrame

پس زمانی که این المان را Inspect Element کنیم، می بینیم که در این بخش ابزار برنامه نویس نمایان می شود، می توانیم یک صفحه HTML دیگر را نیز ببینیم، یک صفحه کامل HTML درون صفحه HTML ما، و این موضوع از درون این تگ iFrame قابل دیدن است، چرا که یک صفحه دیگر درون این تگ بارگذاری می شود. اگر بخواهیم ببینیم که این صفحه چه شکلی است، می توانیم کلیک راست کرده و به View Frame Source برویم. این HTML صفحه خواهد بود. و اگر بخواهیم از View Source در ابتدا خلاص شویم، Enter را می فشاریم، این کار به سادگی صفحه وبسایتی را که درون این iFrame قرار دارد را بارگذاری می کند.

ردیابی تعاملات interactions با iFrame

بدیهی است که هدف اصلی ما ردیابی اتفاقات افتاده در این iFrame از طریق گوگل تگ منیجر است، اما برای انجام دادن این کار باید در ابتدا به HTML این iFrame دسترسی پیدا کنیم که بتوانیم این صفحه را ویرایش کنیم. اگر در مورد شما این کار امکان پذیر نیست، با بدشانسی مواجه شده اید. هیچ راهی برای کمک به شما برای ردیابی این iFrame وجود ندارد مگر این که دسترسی لازم را به آن داشته باشید و بتوانید پس زمینه اتفاقاتی که در آنمی افتد را تغییر دهید.

خوشبختانه ما در یک صفحه دمو خیلی ساده هستیم و به این صفحه دسترسی داشته و هرچه که می خواهیم را می توانیم در این بلاگ وردپرس وارد کنیم، که در این iFrame نمایش داده می ود. اما یادآوری می کنم که شما باید مطمئن شوید که به HTML این iFrame دسترسی دارید.

ردیابی تعاملات interactions با iFrame

چرا این موضوع انقدر مهم است؟ زمانی که شروع به بررسی با گوگل تگ منیجر بکنیم، و به عنوان مثال این فرم را پر کنیم، و آن ا ارسال کنیم، می بینیم که صفحه به نحوی بارگذاری می شود ولی تنها بجای iFrame، صفحه ما در این بالا همان صفحه قبلی باقی می ماند، و گوگل تگ منیجر هم هر چیزی که درون این iFrame اتفاق می افتد را دریافت نمی کند و بنابراین هیچ age View جدیدی ایجاد نمی شود.

فرستادن داده ها از iFrame به Parent iFrame

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

فرستادن داده ها از iFrame به Parent iFrame

ما داده ها را با یک Call جاوا اسکریپت به نام postMessage از iFrame به فریم مادر می فرستیم، با گوگل تگ منیجر به آن گوش می دهیم و سپس می توانیم آن را به هر ابزار بازاریابی که دوست داریم ارسال کنیم. پس بیایید ببینیم این کارها چگونه انجام می شوند.

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

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

پیاده سازی کد گوگل تگ منیجر در iFrame

این کار در بلاگ وردپرس ما به راحتی انجام می شود چون از قبل یک فایل Template برای این کار را داشته ایم، و تنها لازم است که کمی آن را جلوتر ببرم، همچنین قرار دادن یک Body Tag نیز در این قسمت کار ایده آلی محسوب می شود. ما این فایل را آپدیت می کنیم و بررسی می کنیم که آیا جواب می دهد یا خیر. بیایید به بخش Preview and Debug Mode برویم و صفحه خود را بارگذاری کنیم.

حال که می بینیم گوگل تگ منیجر برروی صفحه فریم بارگذاری می شود، همچنین این اتفاق در صفحه iFrame نیز می افتد، و می بینید که اکانت گوگل تگ منیجر متفاوتی در فریم مادر بارگذاری شده است. بنابراین ما دو اکانت متفاوت در دو فریم متفاوت داریم.

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

اما با فریم مخصوصی که درون iFrame ما وجود دارد چه کاری باید انجام دهیم؟ هدف ما این است که نرخ تبدیل را از طریق iFrame ردیابی کنیم، که در مورد مثال ما، یک فرم ثبت نام رویداد است.

بیایید این فرم را Inspect کنیم و ببینیم که ID فرم چیست. در این قسمت یک ID می بینیم، ninja_forms_form_1، بنابراین به راحتی می توانیم یک تریگر ایجاد کنیم. برای این کار باید به بخش تریگرها برویم، سپس گزینه Form Submission type را انتخاب کنیم و یک فرم تریگر جدید برای ninja_forms از طریق form submissions تنها برای تعدادی از فرم ها ایجاد کنیم.

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

ایجاد تریگر فرم ارسال Form Submission

به Triggers بروید:

ایجاد تریگر فرم ارسال Form Submission

form submission را انتخاب کنید:

form submission

یک تریگر جدید برای ninja-form با form submission بسازید (برای بعضی فرم ها)

یک تریگر جدید برای ninja-form با form submission بسازید

ارسال داده Child Frame به Parent Frame با استفاده از postMessage 

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

برای انجام این کار ما به یک تگ ارسال کننده نیاز داریم برای postMessage که می خواهیم از آن استفاده کنیم. در مورد ما، این اتفاق در مورد فرم های ثبت نامی خواهد افتاد. ما می خواهیم این کار را با استفاده از یک تگ شخصی سازی شده HTML انجام دهیم، برای انجام این کار می خواهیم از یک Syntax استفاده کنیم که پیش از این ایجاد کرده ایم که پایین تر برای شما قرار داده ایم.

ارسال داده Child Frame به Parent Frame با استفاده از postMessage

چیزی که باید در این قسمت وارد کنید در واقع مانند متد لایه بندی داده های .push است که شما یک رویداد را قرار می دهید و سپس اطلاعاتی که می خواهید را درون آن قرار می دهید. شما می توانید انواع مختلفی از جفت های Key-Value را قرار دهید، همه این ها در نهایت به فریم مادر ارسال خواهند شد.

در مثال ما، ما یک فرم ثبت نام داریم، و ما یک نقطه اطلاعاتی داریم که می گوید که این فرم تماس با ما می باشد. بگذارید فرم کلیدی مان را در این مورد، که یک رویداد است، به نام iFrameformsubmit به خاطر بسپاریم. حال بهتر است که آن را به تریگر متصل کنیم.

ما می توانیم این پروسه را ذخیره کنیم،  Preview in debug mode خود را دوباره بارگذاری کنیم، به فریم خود در iFrame برگردیم. فعلاً فریم کنونی خود را نادیده بگیرید، و تمرکز خود را معطوف این فریم کنید که درون داده های آزمایشی ماست و ببینید که آیا چیزی ظاهر می شود یا خیر.

می بینیم که GTM.Formsubmit ما اتفاق افتاده است، تگ ما شلیک شده است، و صفحه دوباره بارگذاری می شود، پس داده ها الان می توانند به فریم مادر فرستاده شوند، و در این فریم مادر، هیچ اتفاقی نمی افتد، چرا که ما در واقع باید یک Listener ایجاد کنیم که به هر نوع postMessage گوش دهد.

ساخت a Listener در اکانت تگ منیجر مادر به Listen برای postMessage از Child Frame 

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

ساخت a Listener در اکانت تگ منیجر مادر به Listen برای postMessage از Child Frame

برای جواب دادن این کار، باید آن را برروی صفحه درست پیاده سازی کنیم. می توانید اگر می خواهید با All Pages ادامه دهید، اما همچنین می توانیم مشخص کنیم که می خواهیم تنها به postMessageهای صفحه iFrame ما گوش داده شود. پس بیایید این کار را انجام دهیم و Page View را در مسیری قرار دهیم که شامل iFrame می شود.

بیایید این پروسه را Save کنیم، Preview in debug mode را دوباره بارگذاری کنیم، صفحه خود را دوباره بارگذاری کنیم، و حال می بینیم که گوش دهنده postMessage ما فعال شده است. بیایید دوباره این کار را تکرار کنیم و داده های آزمایشی خود را قرار دهیم، و می بینیم که یک iFrameformsubmit داریم.

این iFrame اینجا، دوباره بارگذاری می شود، اما همچنان فریم اصلی خود را داریم، فریم مادر ما باز می شود، و می بینیم که اینجا یک iFrameFormSubmit بوده است.

هیچ چیزی برروی این شلیک نمی شود چرا که هنوز هیچ تگی را وصل نکرده ایم، اما چیزی به سمت لایه های اطلاعاتی روانه شد و این دقیقاً داده هایی بود که ما آماده کرده بودیم. ما یک رویداد داریم، به صورت iFrameFormSubmit. ما داده های postMessage که در یک شی تو در تو قرار دارد، بنابراین باید متغیر مناسبی را ایجاد کنیم که داده های خود را بدست آوریم، اما ما همه چیز مورد نیاز برای شلیک کردن یک تگ به گوگل آنالیتیکس در اختیار داریم.

ساخت یک تگ گوگل آنالیتیکس برای فرستادن داده های iFrame به گوگل آنالیتیکس

ما می توانیم به اکانت گوگل تگ منیجر مادر خود برویم و به عنوان مثال یک تگ رویداد گوگل آنالیتیکس برای فرم های ثبت نامی بسازیم. ممکن است فکر کنید که این کار تنها برای iFrame هاست، اما می توانید این تگ ها را بسیار انعطاف پذیر ایجاد کنید، و این کار بسیار اهمیت دارد چرا که شما با این کار داده های لازم و قابل دسترس را در لایه های اطلاعاتی خواهید داشت. پس بیایید به سراغ تگ جهانی آنالیتیکس خود برویم. ما به صورت پیشفرض تنظیمات متغیر را انجام داده ایم و می خواهیم یک رویداد بفرستیم.

ساخت یک تگ گوگل آنالیتیکس برای فرستادن داده های iFrame به گوگل آنالیتیکس

حال در این Label، می خواهم که این اطلاعات را از این فرم ما، که فرم ارتباط با ما می باشد ارسال کنم. چطور این کار را انجام دهیم؟ باید متغیر datalayer مناسب را ایجاد کنیم، بنابراین می خواهیم یک متغیر مناسب برای لایه های اطلاعاتی برای فرم خود را ایجاد کنیم. این یک متغیر Data layer است و از آنجایی که درون یک شی است، باید نشانه گذاری نقطه ای صحیحی داشته باشیم، نتیجه کار باید postMessage.Data.form باشد. بیایید این را سیو کرده و تریگر خود را تنظیم کنیم.

مطمئن شوید که نرخ تبدیل iFrame رویداد شما به گوگل آنالیتیکس فرستاده شده باشد

حال که تریگر ما برای رویداد شخصی سازی شده ما شلیک می شود که در واقع iFrameFormSubmit بود، بنابراین در بخش تنظیمات نیز ما از این موضوع برای رویداد شخصی سازی خود استفاده می کنیم، یعنی iFrameFormSubmit.

بیایید این را سیو کنیم، preview and debug mode را دوباره بارگذاری کنیم، و تمام این عملیات را دوباره تکرار کنیم. حال تگ گوگل آنالیتیکس رویداد ما شلیک شده است و همچنین در گزارش های Real Time شما نیز نشان داده می شود که با موفقیت داده ها ارسال شده اند.

مطمئن شوید که نرخ تبدیل iFrame رویداد شما به گوگل آنالیتیکس فرستاده شده باشد

این شیوه ای است که با استفاده از آن می توانیم اطلاعات را از یک iFrame داخلی به فریم مادر فرستاده و سپس این داده ها را به ابزارهای بازاریابی دیگر مانند گوگل آنالیتیکس ارسال کنیم. فراموش نکنید که اگر از نتیجه این کار راضی هستید، آن را به عنوان یک ورژن GTM ثبت کنید. تبریک می گوییم، زمانی که این پروسه پیاده سازی شود، باید بتوانید با موفقیت تبدیل ها را از iFrame با استفاده از گوگل تگ منیجر ردیابی کنید.

جمع بندی

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

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

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

مطالب مرتبط