گوگل تگ منیجر (GTM) و آموزش کار با آن

حذف و اضافه کردن کدهای مخصوص ابزارهای مختلف آمارگیری و تجزیه و تحلیل سایت به صفحات مختلف وب‌سایت همیشه دردسرهای خاص خودش را داشته و دارد. این مشکل وقتی بغرنج‌تر می‌شود که از چندین ابزار مختلف استفاده می‌کنید و باید کدهای خاص هر یک را با ویرایش دستی کدهای سایت، وارد صفحات مختلف کنید. خوشبختانه، در عصر حاضر برای هر مسئله‌ای راهکاری وجود دارد و این مشکل نیز با عرضه ابزاری موسوم به گوگل تگ منیجر (Google Tag Manager یا به اختصار، GTM) به دستان توانمند گوگل مرتفع شده است.
گوگل تگ منیجر از زمان معرفی در سال 2012 دستخوش تغییرات زیادی شده است. در هنگامی‌که این ابزار برای اولین بار در دسترس علاقه‌مندان قرار گرفت کار کردن با آن زیاد آسان نبود؛ اما به‌تدریج بسیاری از ویژگی‌ها و قابلیت‌های آن ساده‌تر و خلاصه‌تر شده است. با این حال، هنوز هم برای کار کردن با این ابزار کاربردی باید با برخی اصول و مقدمات آشنایی داشته باشید. در این مطلب تلاش کرده‌ایم تا هر آنچه که برای آشنایی شما با گوگل تگ منیجر و استفاده از آن مورد نیاز است را توضیح داده و با ذکر نمونه‌هایی روش کار با آن را عملاً به شما نشان بدهیم. اما پیش از آنکه به سراغ جزئیات برویم، باید بفهمیم که اساساً تگ منیجر چیست.

 

 

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

برای قابل هضم‌تر کردن موضوع، بد نیست که به شباهت عملکرد سیستم مدیریت تگ (TMS) با سیستم‌های مدیریت محتوا (CMS، مثل وردپرس) اشاره کنیم. درست همان‌طور که مثلاً در وردپرس از طریق یک محیط کاربری واحد می‌توانید بدون نیاز به دست‌کاری کدهای صفحات سایت، مطالب مورد نظر را منتشر و ویرایش کنید، از طریق گوگل تگ منیجر هم می‌توانید بدون نیاز به تغییر کد صفحات وب‌سایتتان، کدهای مورد نظر (همان تگ‌ها) را وارد کنید.
هدف وجودی سیستم‌های مدیریت تگ و از جمله، گوگل تگ منیجر، فراهم آوردن یک محیط کاربرپسند و سهل‌الاستفاده برای مدیریت آسان و مؤثر کدهایی است که باید برای استفاده از پلتفرم‌های آنالیز (مثل گوگل آنالیتیکس) در صفحات مختلف وب‌سایتتان قرار بدهید.
بسیاری از پلتفرم‌های آنالیتیکس (آنالیز و تحلیل آمار) تگ منیجر اختصاصی خودشان را دارند؛ مانند Launch از ادوبی آنالیتیکس. البته با وجود اینکه تگ منیجرهای مختلف از عبارات تخصصی مختلفی برای توصیف بخش‌ها و مفاهیم خاص پلتفرم‌های خود استفاده می‌کنند، اما عملکرد همه آن‌ها تا حد زیادی به هم شبیه است. به‌علاوه، بسیاری از آن‌ها از پلتفرم‌های مختلف آنالیتیکس نیز پشتیبانی می‌کنند. گوگل تگ منیجر هم با تعداد زیادی از این پلتفرم‌ها سازگار است. برای مشاهده فهرست کامل پلتفرم‌هایی که گوگل تگ منیجر از آن‌ها پشتیبانی می‌کند به این صفحه مراجعه کنید.

 

 

 

 

گوگل تگ منیجر چطور کار می‌کند؟

گوگل تگ منیجر یک container یا ظرف دارد که باید آن را خودتان در صفحات وب‌سایتتان قرار بدهید؛ پس از آن، کدهای HTML و جاوا اسکریپتی که از طریق محیط کاربری تگ منیجر تعریف می‌کنید از طریق این ظرف اجرا خواهد شد. ظرف گوگل تگ منیجر یک قطعه کد جاوا اسکریپت (و غیر جاوا اسکریپت) است که اجرای سایر کدها (موسوم به تگ) را امکان‌پذیر می‌کند.

 

مزایای استفاده از گوگل تگ منیجر

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

حال که با گوگل تگ منیجر و اهمیت آن آشنا شدید، در این قسمت به 7 مزیت اصلی آن اشاره می‌کنیم:
1. سهولت استفاده: گوگل تگ منیجر این امکان را برای کاربر فراهم می‌کند تا بدون نیاز به تغییر کدهای سایت، تغییرات لازم را اِعمال و تگ‌های جدید را به سایت اضافه کند.
2. تسهیل و تسریع فرآیند به‌روزرسانی سایت: ازآنجایی‌که انجام تغییرات مورد نظر از طریق یک محیط مجزا از وب‌سایت انجام می‌شود و نه در تک‌تک صفحات، کار ارتقای نرم‌افزاری وب‌سایت، افزودن افزونه‌ها، تغییر طراحی و موارد مشابه بسیار ساده‌تر خواهد شد.
3. امکان رفع عیب پیش از انتشار: گوگل تگ منیجر به شما اجازه می‌دهد تا قبل از انتشار هر تگ، پیش‌نمایشی از عملکرد آن را مشاهده کنید؛ بنابراین عملکرد صحیح تگ‌ها در وب‌سایت تضمین خواهد شد.
4. قابلیت نسخه برداری: هر بار که تغییری را از طریق گوگل تگ منیجر منتشر می‌کنید، نسخه قبلی آرشیو می‌شود؛ لذا هر زمان که بخواهید به‌راحتی می‌توانید تغییرات را لغو کنید. این قابلیت، باعث بهبود سازمان‌یافتگی اقدامات انجام شده در تگ منیجر می‌شود؛ رفع ایرادات احتمالی را آسان‌تر کرده و امکان نصب تگ‌های مشابه در container ها را فراهم می‌کند.
5. امکان مدیریت کاربران و تعیین سطح اختیارات: گوگل تگ منیجر امکان تعیین سطح اختیارات کاربران، کنترل و تعیین افرادی که قادر به اعمال تغییر بر وب‌سایت و همکاری در ایجاد تگ و موارد مرتبط با آن هستند، را فراهم می‌کند.
6. وجود تگ‌های پیش فرض: بسیاری از تگ‌های مهم به‌صورت پیش فرض در گوگل تگ منیجر تعبیه ‌شده است. لذا در صورتی که خودتان یا تیم بازاریابی شما فاقد مهارت‌های لازم  برای کدنویسی هستید، به‌راحتی و با داشتن اندکی اطلاعات اساسی می‌توانید تگ‌ها را به فراخور نیاز خود ویرایش و شخصی‌سازی کنید.
7. ردیابی رویدادها: در گذشته برای نظارت بر رویدادهای مرتبط با بازدیدکننده‌ها، نظیر کلیک‌ها، میزان تعامل با ویدئوها و وضعیت ارسال فرم‌ها، باید برای هر یک کدهای خاصی را به صفحات مورد نظر اضافه می‌کردید. قابلیت ردیابی خودکار رویدادها در گوگل تگ منیجر نیاز به اضافه کردن کد برای هر مؤلفه را مرتفع می‌سازد؛ در عوض، می‌توانید لینک‌ها و دکمه‌ها را بر اساس ویژگی‌های (attribute) موجود در آن‌ها، یا با استفاده از یک ساختار نام‌گذاری استاندارد، هدف قرار بدهید.

 

پیکربندی گوگل تگ منیجر

برای استفاده از گوگل تگ منیجر باید برای وب‌سایتی که می‌خواهید در آن تگ قرار بدهید یک حساب یا account بسازید. به این منظور، وارد سایت گوگل تگ منیجر شوید (کاربران ساکن ایران به نرم‌افزارهای تغییر آی پی نیاز خواهند داشت) و روی دکمه Create Account کلیک کنید. سپس برای حساب کاربری خود یک اسم انتخاب کنید و روی دکمه continue کلیک کنید.

 

 

 

سپس برای container هم یک اسم انتخاب کرده و با درج آدرس مورد نظر، روی دکمه Create کلیک کنید. در ادامه، ضوابط کاربری گوگل را مشاهده خواهید کرد که با فشردن دکمه Yes، آن‌ها را قبول می‌کنید تا محیط کاربری گوگل تگ منیجر بارگذاری شود. در این مرحله، کدهایی که باید در وب‌سایت خود قرار بدهید به شما نشان داده می‌شود.

 

 

 

در اینجا دو کد قرار دارد:
1. اولین کد برای اجرای تگ‌ها از جاوا اسکریپت استفاده می‌کند که بر طبق دستورالعمل تگ منیجر، باید در بخش همه صفحات وب‌سایتتان قرار داشته باشد.
2. کد دوم یک HTML iframe است که در شرایطی که امکان استفاده از جاوا اسکریپت وجود ندارد به کار می‌آید. این کد باید بعد از تگ ابتدایی قرار بگیرد.
چنانچه کدی بر روی صفحه ظاهر نشد یا صفحه کد را بستید، با کلیک بر روی شماره شناسایی (ID) container گوگل تگ منیجر خود می‌توانید صفحه کدها را فراخوانی کنید.

 

 

 

 

Tag، Trigger و Variable

در منوی جانبی گوگل تگ منیجر سه بخش با نام‌های Tags، Triggers و Variables وجود دارد. این سه مورد، اساس و بنیاد کار تگ منیجر هستند که تعریف هر یک را در اینجا مشاهده می‌کنید:
• تگ‌ها: تگ‌ها کدهایی هستند که کاری که گوگل تگ منیجر باید در صفحه مورد نظر انجام بدهد را مشخص می‌کنند؛ به‌عنوان‌مثال، ارسال تعداد بازدیدها به گوگل آنالیتیکس.
• Trigger ها (فعال‌کننده یا محرک): Trigger شرط اجرای تگ است؛ مثلاً یک فعال‌کننده تعریف می‌کنیم تا فقط هنگامی یک تگ اجرا شود که کاربر از صفحه‌ای بازدید می‌کند که حاوی آدرس /blog/ است.
• Variable ها (متغیرها): متغیرها مقادیر فعال‌کننده‌ها و تگ‌ها هستند که به‌واسطه آن‌ها زمان اجرای تگ مشخص می‌شود. گوگل تگ منیجر علاوه بر متغیرهای پیش فرض خود به شما اجازه تعریف و استفاده از متغیرهای شخصی‌سازی‌شده را نیز می‌دهد.
در بخش‌های بعدی به شرح نحوه استفاده از این مؤلفه‌ها خواهیم پرداخت.

 

ایجاد «تگ»

در اینجا یک نمونه ساده از نحوه ایجاد تگ برای مشاهده Pageview (تعداد بازدیدها) در سایت را به شما آموزش خواهیم داد تا مفاهیم سه‌گانه بالا ملموس‌تر شود.
برای شروع، به سراغ منوی جانبی محیط کاربری گوگل تگ منیجر بروید و روی گزینه Tags کلیک کنید؛ سپس از سمت راست، روی دکمه NEW و سپس Tag Configuration کلیک کنید.

 

 

 

پس از آن می‌توانید برای تگ جدید یک اسم انتخاب کنید و اگر قرار است که اطلاعات برای گوگل آنالیتیکس ارسال شود، نوع (type) آن را از فهرستی که نمایش داده می‌شود از نوع Google Analytics انتخاب کنید.

 

 

سپس تنظیمات تگ را انجام می‌دهیم. در اینجا باید در بخش Track Type، گزینه Page View را انتخاب کنید.

حالا باید قسمت Google Analytics Settings را تنظیم کنید.انجام صحیح این مرحله برای ارسال اطلاعات مورد نظر به گوگل آنالیتیکس ضروری است. دو روش برای انجام این کار وجود دارد:

1. به وب‌سایت گوگل آنالیتیکس بروید و سپس مسیر Admin > Property Settings > Tracking ID را طی کرده و کدی که مشاهده می‌کنید را کپی کنید. در گوگل تگ منیجر، منوی کشویی Google Analytics Settings را باز کرده و New Variable را انتخاب و کدی که کپی کرده بودید را وارد کنید. متغیر را نام‌گذاری و ذخیره کنید. سپس تیک گزینه Enable overriding settings in this tag را بزنید، برای تگ یک اسم انتخاب کرده و با استفاده از دکمه Save آن را ذخیره کنید.
2. یا می‌توانید یک متغیر ثابت (Constant Variable) سفارشی ایجاد کنید که حاوی آی دی شماست و همان را از منوی Google Analytics Settings انتخاب کنید؛ لذا دیگر نیازی به حفظ کردن آن نخواهید داشت.
روش دوم، ما را وارد مبحث متغیرها می‌کند.

 

درباره متغیرها

ایجاد تگ به متغیر نیاز دارد. در قسمت Variables گوگل تگ منیجر دو گزینه قابل مشاهده است: Built-In Variables که متغیرهای پیش فرض تگ منیجر هستند و User-Defined Variables یعنی متغیرهایی که خودتان تعریف می‌کنید.

 

 

 

 

متغیرهای پیش فرض متغیرهایی هستند که گوگل تگ منیجر با شناسایی عناصر موجود در تگ می‌تواند برای شما تعریف کند. متداول‌ترین انواع متغیرها در این بخش تعریف شده است. چنانچه حداقل معیارهای لازم برای تشخیص عناصر کد در وب‌سایت وجود نداشته باشد، امکان استفاده از متغیرهای پیش فرض وجود نخواهد داشت و باید از طریق بخش User-Defined Variables، متغیرهای سفارشی خود را تعریف کنید. برای مشاهده متغیرهای پیش فرض گوگل به همراه تعریفشان به اینجا مراجعه کنید.

متغیرهای سفارشی حاوی مقادیری هستند که شما برایشان تعریف می‌کنید. این مقدار می‌تواند یک عدد، آدرس اینترنتی یا یک نام و مواردی از این قبیل باشد. به‌عنوان نمونه، می‌توانید یک متغیر ثابت برای آی دی حساب کاربری گوگل آنالیتیکس خودتان درست کنید. با ایجاد این متغیر دیگر نیازی نیست که برای درج آی دی خود مرتباً به حساب کاربری خود در آنالیتیکس مراجعه کنید. به این منظور، مسیر زیر را طی کنید:
User-Defined Variables > New > Variable Configuration > Constant > Value (در اینجا آی دی گوگل آنالیتیکس خودتان را وارد کنید) > Save.
به مثالمان برمی‌گردیم و مراحل ایجاد تگ در تگ منیجر را ادامه می‌دهیم. حالا امکان درج یک متغیر ثابت را دارید. تیک Enable overriding settings in this tag را بردارید و با استفاده از منوی Google Analytics Settings، آی دی متغیر را انتخاب کنید.

 

 

 

حالا می‌توانیم trigger یا فعال‌کننده‌ای که باعث اجرای تگ Pageview ی ما می‌شود را ایجاد کنیم. در صفحه‌ای که برای ایجاد تگ جدید باز شده (و حالا قسمت بالای آن را تکمیل کرده‌اید) روی Triggering در زیر tag configuration کلیک کنید. در صورتی که فعال‌کننده مورد نظرتان را مشاهده نکردید روی علامت + در گوشه سمت راست کلیک کنید.

 

 

 

گزینه Page View را به‌عنوان نوع فعال‌کننده انتخاب و یک اسم برای این فعال‌کننده انتخاب کنید.

 

 

مراقب باشید که گزینه All Page Views انتخاب شده باشد تا تگ شما برای تک تک صفحات سایت اجرا شود. سپس روی دکمه SAVE کلیک کنید. حالا که تنظیمات تگ و فعال‌کننده را انجام داده‌اید روی Save کلیک کنید. تبریک می‌گوییم؛ شما اولین تگتان را ایجاد کردید!

 

 

 

تست تگ

بسیار خوب، حالا که یک تگ ایجاد کرده‌اید، از کجا می‌توانید بفهمید که به‌درستی کار می‌کند؟ به این منظور بر روی دکمه Preview در سمت راست محیط کاربری گوگل تگ منیجر کلیک کنید. حالا تصویر به دو قسمت تقسیم می‌شود (مانند محیط devtools کروم) که در قسمت بالای آن سایت شما و در بخش پایین، محیط تگ منیجر قرار دارد.

 

 

 

 

در سمت چپ محیط کاربری تگ منیجر، خلاصه‌ای از رویدادهایی را مشاهده می‌کنید که به ترتیب در هنگام بارگذاری صفحه ثبت شده‌اند. ردیف بالای این بخش نیز به سه بخش Tags، Variables و Data Layer تقسیم شده است.

 

 

به‌طور پیش فرض، در ابتدا قسمت تگ‌ها نمایش داده می‌شود که حاوی همه تگ‌های موجود در صفحه (اعم از تگ‌های اجرا شده و اجرا نشده) است. روی هر بخشی از صفحه که کلیک کنید، قسمت پیش نمایش (قسمت بالایی) دوباره بارگذاری می‌شود و همه تگ‌های اجرا شده به همراه متغیرهای مرتبط با مؤلفه‌های محل تعامل (محل کلیک) نمایش داده می‌شود.
به‌عنوان‌مثال، هنگامی‌که روی دکمه «جهت عضویت طلایی کلیک کنید» در صفحه اصلی وب‌سایت مدیر وب کلیک می‌کنیم، در قسمت سمت چپ (بخش Summary) رویداد gtm.formSubmit بارگذاری می‌شود. با انتخاب قسمت Variables می‌توانیم متغیرهای مرتبط با دکمه «جهت عضویت طلایی کلیک کنید» و مقادیر آن‌ها را مشاهده کنیم.

 

 

 

متغیرهایی که در اینجا نمایش داده می‌شوند متغیرهای موجود در مؤلفه‌های HTML هستند که توسط گوگل منیجر در کدهای دکمه مزبور شناسایی شده‌اند. همین کار را می‌توانید با استفاده از devtools گوگل کروم هم انجام بدهید؛ اما مزیت گوگل تگ منیجر در شناسایی خودکار متغیرها، خلاصه کردن متغیرهای HTML و مقادیر آن‌ها و ارائه این اطلاعات در یک محیط کاربرپسند و قابل هضم است.
توجه داشته باشید که هنگامی‌که یک تگ را به گوگل تگ منیجر اضافه می‌کنید، به‌طور خودکار در سایت شما فعال نمی‌شود؛ بلکه فرصتی را برای کسب اطمینان از صحت اجرا و ارسال درست اطلاعات به ابزار تحلیلی مورد نظر (در اینجا گوگل آنالیتیکس) در اختیار شما قرار می‌دهد.
در واقع، با استفاده از قابلیت Preview می‌توانید از اجرای صحیح تگ جدید اطمینان پیدا کنید:

 

 

اگر تگ شما اجرا نمی‌شود، برای پیدا کردن دلیل آن، در قسمت Summary بر روی تگی که ایجاد کرده‌اید کلیک کنید تا فهرست فعال‌کننده‌های آن (firing triggers) ظاهر شود. چنانچه فعال‌کننده‌ای امکان اجرا نداشته باشد یک علامت X قرمز رنگ در کنار Filter آن درج می‌شود.

 

 

حالا می‌توانید تگ جدید را فعال کنید. به این منظور، ابتدا بر روی دکمه SUBMIT در سمت راست بالای محیط کاربری تگ منیجر کلیک کنید.

 

 

سپس نام این نسخه از تگ خود را به همراه توضیحات آن ثبت کنید (برای استفاده از مزایای قابلیت نسخه برداری که قبلاً ذکر شد).

 

 

حالا بر روی دکمه PUBLISH کلیک کنید. از این به بعد برای کسب اطمینان از اینکه شرایطی که برای اجرای فعال‌کننده تعیین کرده‌اید فقط باعث ثبت تعامل مورد نظر شما می‌شود، لازم است که بر روی گوگل تگ منیجر نظارت داشته باشید.

افزونه‌های کاربردی برای تست تگ‌های گوگل تگ منیجر

یکی از کارآمدترین افزونه‌های مرورگر کروم برای گوگل تگ منیجر، افزونه GTM Debugger است. پس از نصب افزونه، با فشردن دکمه‌های F12 و F5 می‌توانید اطلاعات مربوط به رویدادهای صفحه بارگذاری شده و هیت های گوگل آنالیتیکس (تعاملاتی که باعث ارسال اطلاعات به آنالیتیکس می‌شوند) را مشاهده کنید. توجه داشته باشید که این افزونه فقط اطلاعات تگ‌هایی را نشان می‌دهد که در container تگ منیجر فعال هستند.
برای مشاهده سایر افزونه‌های مرتبط با گوگل تگ منیجر می‌توانید به این آدرس مراجعه کنید.

 

 

حرف آخر

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