هرچند این موضوع ممکنه برای بعضی‌هاتون خیلی ابتدایی به نظر بیاد، یادت باشه که باید نکات ظریفی رو در نظر بگیری. تو این پست وبلاگی، چند روش برای نصب گوگل تگ منیجر (GTM) روی وب‌سایت رو توضیح میدم و مزایا و معایب هر روش رو شرح میدم.اگه میخوای چک کنی GTM درست نصب شده یه پست وبلاگی مجزا در این مورد دارم.
اگه قبلاً GTM رو نصب نکردی، اول باید یه اکانت گوگل تگ منیجر و یه کانتینر بسازی.
ساخت اکانت گوگل تگ منیجر
برای شروع کار، بیایم یه حساب GTM بسازیم. به وب‌سایت رسمی گوگل تگ منیجر برو و روی دکمه اصلی Start for Free کلیک کن تا یه اکانت جدید گوگل تگ منیجر بسازی.
مثل هر محصول دیگه گوگل، از همون جیمیلت برای دسترسی به تگ منیجر استفاده میکنی. پس اگه قبلاً تو "Gmail" (گوگل ادز، گوگل آنالیتیکس و غیره) بودی، به‌طور خودکار به گوگل تگ منیجر وارد می‌شی. اگه نه، اول یه حساب جیمیل بساز.
بعد از ورود، ازت خواسته میشه یه اکانت جدید گوگل تگ منیجر و یه کانتینر جدید بسازی.
یه اکانت گوگل تگ منیجر مثل یه اکانت گوگل آنالیتیکس کار می‌کنه. معمولاً هر اکانت مختص یه شرکت/بیزینس/مشتری هست، در حالی که یه کانتینر معمولاً برای یه وب‌سایت یا اپلیکیشنه. یه کانتینر می‌تونه شامل تعداد زیادی تگ، تریگر و وریبل باشه.
با این حال، اگه چند وب‌سایت متعلق به یه بیزینس هستن و ساختارشون خیلی شبیهه (و علاوه بر اون پیاده‌سازی ترکینگشون هم مشابهه)، میتونی از یه کانتینر برای چند وب‌سایت استفاده کنی.
کد نصب گوگل تگ منیجر رو کجا پیدا کنم؟
گوگل تگ منیجر یه کد دقیق و دستورالعمل‌هایی برای محل قرارادان اون کد توی به وب‌سایتت فراهم می‌کنه. دو مکان هست که میتونی اون کد رو پیدا کنی:
با کلیک روی آیدی کانتینر (که کنار دکمه‌های Publish و Preview قرار داره)
یا با رفتن به Admin > Account > Container > Install Google Tag Manager
هر کدوم از این مسیرها رو که بری دستورالعمل‌هایی برای نصب کد گوگل تگ منیجر روی وب‌سایتت + تکه‌کدهایی که باید به سایت اضافه کنی رو میبینی.
اضافه کردن کد کانتینر گوگل تگ منیجر به وب‌سایت
دستورالعمل‌ها رو دنبال کن و کد اول (که بین تگ‌های <script> قرار داره) رو جایی بین تگ‌های <head> وب‌سایتت قرار بده. این کد بخش کلیدی کارمون هست. این کد به صفحه‌ات می‌گه که کانتینر گوگل تگ منیجرت رو به‌صورت غیرهمزمان (asynchronous) لود کنه، یعنی بقیه صفحه می‌تونه در حالی که گوگل جادوش رو انجام میده، لود بشه.
این لود "غیر همزمان" یعنی اینکه کانتینر GTM مستقل لود میشه، تو یه مسیر جدا از بقیه محتوای وب‌سایتت. اگه به هر دلیلی سرور GTM کند عمل بکنه، مانع نمایش متن و تصاویرت نمی‌شه. این باعث میشه که پیاده‌سازی ترکینگت به یه گلوگاه و معضل تبدیل نشه که تجربه کاربری رو با کند کردن لود صفحه به خطر بندازه. البته، محتوای GTM هنوز می‌تونه یه مقدار تأثیر منفی روی سرعت لود داشته باشه.
با این حال، بر اساس تجربه، عملکرد کد تگ منیجر بهتر از اضافه کردن کدهای ترکینگ GA به صورت مستقیم به سورس کد وب‌سایته.
اینجا یه مثال از تگ <head> یه وب‌سایت آوردم که میتونی کد <script> گوگل تگ منیجر رو اضافه کنی.
این کد بالا رو بردار و بعد از تگ head باید اضافه ش کنی.
کد دوم گوگل تگ منیجر:
کد دوم گوگل تگ منیجر(<noscript>) باید بلافاصله بعد از تگ <body> قرار بگیره. این به‌عنوان یه نسخه پشتیبان کار می‌کنه و بهت اجازه میده کاربرهایی که جاوااسکریپت ندارن رو ترکینگ کنی. تگ <noscript> به مرورگر می‌گه اگه کاربر جاوااسکریپت رو غیرفعال کرده، یه نسخه iframe از کانتینر گوگل تگ منیجر رو توی صفحه رندر کنه.
نکته مهم: هرچند میتونی هر دو کد رو فقط تو <body> قرار بدی، نباید هر دوی این کدها رو تو <head> بذاری. مثل اینکه قبلاً گفته شد، بخش <noscript> یه iframe رندر می‌کنه که تو <head> مجاز نیست، وگرنه HTML وب‌سایتت نامعتبر میشه.
پس گزینه‌های ممکن اینه:
_کد <script> رو توی تگ <head> بزاری و کد <noscript> رو به تگ <body> اضافه بکنی
_هر دو کد <script> و <noscript> تو تگ <body> قرار بگیرن
یه چیز دیگه که باید ذکر بشه اینه که بخش <noscript> کد گوگل تگ منیجر ضروری نیست. فقط وقتی بهش نیاز داری که بخوای بازدیدکننده‌هایی که مرورگرشون بدون جاوااسکریپت فعال هست (که بخش خیلی کوچیکی از ترافیک وب رو شامل میشه) رو ترکینگ کنی یا بخوای مالکیتت روی "پراپرتی سرچ کنسول" رو تأیید کنی.
هرچند اضافه کردن تکه‌کد <noscript> توصیه‌شده، ولی مهمه که محدودیت‌هاش رو بفهمی. چون این کد فقط وقتی کار می‌کنه که جاوااسکریپت تو مرورگر کاربر غیرفعاله، قابلیت‌های ترکینگش حداقلیه. می‌تونه بهت بگه یه صفحه بازدید شده، ولی تعاملات پیچیده‌تر مثل کلیک روی دکمه، ارسال فرم یا پخش ویدئو رو نمی‌تونه ترکینگ کنه. اکثریت داده‌هات از تگ اصلی <script> میاد، پس زیاد نگران نباش اگه پلتفرم وب‌سایتت (مثلا نسخه های خاصی از مجنتو) قرار دادن بخش <noscript> رو سخت کرده.
چک کن پلاگین نصب GTM دردسترسه یا نه (وردپرس)
اگه از یه سیستم مدیریت محتوای محبوب (CMS) مثلا وردپرس استفاده میکنی که اجازه استفاده از پلاگین‌ها رو میده، احتمالاً پلاگینی رو بتونی پیداکنی که گوگل تگ منیجر رو برات نصب کنه. فقط کافیه آیدی کانتینر گوگل تگ منیجرت رو اضافه کنی.
چند مثال از این پلاگین‌ها:
_برای وردپرس – همیشه افزونه "GTM4WP" رو پیشنهاد میدم
-مجنتو هم چندتا پلاگین گوگل تگ منیجرداره
_تو شاپیفای هم چندتا گزینه خوب پیدا میکنی.
این باعث صرفه جویی تو وقتت میشه. بعضی پلتفرم‌ها هم اینتگریشن داخلی واسه گوگل تگ منیجر دارن (مثل WIX).
با این حال، اگه تصمیم بگیری نصب دستی رو پیش ببری (با یا بدون کمک دولوپر کار رو ادامه بدی)، این موارد رو باید بدونی:
چرا باید کد گوگل تگ منیجر رو تو بخش head قرار بدم؟
هرچند این حیاتی نیست، ولی خیلی توصیه میشه که بخش <script> کد GTM رو تو <head> وب‌سایتت بذاری.
چرا؟ برای ترکینگ بهتره. هرچه تکه‌کد تگ منیجر تو صفحه بالاتر باشه، سریع‌تر لود میشه. تو نسخه قدیمی‌تر گوگل تگ منیجر، پیشنهاد می‌شد تکه‌کد تو تگ <body> قرار بگیره، ولی این ممکن بود کاربرهایی که قبل از لود تگ <body> (به دلیل سرعت کند صفحه) سایت رو ترک می‌کردن رو نتونه تشخیص بده.
اگه وب‌سایتت خیلی سنگین باشه، ممکنه بیشتر از چند ثانیه طول بکشه تا گوگل تگ منیجر تو <body> شروع به لود کنه، ولی تو <head> خیلی سریع‌تر شروع میشه، پس میتونی بازدیدکننده‌های بیشتری رو شکار کنی و ببینی چطور رفتار می‌کنن.
این بهت اجازه میده درصد ترافیکی که قبل از لود کامل صفحه از سایت می‌پره (Bounce Rate) رو بهتر شناسایی کنی.
یادت باشه، هرچه کدهای ترکینگت پایین‌تر باشن، دیرتر فعال می‌شن.
چک کردن عملکرد گوگل تگ منیجر
بعد از پیاده‌سازی کد GTM تو یه صفحه، باید مطمئن شی که درست نصب شده باشه. چند گزینه داری که میتونی انتخابشوت کنی.
- روی پس‌زمینه وب‌سایتت کن و View page source رو بزن. قدم بعدی پیدا کردن کد تگ منیجر (با جستجوی gtm.js) هست.
-حالت پیش‌نمایش و دیباگ رو فعال کن و چک کن آیا پاپ اپ پریویو روی صفحه ظاهر میشه. دکمه Preview رو تو گوشه بالا-راست رابط GTM بزن، بعد به وب‌سایت برو (صفحه رو رفرش کن) و ببین آیا پنل پیش‌نمایش و دیباگ گوگل تگ منیجر تو پایین صفحه ظاهر نیشه یا نه.
نیاز به داده‌های کاستوم تو هر صفحه داری؟ ازدیتالیر استفاده کن
وقتی کد گوگل تگ منیجر رو تو وب‌سایتت قرار می‌دی، به‌طور خودکار یه دیتالیر می‌سازه.
دیتالیر مثل یه لایه مجازی تو وب‌سایته که شامل دیتاپوینت های مختلفه (فهمیدی؟ به همین دلیل بهش دیتالیر می‌گن). با کمک دیتالیر، گوگل تگ منیجر می‌تونه داده‌ها رو بخونه، داده هایی رو به دیتالیر اضافه کنه و بین وب‌سایتت و ابزارهای ترکینگ دیگه دیتا رو منتقل کنه.
اگه میخوای وقتی صفحه لود میشه داده‌ای به لایه داده بفرستی، باید اون داده رو بالای کد گوگل تگ منیجر بذاری. مثل این مورد:
اگه مهارت کدنویسی نداری، این کار باید توسط دولوپر انجام بشه (چون فقط کپی-پیست جواب نمی‌ده). باید یه لاجیک نوشته بشه که اطلاعات داینامیک رو به دیتالیر اضافه کنه (مثلاً اگه کاربری لاگین کنه، دسته بندی مشتری به روش درستی به دیتالیر اضافه بشه).
دیتالیر مفهومی نیست که برای مبتدی‌ها راحت باشه. پس اگه این بخش برات گنگه، نگران نباش. همه همین‌طور بودن.
اشتباهات رایج
نصب گوگل تگ منیجر معمولاً یه فرآیند شفاف و راحته، ولی چند اشتباه رایج می‌تونه باعث سردرگمی بشه و مانع کار درست GTM بشه. اینا شایع‌ترین اشتباهایی هستن که دیدم:
#1. به‌هم‌ریختن گیومه‌ها '. وقتی مارکتر کد کانتینر GTM رو می‌گیره و به دولوپرها میده، اغلب از ویرایشگرهای متنی مثل مایکروسافت ورد یا گوگل داکس استفاده می‌کنه. این ویرایشگرها گیومه‌ها رو تو کد به‌هم می‌ریزن و کد رو خراب می‌کنن. یه مثال از گیومه‌های اشتباه آوردم:
برای همین وقتی کد تگ منیجر رو واسه دولوپر می‌فرستم، معمولاً از ویرایشگرهای متنی ساده یا سایت هایی مثل github یا pastebin استفاده می‌کنم.
#2. اضافه نکردن تکه‌کد کانتینر به همه صفحه‌ها. نصب GTM فقط تو صفحه اصلی کفایت نمیکنه. گوگل تگ منیجر فقط تو صفحه‌هایی کار می‌کنه که روشون نصب شده باشه. پس باید تو همه صفحه‌ها اضافه بشه. بیشتر وب‌سایت‌های مدرن این کار رو برات انجام می‌دن (وقتی کد رو تو یه جای واحد می‌ذاری و بعد تو همه صفحه‌ها استفاده میشه) ولی هنوز باید این مورد رو چک کنی.
سؤالات رایج
#1. می‌تونم بخش <noscript> رو جای دیگه‌ای جز بعد از تگ <body> قرار بدم؟
بله، میتونی.
این معمولاً وقتی اتفاق می‌افته که با سیستم‌های مدیریت محتوای (CMS) خاصی کار میکنی که دسترسی مستقیم به سورس وب‌سایت رو ممنوع می‌کنن و فقط اجازه می‌دن کدهای ترکینگ رو تو یه فیلد اختصاصی پیست کنی. همه محتوای اون فیلد در انتهای اسکریپت HTML وب‌سایت قرار می‌گیره.
هرچند توصیه نمی‌شه، میتونی هر دو کد <script> و <noscript> گوگل تگ منیجر رو تو بخش <body> بذاری، مثل مورد پایین. اگه قصد داری یا الان از GTM برای اجرای A/B تست استفاده میکنی، حتماً باید تکه‌کد بالایی رو تو <head> بذاری تا تست هات بهتر اجرا بشن.
ولی اگه فقط میخوای از ترکینگ بیسیک گوگل آنالیتیکس (یا چیزی مثل اون) استفاده کنی، مشکلی نیست و میتونی هر دو کد <script> و <noscript> گوگل تگ منیجر رو تو بخش <body> بذاری.
ولی یادت باشه، هرچه کدهای ترکینگت تو کدهای سایتت پایین‌تر باشن، تگ‌های ترکینگت دیرتر فعال می‌شن.
#2. می‌تونم بخش <noscript> رو حذف کنم و فقط از <script> استفاده کنم؟
بله.
اگه به کاربرهایی که جاوااسکریپت رو کامل غیرفعال کردن اهمیت نمی‌دی، میتونی بخش <noscript> رو کامل حذف کنی. یادت باشه: گذاشتنش تو تگ HEAD باعث خراب شدن کد HTML میشه چون یه iframe نباید اونجا باشه.
باید یا بخش <noscript> تگ منیجر رو تو <body> بذاری یا اصلاً ازش استفاده نکنی.
#3. چند سال پیش GTM رو نصب کردم؛ هر دو بخش <script> و <noscript> تو <body> هستن. مشکلی داره؟
نه، مشکلی نداره.
همونطور که قبلاً گفتم، تا اواخر ۲۰۱۶، توصیه گوگل این بود که کل کد گوگل تگ منیجر تو <body> قرار بگیره. این هنوز جواب میده.
ولی یادت باشه که ممکنه بخشی از داده‌های ترکینگت رو از دست بدی چون GTM (که تو <body> قرار داره) کمی دیرتر از کدهایی که تو <head> هست شروع به لود می‌کنه.
پس اگه وقت و نیروی کار لازم رو داری، حتماً پیشنهاد می‌کنم بخش <script> رو به تگ <head> منتقل کنی.
نکات پایانی
نکته پایانی من این هست: فقط دستورالعمل‌های گوگل رو دنبال کن.
بهترین روش توصیه‌شده برای نصب کد گوگل تگ منیجر اینه که بخش <script> رو تو <head> وب‌سایتت و بخش <noscript> رو تو <body> (ترجیحاً بلافاصله بعد از تگ <body>) بذاری.
این باعث میشه که تگ‌های بازاریابی تو GTM با کمترین از دست دادن داده، سریع‌تر فعال بشن.
هرچه مجل کد گوگل تگ منیجر پایین‌تر باشه، تگ‌هات دیرتر فعال می‌شن. نتیجه‌ش اینه که ممکنه بخشی از داده‌هات رو از دست بدی.
اگه از یه سیستم مدیریت محتوای رایج مثل وردپرس برای اجرای وب‌سایتت استفاده میکنی ، دنبال پلاگین‌های آماده باش که با چند کلیک گوگل تگ منیجر رو برات نصب کنن.
دیدگاه خود را بنویسید