دیتالیر یه بخش کلیدی از گوگل تگ منیجر از نظر جمعآوری و مدیریت دادههای وبسایت بشمار میره. روش استاندارد برای ارسال اطلاعات به این لایه، دیتالیرپوش هست که باعث میشه اطلاعات برای تو یا دولوپر قابل استفاده بشه.
ولی اگه دیتالیرپوش سمت تو کار نکرد چی؟ این مقاله دلایل رایج اینکه چرا دیتالیرپوشت ممکنه کار نکنه رو بررسی میکنه و راهحلهای احتمالیش ارائه میده. بیایم شروع کنیم!
کدهایی که نوشتی خطای تایپی داره
برای شروع دیباگ دیتالیر، حالت پریویوی گوگل تگ منیجر رو فعال کن. راه ساده ترش اینه که به کانتینر GTMت بری و "Preview" رو از گوشه بالا-راست انتخاب کنی.
بعد از فعال شدن پریویومود، توی مرورگرت developer tools رو با راستکلیک روی صفحه و انتخاب "Inspect" باز کن، بعد به تب Console برو.
تو تب کنسول، میتونی عملکرد دیتالیرپوش() رو با تایپ کردن این عبارت تست کنی: dataLayer.push({‘event’: ‘test’})
تو تب کنسول، مهم نیست "true" یا "false" رو ببینی. توی تب Tag Assistant، این ایونت بهعنوان یه ایونت توی سایدبار سمت چپ ظاهر میشه.
این رفتار موردانتظاره، ولی میخوایم بفهمیم چی باعث رفتار غیرمنتظره دیتالیر میشه. یه دلیل خیلی رایج اینه که خطای تایپی تو کدهات داری. خطاهایی که باید مراقبشون باشی از جمله:
- حروف بزرگ و کوچیک: کد به حروف حساسه، پس باید مطمئن شی از حروف درست استفاده میکنی: همه حروف کوچک باید باشن، جز "L"، مثلاً اینجا "dataLayer". اگه توی کدهات از datalayer.push استفاده کنی، کار نمیکنه.
-نبود کرلی براکت { }: باید مطمئن شی اطلاعات ایونتت همه داخل براکتهای این شکلی { } باشن و درست باز و بسته شده باشن، مثلاً {'event': 'test'}. میتونی به این سورس گوگل درباره سینتکس ارسال ایونت از طریق دیتالیر مراجعه کنی.
راهحل؟ کد دیتالیرپوش ایونتت رو دوبار چک کن. از کسی بخواه برات چکش کنه یا با ابزارهای AI مثل Gemini یا ChatGPT بررسی کن مشکلی دارن یا نه.
دیتالیر رو تغییر نام دادن
یه احتمال دیگه اینه که کسی که GTM رو تو سایتت نصب کرده، دیتالیر رو تغییر نام داده، شاید برای حفظ قواعد نامگذاری یکدست قبلی یا جلوگیری از تعارض با جاوااسکریپت های موجود.
برای فهمیدن اینکه آیا دیتالیر موقع نصب GTM تغییر نام داده شده یا نه، به کانتینر GTMت برو. روی آیدی کانتینرت کلیک کن و اسنیپت GTM که باید تو هر صفحه سایتت باشه رو میبینی.
داخل اون اسنیپت، معمولاً "datalayer" رو یه جاش میبینی. ولی تو هر لحظه از ستاپ GTM/GA4، ممکنه یه کسی اسم دیگهای بهش داده باشه.
برای چک کردن این قضیه، روی سایتت راستکلیک کن و "View page source" رو انتخاب کن.
بعد، "gtm.js" رو جستجو کن تا اسنیپت کد GTM رو پیدا کنی. چک کن عبارت "datalayer" رو داره یا تغییر نام داده شده. تو این مثال، فرض کنیم کسی اون رو به customDataLayer تغییر نام داده.
اگه تغییر نام داده شده، دیتالیرپوش کار نمیکنه. میتونی این رو تو تب Console مرورگر کروم (راستکلیک روی صفحه و انتخاب گزینه Inspect) با تایپ عبارت dataLayer.push({‘event’: ‘test’}) تو کنسول تست کنی. به تب پریویو برگرد، و میبینی که ایونت test اونجا نمایش داده نمیشه.
ولی اگه به صورت آزمایشی customDataLayer.push({'event': 'test'}) رو تو کنسول تایپ کنی (فرض کنیم عبارت dataLayer به customDataLayer تغییر نام داده شده باشه) و بعد به تب پریویو برگردی، ایونت test رو میبینی.
اینجا دو گزینه داری:
دیتالیر رو تو اسنیپت کد GTM به "dataLayer" برگردون (توصیه میکنم این مورد رو).
یا همه دیتالیرپوشهات رو به customDataLayer تغییر بدی.
یه کدی تو سایتت دیتالیر رو تغییرداده
اگه هیچکدوم از موارد بالا مشکلت رو حل نکرد، ممکنه یه کدی کاستوم تو وبسایتت دیتالیر رو تغییر داده باشه. این اتفاق وقتی میافته که اسنیپت کانتینر گوگل تگ منیجر (GTM) دیتالیر رو درست لود میکنه، ولی بعد یه کد دیگه ای تو سایتت هم سعی کنه دیتالیر رو ست کنه. وقتی این اتفاق بیفته، میتونه عملکرد GTM رو دچار اختلال کنه و جتی دیتالیر رو بهعنوان آرایه خالی ست کنه و مشکلاتی تو ترکینگت ایجاد کنه.
برای بررسی بیشتر این قضیه، میتونی روی سایتت راستکلیک کنی و "View page source" رو انتخاب کنی.
بعد عبارت، "=dataLayer" رو با زدن دکمه های control+F جستجو کن . اگه window.dataLayer = [] رو جایی ببینی (یا چیزی مشابه اون)، مشکلت رو پیدا کردی! این کد مستقیم دیتالیر موجود رو با یه آرایه خالی جایگزین میکنه، که قطعاً چیزی نیست که میخوای.
یه رویکرد بهتر اینه که این کد رو به این صورت دربیاری:
|| [] window.dataLayer = window.dataLayer این عبارت به کد میگه چک کنه که دیتالیر قبلاً تو صفحه وجود داشته یا نه. اگه وجود داره، از اون استفاده کنه. ولی اگه دیتالیری هنوز نیست، این خط کد یه آرایه دیتالیر خالی جدید میسازه.
در نتیجه هر وقت بعداً بخوای اطلاعات رو با دیتالیرپوش() به دیتالیر های قبلی اضافه کنی، همیشه یه کانتینر معتبر برای اون دادهها وجود داره و از خطاهایی که ممکنه بهخاطر نبود کانتینر پیش بیاد جلوگیری میشه.
زمانبندی
کدهایی که نوشتی ممکنه با چالش قرار گرفتن تو زمان و مکان اشتباه روبهرو بشن. وقتی کد دیتالیرپوش قبل از اسنیپت کانتینر GTM قرار بگیره، میتونه مشکلاتی ایجاد کنه چون داری سعی میکنی اطلاعاتی رو به دیتالیر بفرستی قبل از اینکه دیتالیر اصلا ایجاد شده باشه.
برای فهمیدن اینکه این مشکل واسه تو هم پیش اومده یا نه، توی مرورگرت developer tools رو باز کن. این کار رو با راستکلیک روی صفحه و انتخاب "Inspect" میتونی بکنی، بعد به تب "Console" برو.
اونجا فوراً خطایی میبینی که میگه "dataLayer is not defined". این خطا نشون میده یه تیکه کد سعی کرده دادهای رو به دیتالیر بفرسته، ولی آبجکت دیتالیر تو اون زمان در دسترس نبوده.
دو راهحل برای حل این مشکل داری:
راهحل 1: سادهترین راه اینه که با دولوپرها حرف بزنی تا کد ایونت دیتالیر رو زیر اسنیپت کانتینر GTM قرار بدن. این باعث میشه دیتالیر قبل از هر اطلاعاتی که بهش فرستاده میشه، درست شروع به کار کنه.
راهحل 2: اگه نیاز داری دیتالیرپوش ایونتت هرچه زودتر فعال بشه، باید دولوپرهات یه خط کد اضافی قبل از دیتالیرپوش ایونت(ها)ت اضافه کنن:
|| [] window.dataLayer = window.dataLayer
مثل این عبارت پایین:
این کد میگه: "اگه دیتالیر قبلاً وجود داره، از اون استفاده کن. اگه نه، یه دیتالیر خالی بساز" (مثل راهحل عنوان قبلی). این رویکرد باعث میشه حتی اگه کانتینر GTM کامل لود نشده و دیتالیر رو مقداردهی اولیه نکرده، یه دیتالیر خالی برای دریافت ایونت فرستادهشده وجود داشته باشه و از خطای "dataLayer is not defined" جلوگیری کنه.
iFrame
اگه وبسایتت یه صفحه والد یا parent داره که یه iFrame توش جاسازی شده و داری از دیتالیرپوش ایونتها تو اون iFrame استفاده میکنی، ولی فقط گوگل تگ منیجر (GTM) رو تو صفحه والد نصب کردی(و نه توی صفحه والد و iFrame)، اونوقت GTM تو صفحه والد نمیتونه به دیتالیرپوشهای داخل iFrame دسترسی پیدا کنه.
مطمئن نیستی با iFrame سروکار داری یا نه؟ راه ساده پی بردن به این قضیه اینه که راستکلیک روی iFrame احتمالی (یعنی جایی که میخوای با دیتالیرپوش ایونت رو دریافت کنی) داشته باشی، و اگه گزینه "Reload frame" رو ببینی. این یعنی با iFrame سر وکار داری.
برای گرفتن اطلاعات از دیتالیرپوش داخل iFrame، باید کارای بیشتری انجام بدی تا ارتباط بین صفحه والد و iFrame برقرار بشه. این معمولاً شامل استفاده از روش پیامرسانی کراس داکیومنت هست(که بهش () postMessage هم میگن). بعدا یه پست در این مورد میزارم.
برای یادگیری موارد بیشتر درباره ترکینگ iFrameها به دوره GTMم سری بزن.
نکات آخر
هرچند این مشکلات میتونن آزاردهنده باشن، نباید از فوایدی که کار با دیتالیر برای تحلیلت داره کم کنه.
هرچند عوامل زیادی میتونن روی عملکرد دیتالیر تأثیر بذارن، معمولاً مقصرای اصلی خطای تایپی تو کدهاس یا کدی تو سایتت که بهطور تصادفی دیتالیر رو تغییر داده. حل این مسائل اغلب مشکلات دیتالیرپوشت رو برطرف میکنه.
اگه با یه مشکل دیتالیرپوش روبهرو شدی که به روشی متفاوت از اونایی که لیست کردم حلش کردی، تجربهت رو تو کامنتها زیر به اشتراک بذار.
دیدگاه خود را بنویسید