16 راه حل کاربردی برای رفع مشکل Preview and Debug گوگل تگ منیجر

preview-and-debug-not-working

چجوری اشکالات حالت پیش نمایش گوگل تگ منیجر رو حل کنیم.

گوگل تگ منیجر چیست؟

گوگل تگ منیجر (Google Tag Manager) ابزاری رایگان می باشد که آن را با مخفف GTM می شناسیم، این ابزار به شما اجازه می دهد به مدیریت و هم چنین پیاده سازی کدهایی در راستای بهبود و بهینه سازی یک سایت و یا یک اپ در موبایل بپردازید بدون اینکه نیازی به تغییر کد داشته باشید. ارزش استفاده از گوگل تگ منیجر زمانی مشخص می شود که شما دارای تگ های فراوانی هستید و نیاز است که تمام این تگ ها را مدیریت نمایید، استفاده از این ابزار می تواند برای شما فضایی را فراهم سازد که تمام تگ ها را به راحتی در یک جا استفاده نمایید.

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

نصب و راه اندازی گوگل تگ منیجر بسیار راحت است در ویدئوی زیر می توانید نحوه راه اندزی آن را ببینید.

حالت پیش نمایش گوگل تگ منیجر

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

در ادامه 16 روش کاملا کاربردی برای حل مشکل عدم پیش نمایش(Preview and Debug) گوگل تگ منیجر ارائه خواهیم کرد که یقینا یکی از این روش ها مشکل تگ منیجر شما را حل خواهد کرد.

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

پس با این توضحیات به سراغ 16 روش کاربردی برای حل مشکل Preview and Debug گوگل تگ منیجر می رویم که ممکن است برایتان پیش بیاید.

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

بگذارید با یک مثال موضوع را توضیح دهم شما از یک دولوپر می خواهید که گوگل تگ منیجر را به وب سایت شما متصل کند و اسنیپ(Snippet )لازم را در سایت شما قرار دهد. پس از انجام کار مشاهده می کنید که مشکلی وجود دارد و آن این است که Preview  تگ منیجر و کنسول اشکال زادی آن به خوبی کار نمی کند، گویی Snippet  تگ منیجر اصلا به وب سایت متصل نشده و تغییراتی نشان داده نمی شود.

برای حل این مشکل از دو روش زیر برای حل آن می توانید استفاده کنید:

اولا: از افزونه کروم Tag Assistant Chrome extension  استفاده کنید این افزونه تمامی ابزارهای گوگل (گوگل آنالکتیکس، تگ منیجر،گوگل ادز و…. ) در یک صفحه بررسی می کند و بازخوردهای واقعی را به کاربر ارائه می کند.

دوما: کدهای اصلی وب سایت خود را بررسی کنید از این طریق می توانید ببینید اصلا تگ منیجر شما به درستی در سایت قرار گرفته یا خیر ؟ برای این کار کافیست دکمه Ctrl + U (برای کاربرانی که ازمک استفاده می کنند از دستور CMD + U استفاده کننده) را بزنید تا به سورس وب سایت خود دست پیدا کنید. و در این صفحه کد کانتیر گوگل تگ منیجر خود را می توانید مشاهد کنید اگر کد موجود نباشد به این معنی است که فرایند نصب درست نبوده و مجددا باید این کار را انجام دهید.

2. اشتباه در قرار دادن Container Snippetگوگل تگ منیجر

 اگر چه ممکن است این مسئله احمقانه به نظر برسد ولی نباید آن را نادیده در نظر بگیرید.به همین خاطر توصیه می کنیم به حساب گوگل تگ منیجر خود بروید بگوشه سمت راست بالای صفحه و container ID گوگل تگ منیجر خود را مجدد بررسی کنید و آن را با کدی که در سایت قرار داده اید بررسی کنید.

گوگل تگ منیجز و کانتر ان

3.شما حالت Preview and Debug گوگل تگ منیجر خود را در کانتیر اشتباهی فعال کرده اید

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

4.نگاهی به مروگر اکانت تگ منیجر و سایت خود بیندازید.

وقتی که وب حالت Preview and Debug تگ منیجر به درست فعال شود گوگل تگ منیجر کوکی های اختصاصی و ویژه ای از طریق مرورگر برای شما ارسال می کند تا بدون تغییر واقعی وب سایت بتوانید داده ها و اطلاعات را مشاهده کنید.

با این کار می توانید تغییراتی که در سایت شما اتفاق افتاده را مشاهد کنید. به همین دلیل هم رابط گوگل تگ منیجر که cookie تنظیم می کند و هم وب سایت که اطلاعات موجود در cookie را می خواند در مرورگرها پشتیبانی شود. و اطلاعات خوانده شود. به سه حالت زیر توجه کنید:

الف)  هم حساب گوگل تگ منیجر و هم وب سایت شما در تب مرورگر کروم پشتیبانی می شود (حالت بهینه که پیش نمایش کار می کند)

ب) حساب گوگل تگ منیجر در مرورگر کروم باز می شود اما وب سایت در تب خصوصی(پرایوت تب) و به صورت ناشناس باز می شودو به ابزارهای دیگر دسترسی نمی هد(حالت پیش نمایش تگ منیجر کار نمی کند)

ج) اکانت گوگل منیجر شما با مرورگر موزیلا فعال است ولی وب سایت در مرورگر کروم باز است(حالت پیش نمایش تگ منیجر کار نمی کند)

پس اطمینان حاصب کنید وب سایت و حساب تگ منیجر شما در یک مرورگر و در سطح عمومی (نه پرایوت) باشند.

5. مطمئن شوید مرورگر شما کوکی های شخص ثالث را قبول می کند

برخی از کاربران به دلیل مسائل امنیتی و حفظ حریم شخصی اجازه دسترسی کوکی ها به مرورگر خود را می بندند. و آن ها را غیر فعال می کنند .در بعضی موارد مرورگرها به صورت اتوماتیک دسترسی کوکی ها را غیر فعال می کند و اجازه ذخیره کردن کوکی ها را نمی دهد.  با توجه به نکته 4 و اهمیت کوکی ها مطمئن شوید 3rd party cookies یا کوکی های شخص ثالث مورد پذیرش مرورگر واقع می شود و شما دسترسی آن ها را محدود نکرده اید. چرا که بدون وجود کوکی ها نمی توانید حالت Preview and Debug تگ منیجر خود را مشاهده کنید.

پس شما باید دوکار مهم را انجام دهید:

اولا:در تنظیمات مرورگر خود کوکی های خود را فعال کنید؛ در اینجا می توانید لیستی از دستورالعمل های لازم برای فعال سازی کوکی ها را برای مرورگرهای مختلف مطالعه کنید.

دوما: می توانید کوکی های را غیر فعال کنید اما باید www.googletagmanager.com  به عنوان یک استثنا به مرورگر معرفی شود.

6.از افزونه کروم  Injector  تگ منیجر بدون فضای اضافی

اگر تا به حال از افزونه(extension) Tag Manager Injectorاستفاده نکرده اید همین الان باید از آن استفاده کنید. این کار تا حد زیادی سرعت و دقت کار شما را بالا می برد.

افزونه کروم  Injector  تگ منیجر

این افزونه تا حد زیادی باعث می شود run/preview کانتینر گوگل تگ منیجر بدون اضافه کردن کدهای جاوا اسکریپت نمابش داده شود. کافیست بعد از نصب افزونه کروم container’s ID خود را خود را به افزونه معرفی کنید.

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

 GTM – XXXXX” نادرست است (چون فضای خالی قبل از ایدی کانتینر تگ منیحر یا (container’s ID )وجود دارد)

“GTM – XXXXX” نیز به دلیل فضای فضای خالی بعد از ایدی نادرست است

“GTM-XXXXX” تنها گزینه درست است.

7. استفاده از افزونه Injector با چک کردن تنظیمات

یکی از شگفت انگیزترین ویژگی های این افزونه که صرفا برای وب سایت ها قابل استفاده است این کار نیاز به یک دامنه است که در بخش اینکلود دامین آن را وارد کنید.

فقط باید بدانید این تنظیمات را نباید با بی دقتی وارد کنید پس مطمن شوید قسمت های خالی و تنظیمات مربوطه را درست پر کرده اید.

7. ستفاده از افزونه Injector با چک کردن تنظیمات

 

8.سایت خود را رفرش کنید

اگر همه مراحل نصب گوگل تگ منیجر را درست رفته اید ولی Preview and Debug را نشان نمی دهد بهتر است یکبار سایت را رفرش کنید و دوباره چک کنید این اشتباه ممکن است بیشتر برای افرادی پیش بیاید.

9.حالت Preview and Debug تگ منیجر کلا صفحه سفید را نشان می دهد.

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


بنا بر سخنان  Simo Ahava، هنگامی که گوگل تگ منیجر پنل  Preview و Debug را در وب سایت بارگذاری می کند، ممکن است در صورت وجود فضای با نام مشابه با کدهای سایت تداخل های کوتاهی به وجود آید . به عبارت دیگر – اگر عناصر خاصی در وب سایت شما از همان استایل استفاده می کنند (به عنوان مثال (div class = “gtm-class-class” ، در هنگام Debug کنسول تگ منیجر ممکن است مشکل ایجاد شود.

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

گوگل تگ منیجر و اشکالات

 

10. Preview Panel بعد از 10 دقیقه و بعد از رفرش کردن ظاهر می شود.

چندین نفر در کامنت ها و پیام های خصوصی عنوان کردند؛ پنل Preview and Debug به صورت تصادفی در وب ظاهر نمی شود هرچند که هم کانتیر و هم صفحه وب سایت هر دو تازه (رفرش) شده اند. در واقع حدود 10 دقیقه طول می کشد تا پنل گوگل تگ منیجر شروع به کار کردن کند و این درحالی است که P.S  ارورهای جاوا اسکریپت در کنسول ثبت نمی کند.

هنوز علت این اشکال مشخص نیست ولی احتمال زیاد کوکی های علت اصلی این خطاها هستند. اما پاک کردیا غیر فعال کردن حافظه کش (disabling cache) می تواند به حل این مشکل کمک کند.

علاوه بر این روش برایان کوهن علت این روش را اینگونه توضیح می دهد: اخیر کروم نحوه کارکرد مکان را تغییر داده  است و این باعث شده که گوگل تگ منیجر ((GMT توانایی پاک کردن  gtm.js را با مشکل مواجه کرده است

این مسئله باعث شده که  که شما نسخه پیش نمایش gtm.js  نتوانید در همان لحظات اول ببینید و برای مشاهده کردن پنل حدود 15 دقیقه صبر کنید.

روش دیگری وجود دارد که در صورت استفاده از مرورگر کروم می توانید از آن استفاده کنید هرچند که یقینا سایر مرورگرها کارکردهای مشابهی دارند فقط باید آن ها را پیدا کنید. این روش به این صورت است که:

الف)در مرورگر کروم F12 را در Windows یا اگر سیستم شما مک هست Cmd + Opt + I را اعمال کنید.

ب)بر روی سه نقطه واقع در گوشه سمت راست(1) کلیک کنید و سپس گزینه تنظیمات(2) را بزنید.

گوگل تگ منیجر و رفع اشکالات آن

 

 ج) در مرحله بعد Network section را پیدا کنید و گزینه isable cache (while DevTools is open) تیک بزنید (تصویر زیر)

 

اصلاح گوگل تگ منیجر و رفع باگ های آن

در قدم اخر هم صفحه مرورگر و هم تب گوگل تگ منیجر خود ر ا رفرش کنید تا بتوانید تغییرات را مشاهد کنید.

11. نمی توان Preview and Debug Console را تغییر اندازه داد

کنسول Preview and Debug با کشیدن مرز بالا به بالا یا پایین می توان به راحتی تغییر اندازه داد این کار برای خیلی ها کاربردی است اما گاها نمی توان اندازه کنسول را به این روش تغییر داد برای حل این مشکل(Clearing browser cookies) پاک کردن کوکی های مرورگر و حافظه نهان(cache) ، راه حلی بود که به من کمک کرد.

12 .AdBlockerو افزونه های دیگر گوگل تگ منیجر شما را بلاک می کند.

این مسئله یکی از مسائل مهم دنیای وب امروز است.اما مسدودکننده های تبلیغات و محتوا دنیای تحلیلگران وب را با مشکل مواجه ساخته است. به عنوان مثال Firefox ، ردیابی محافظت خارج از نسخه را ارائه می دهد و به طور پیش فرض Google Analytics را مسدود می کند.

از سوی دیگر افزونه ی کروم Ghostery و  AdBlock Pluمسدود کردن گوگل تگ منیجر را اسان کرده اند. به هین خاطر اگر از این محدود کنندها استفاده می کنید حتما آن ها را غیر فعال کنید.و حتی از مرورگرهایی مانند داک داک گو و گوستری و… استفاده نکنید. پس اگر می خواهید debug panel مشاهد کنید استفاده از این محدود کننده هایی که ذکر شد کنار بگذارید.

13. CloudFlareبر روی بالا آمدن GTM.JS تاثیر می گذارد

شبکه توزیع محتوا یا CDN برای ذخیره کردن محتوای ثابت در سایتها از طریق یک شبکه گسترده جغرافیایی طراحی شده است به همین خاطر محتوای استاتیک سایت با سرعت بیشتری به کاربر نمایش داده می شود. در نتیجه مدت زمان کمتری برای بالا امدن سایت نیاز است.  اما باید بدانید که کلودفلر که یکی از مهم ترین و بزرگترین ارائه دهنده های CDN در جهان است کدهای جاوا اسکریپت را می کشدو تداخخل ایجاد می کند و در این بین  کتابخانه js گوگل تگ منیجر هم از این داستان مستثنی نیست. به هیمن خاطر توصیه می شود در حین استفاده از کلودفلر ویژگی موسوم به Rocket Loader غیرفعال کنید و در طی این مسیر از توسعه دهنده وب خود استفاده کنید.

14. خط مشی امنیتی محتوا (CSP )در حین بارگزاری اسکریپت تگ منیجر را بلاک می کند.

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

اگر   Preview and Debugبه حالت همیشگی و نرمال ظاهر نمی شود و در کنسول آن با خطایی با عبارت  Refused to load […] because it violates the following Content Security Policy directive را نشان می هد.این به معنی عدم تایید اسکریپت های تگ منیجر شماست و باید ان را حل کنید.

باید بدانید گوگل تگ منجر در موارد مانند inline scripts, inline eval به شما دسترسی های لازم را می دهد و این وظیفه شماست که  تغییراتی که در عکس زیر می بینید را در  سیاست امنیت محتوای خود پیاده سازی کنید تا بتوان با اسکریپت های تگ منیجر همخوانی داشته باشد.

15.کارکردن با حالت پرایوت Firefox

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

16.کدهای تگ منیجر در هنگام کپی/پیست کردن  به صورت تصادفی تغییر می کنند.

این وضعیت زمانی اتفاق می افتد شما می خواهید container code تگ منیجر خود را به توسعه دهنده وب خود ارسال کنید. (برای مثال کد را در ورد یا گوگل داکس ذخیره کنید و سپس ارسال کنید)

اما باید بدانید کوچکترین تغییر در حد فاصله ثابت بودن و معناداری کدها را تغییر می دهد به همین خاطر گرچه در ظاهر همان کدهای موجود در container  تگ منیجر است اما کار نمی کند و Preview and Debug  ظاهر نمی شود.

برای مثال در تصویر زیر می بینید که یک توسعه دهنده وب کد تگ منیجر خود را کپی کرده است.با این حال اگر به دقت به آن نگاه کنید می بینید که در فرایند کپی پیست اشتباه کرده است. در جاوا اسکریپت apostrophes باید از “، استفاده شود. اما از ” استفاده شده و این باعث تغییر کدها شده است.

16.کدهای تگ منیجر در هنگام کپی/پیست کردن  به صورت تصادفی تغییر می کنند. و گوگل تگ منیجر

یک راه‌حل جایگزین برای کپی کردن کد و چسباندن آن به سایت  pastebin.com است برای این کار کافیست کد را کپی کرده و در باکس قرار دهیدسپس لینک را برای دولوپر ارسال کنید.

نتیجه گیری؛حالت Preview در گول تگ منیجر کار نمی کند؟

حالت پیش نمایش Preview تگ منیجر این امکان را فراهم می کند بتوانید وضعیت وب سایت را مرور کنید.

به وسیله  previewing and debugging می توانید از قرار دادن برچسپ و تگ ها به صورت زنده در وب سایت خودداری کنید و ریسک کمتری به کسب وکار آنلاین خود تحمیل کنید در این نوشته تلاش شده 16 روش کاربردی برای حل مشکل کار نکردن previewing and debugging. ارائه شود اگر شما هم مشکلی در این زمینه دارید در زیر همین کامنت مطرح کنید؛ تیم ما در کمترین زمان ممکن به آن پاسخ خواهد داد.

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

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