آنچه در این مقاله خواهید خواند:
در این مقاله ۲ روش نصب و راه‌اندازی گوگل تگ منیجر(Google Tag Manager) بر روی سایت را به صورت گام به گام آموزش می‌بینید. روش اول نیاز به دسترسی به فایل‌های سایت روی هاست دارد و شما باید از قبل آدرس هاست به همراه یوزر(User) و پسورد(Password) را داشته باشید. اما در روش دوم که برای سایت‌های وردپرسی مناسب است، از طریق نصب افزونه (Plugin)، تگ منیجر راه‌اندازی می‌شود.
در ابتدا لازم است وارد اکانت تگ منیجر شوید و از تب(Tab) Admin بخش Install Google Tag Manager کدهای قرار گرفته در آن را ذخیره کنید و با روش‌هایی که در ادامه مقاله گفته شده، تگ منیجر را راه‌اندازی کنید.
ابتدا روی سیستم نرم افزار Filezilla را دانلود و نصب کنید. با کمک این نرم افزار به راحتی و با سرعت به هاست خود دسترسی خواهید داشت. اگر سایت وردپرسی است می‌توانید فایل Header.php را در مسیر زیر بیابید:
wp-content --> theme --> (نام تم ورد پرسی نصب شده روی سایت) --> header.php
فایل را در یک ویرایشگر مثل Visual Studio باز کنید و کدهای تگ منیجر را در ابتدای تگ <head> و <body> قرار دهید.
کد بخش اول را در ابتدای تگ <head> قرار دهید:
<!-- Google Tag Manager -->(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-{این قسمت باید کد اختصاصی شما قرار گرفته باشد}');<!-- End Google Tag Manager -->
کد بخش دوم را ابتدای تگ <body> قرار دهید:
<!-- Google Tag Manager (noscript) --><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-{این قسمت باید کد اختصاصی شما قرار گرفته باشد}"height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!-- End Google Tag Manager (noscript) -->
فایل را ذخیره کنید. تغییرات روی فایل header.php قرار گرفته است.
اگر به اطلاعات هاست دسترسی ندارید تا به صورت ریموت تغییراتی را در فایل Header.php ایجاد کنید، وارد پنل ادمین وردپرس شده و افزونه Insert Headers and Footers by WPBeginner را دانلود و نصب کنید.
سپس از قسمت تنظیمات (Setting) وردپرس وارد افزونه شوید. در قسمت Scripts in Header کد بخش اول را در آن قرار دهید. در قسمت Scripts in Body کد بخش دوم را بگذارید و تنظیمات را ذخیره کنید.
در پیشخوان وردپرس از طریق مسیر زیر به فایل header.php دسترسی ساده‌ای خواهید داشت.
نمایش ---> ویرایشگر پرونده پوسته ---> انتخاب پوسته برای ویرایش ---> انتخاب فایل سربرگ پوسته (header.php)
در این آدرس دسترسی به فایل header خواهید داشت و می‌توانید کدهای مربوط به تگ منیجر را قرار دهید.
آیا تگ منیجر(Tag Manager) روی سایت نصب است؟ چطور بفهمیم تگ منیجر روی سایت نصب است؟ با این ۳ روش می‌توان از نصب بودن و درست کار کردن تگ منیجر مطمئن شد.
روش اول : developer tools
وارد سایت می‌شویم و از طریق دکمه F12 و یا Ctr+Alt+i به developer tools مرورگر دسترسی خواهیم داشت. در تب Sources به دنبال www.googletagmanager.com باشید.
روش دوم : Extension Tag Assistant Legacy
از web store کروم Tag Assistant Legacy دانلود و بر روی مرورگر نصب کنید و با ورود به وبسایت دکمه Enable و سپس Record را می‌زنید و بعد از refresh صفحه، لیست تمام تگ‌های نصب شده مشخص است.
رنگ سبز کنار نوشته تگ منیجر به معنای نصب صحیح آن است.
روش سوم : page source
وارد سایت شده و راست کلیک کنید و گزینه‌ی Veiw Page Source را انتخاب کنید. در پنجره جدید بلافاصله بعد از تگ <head> اسکریپت Tag Manager قرار گرفته است. به تصویر زیر دقت کنید:
همچنین بعد از تگ <body> نیز اسکریپت Tag Manager باید قرار گرفته باشد:
آشنایی با دو روش پیاده سازی کدهای نصبی گوگل تگ منیجر و همچنین اطمینان یافتن از نصب و کارکرد صحیح آن روی سایت از جمله مواردی بود که در این مقاله آموزش دیدیم. اکنون شما با کمک تگ منیجر می‌توانید اندازه‌گیری‌ها و کارهای متنوع و جذاب انجام دهید. مثل نصب گوگل آنالیتیکس با کمک تگ منیجر که می‌تواند روش ساده و سریعی باشد.
از شنیدن نظرات و تجربه‌های شما در خصوص نصب تگ منیجر و چالش‌هایی که با آن داشتید خوشحال می‌شوم. در قسمت نظرات حتما آن‌ها را با دیگران در میان بگذارید.
حتما این مطالب را برای تکمیل آموزش بخوانید:
- روش ساده فرم ترکینگ با گوگل تگ منیجر(Form Tracking)
