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

گوگل تگ منیجر یکی از وسایل کاربردی گوگله که به کار گیری اون به خصوص واسه وب سایتای بزرگ ضرورت داره. با مطالعه این مطلب با این وسیله موثر و اصول به کار گیری اون آشنا میشین.

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

موشکافی

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

مقاله در رابطه: گوگل ادوردز و راهنمای کامل کار با اون

تگ منیجر چیه؟

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

هدف وجودی سیستمای مدیریت تگ و از جمله، گوگل تگ منیجر، جفت و جور آوردن یه محیط کاربرپسند و آسون الاستفاده واسه مدیریت آسون و مؤثر کدهاییه که باید واسه به کار گیری پلتفرمای بررسی (مثل گوگل آنالیتیکس) در صفحات جور واجور وب سایتتون قرار بدین.

خیلی از پلتفرمای آنالیتیکس (بررسی و تحلیل آمار) تگ منیجر اختصاصی خودشون رو دارن؛ مانند Launch از ادوبی آنالیتیکس. البته با وجود اینکه تگ منیجرهای جور واجور از عبارات تخصصی مختلفی واسه توصیف بخشا و مفاهیم خاص پلتفرمای خود استفاده می کنن، اما کارکرد همه اونا تا حد زیادی به هم مثل س. هم اینکه، خیلی از اونا از پلتفرمای جور واجور آنالیتیکس هم پشتیبانی می کنن. گوگل تگ منیجر هم با تعداد خیلی از این پلتفرما سازگاره. واسه مشاهده فهرست کامل پلتفرمایی که گوگل تگ منیجر از اونا پشتیبانی می کنه به این صفحه مراجعه کنین.

گوگل تگ منیجر چیجوری کار می کنه؟

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

بیشتر بدونین: رتبه الکسا چیه؛ نکاتی موثر و هوشمندانه واسه بهبود اون

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

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

حالا که با گوگل تگ منیجر و اهمیت اون آشنا شدید، در این قسمت به ۷ مزیت اصلی اون می پردازیم:

۱٫ سهولت استفاده: گوگل تگ منیجر این امکان رو واسه کاربر جفت و جور می کنه تا بدون نیاز به تغییر کدهای سایت، تغییرات لازم رو اِعمال و تگای جدید رو به سایت اضافه کنه.

۲٫ آسون کردن و تسریع روند به روزرسانی سایت: ازآنجایی که انجام تغییرات مورد نظر از راه یه محیط جدا از هم از سایت انجام می شه و نه در تک تک صفحات، کار ارتقای نرم افزاری سایت، اضافه کردن افزونها، تغییر طراحی و موارد مشابه بسیار ساده تر می شه.

۳٫ امکان رفع عیب قبل از منتشر کردن: گوگل تگ منیجر به شما اجازه میده تا قبل از منتشر کردن هر تگ، پیش نمایشی از کارکرد اونو ببینین؛ پس کارکرد درست تگا در سایت تضمین می شه.

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

۵٫ امکان مدیریت کاربران و تعیین سطح اختیارات: گوگل تگ منیجر امکان تعیین سطح اختیارات کاربران، کنترل و تعیین آدمایی که قادر به اعمال تغییر بر سایت و همکاری در ایجاد تگ و موارد مربوط به اون هستن، رو جفت و جور می کنه.

۶٫ وجود تگای پیش فرض: خیلی از تگای مهم به صورت پیش فرض در گوگل تگ منیجر تعبیه شده. پس اگه خودتون یا تیم بازاریابی شما بدون مهارتای لازم  واسه کدنویسی هستین، خیلی راحت و با داشتن کمی اطلاعات اساسی می تونین تگا رو به فراخور نیاز خود ویرایش و شخصی سازی کنین.

۷٫ ردیابی رویدادها: در گذشته واسه نظارت بر رویدادهای مربوط به بازدیدکنندها، مثل کلیکا، اندازه تعامل با ویدئوها و وضعیت ارسال فرما، باید واسه هر یک کدهای خاصی رو به صفحات مورد نظر اضافه می کردین. توانایی ردیابی خودکار رویدادها در گوگل تگ منیجر نیاز هم اینکه کردن کد واسه هر مؤلفه رو مرتفع می سازه؛ عوضش، می تونین لینکا و تکمه ها رو براساس ویژگیای (attribute) موجود در اونا، یا با به کار گیری یه ساختار نام گذاری استاندارد، هدف قرار بدین.

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

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

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

اینجا دو کد قرار داره:

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

۲٫ کد دوم یه 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 رو تنظیم کنین.انجام درست این مرحله واسه فرستادن اطلاعات مورد توجه به گوگل آنالیتیکس لازمه. دو روش واسه انجام این کار هست:

۱٫ به سایت گوگل آنالیتیکس برید و بعد راه Admin > Property Settings > Tracking ID رو طی کرده و کدی که مشاهده می کنین رو کپی کنین. در گوگل تگ منیجر، منوی کشویی Google Analytics Settings رو باز کرده و New Variable رو انتخاب و کدی که کپی کرده بودین رو وارد کنین. متغیر رو نام گذاری و ذخیره کنین. بعد تیک گزینه Enable overriding settings in this tag رو بزنین، واسه تگ یه اسم انتخاب کرده و با به کار گیری دکمه Save اونو ذخیره کنین.

۲٫ یا می تونین یه متغیر ثابت (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 از بالای صفحه می تونین نسخه های جور واجور موجود در تگ منیجر و تگای شامل اونا رو به شکل منظم و مناسب تری ببینین و در نتیجه، به درد بخور بودن بیشتری رو در به کار گیری گوگل تگ منیجر تماشاگر باشین.

مشاهده نسخه pdf مقاله: گوگل تگ منیجر (GTM) و آموزش کار با اون