آموزش جامع گوگل تگ منیجر [Google Tag Manager]

بخش اول: معرفی و بررسی امکانات

Google Tag Manager – Part 1 – Introduction

Google Tag Manager سرویس رایگانی از گوگل است که می توان توسط آن انواع تگ های یک وب سایت را مدیریت کرد.

برای شروع کار به آدرس https://www.google.com/analytics/tag-manager/ مراجعه کنید. احتمالا برای دسترسی به این سرویس مانند بسیاری از سرویس های دیگر گوگل (مثل گوگل آنالیتیکس) از IP های ایران، نیاز به نصب و فعالسازی vpn دارید.

ساخت اکانت در گوگل تگ منیجر:

برای استفاده از سرویس “مدیریت تگ های گوگل” یا “GTM: Google Tag Manager” باید ابتدا یک اکانت در آن بسازید. مطابق تصویر زیر، نام اکانت (account name) را وارد کنید و روی لینک continue کلیک کنید.

نام اکانت معمولا نام شرکت و یا سازمان شما می باشد.

در مرحله بعد، با تصویر زیر روبرو می شوید که باید container name را برای این اکانت تعریف کنید.

نام container معمولا آدرس سایتی است که می خواهیم در آن از سیستم مدیریت تگ های گوگل استفاده کنیم. در قدم بعد، پلتفرمی را که می خواهیم در آن از GTM بهره ببریم را انتخاب می کنید. این بخش شامل 4 گزینه Web , Ios , Android , AMP می باشد که ما در این مثال فقط گزینه WEB را انتخاب می کنیم. در نهایت روی CREATE کلیک کنید.

اکنون متن شرایط و ضوابط Google Tag Manager برای شما بصورت پاپ آپ به نمایش در میاید که باید روی دکمه yes کلیک کنید تا بتوانید وارد مراحل بعدی شوید.

در بخش بعد اسکریپت دو بخشی به شما ارائه می شود که بصورت تصویر زیر است:

اسکریپت بخش بالایی در تصویر فوق را باید در تگ head وب سایت خود تعریف کنیم و بخش پایین را باید بلافاصله بعد از تگ <body> درج شود.

نصب گوگل تگ منیجر در وردپرس:

اگر سایت خود را توسط CMS وردپرس راه اندازی کرده اید، پلاگین های زیادی وجود دارد که بتوانید اسکریپت فوق را در سایت خود درج کنید. مطابق تصویر زیر، با مراجعه به قسمت ADMIN وردپرس و سپس سرچ عبارت “Google tag manager for wordpress” در پلاگین ها، پلاگین مشخص شده در تصویر زیر را نصب کنید.

پس از نصب و فعالسازی این پلاگین، به بخش setting آن بروید. مطابق تصویر زیر، ID مربوط به GTM خود را در باکس مربوطه بنویسید.

سایر گزینه ها را به حالت پیش فرض رها کنید و در نهایت دکمه Save Changes را بفشارید. با انجام اینکار دیگر نیازی نیست اسکریپت های GTM را بصورت دستی در بخش head تعریف کنید. خود این پلاگین بقیه کارها را انجام می دهد.

محیط کاری گوگل تگ منیجر:

اکنون نوبت آنست که با محیط کاری سرویس مدیریت تگ گوگل (Google Tag Manager) آشنا شویم. همانطور که در قسمت بالا سمت چپ تصویر فوق مشاهده می کنید، سه تب کلی دارد بنام های Workspace ، Versions و ADMIN که بطور پیش فرض تب WorkSpace فعال می باشد که با رنگ آبی مشخص شده است. در تب versions می توانید در صورت مرتکب خطا شدن به نسخه های قبل یازگردید (مانند history در فتوشاپ!) و در تب admin نیز امکان دسترسی دادن به سایر کاربران و همچنین تنظیمات زیاد دیگری دارید.

تب Versions در GTM:

تب ADMIN در GTM:

اکنون بیایید نگاهی دوباره به محیط کاری (WORKSPACE) سرویس GTM بیاندازیم. در تصویر زیر، یک منوی عمودی را مشاهده می کنید که شامل آیتم های Overview, Tags, Triggers, Variables, Folders می باشد.

در بخش overview می توانید اطلاعات کلی راجع به تگ ها و container های خود ببینید. تصویر زیر:

Tags در GTM:

با مراجعه به لینک Tags می توانید تگ های جدیدی تعریف کنید و یا تگ های قبلی را مشاهده و چک کنید. تگی که تعریف می کنید لزوما نباید از سرویس و یا پلاگینی گرفته باشید. بلکه شما می توانید تگ هایی که خودتان تعریف کرده اید را در این بخش درج کنید.

Trigger در GTM:

در بخش Triggers می توان تعریف کرد که یک تگ خاص در چه زمانی و تحت چه شرایطی اجرا شود. بعنوان مثال می توانید تگ موردنظرتان در شرایط زیر اجرا شود:

کلیک روی یک لینک مشخص
بعد از ثبت یک فرم
تکمیل خرید و مشاهده صفحه تشکر “thank you“
کلیک روی دکمه ای خاص در یک صفحه مشخص

توجه داشته باشید که نیازی نیست سرویس مدیریت تگ گوگل (Google Tag Manager) مانند گوگل آنالیتیکس در تمام صفحات اجرا شود. بلکه می توان آنرا فقط در صفحاتی اجرا کرد که نیاز است. بنابراین برای مشخص کردن محل اجرای این تگ ها نیز از طریق بخش Trigger اقدام می کنیم.

Variable در GTM:

در سرویس Google Tag Manager پنج متغیر پیش فرض وجود دارد که عبارتند از Event, Page Hostname, Page Path, Page URL, Referrer

همانطور که از نام این متغیرها مشخص است، برای مشخص کردن محل انجام یک رویداد بکار می رود. بعنوان مثال هنگامی که یک کاربر روی یک لینک کلیک می کند، می خواهیم متوجه شویم که این کلیک در کدام صفحه رخ داده است و همچنین اگر چندین لینک در آن صفحه باشد، می توان با تعریف نام کلاس div آن لینک (css class)، بفهمیم که کدام لینک کلیک شده است و غیره…

Folder در GTM:

با استفاده از این قابلیت، می توان تگ ها، متغیرها و Trigger هایی که تعریف کرده ایم را مرتب سازی و دسته بندی کنیم.

کنترل دسترسی کاربران در GTM (User Access Control):

با مراجعه به تب ADMIN در سرویس Google tag manager می توان به کاربرهای دیگر دسترسی دهیم. این دسترسی می تواند در سطح Account باشد و یا در سطح Container . لطفا به تصویر زیر دقت کنید:

برای تعریف دسترسی کاربران، در تصویر فوق و در ستون container روی لینک User Management کلیک کنید. در این صفحه دو بخش را باید پر کنید، اولین گزینه ایمیل کاربری است که می خواهید به او دسترسی (access) بدهید و دومی سطح دسترسی کاربر به اکانت GTM می باشد که می تواند read, edit, approve , publish باشد.

سپس روی لینک ADD کلیک کنید. اکنون ایمیل کاربر جدید به لیست ایمیل های کاربران قبلی اضافه خواهد شد. سطح دسترسی از بالا به پایین زیاد می شود. READ پایین ترین سطح دسترسی و PUBLISH بالاترین سطح دسترسی را دارد.

در بخش دوم از آموزش گوگل تگ منیجر ، نحوه پیاده سازی کد رهگیری گوگل آنالیتیکس را آموزش خواهیم داد.

بخش دوم: پیاده‌سازی کد گوگل آنالیتیکس

GTM Tutorial – Part 2 – Implementing Google Analytics

در بخش اول از سری آموزشی گوگل تگ منیجر، به معرفی این سرویس پرداختیم و نحوه نصب آن را روی یک وب سایت آموزش دادیم و محیط آنرا بطور کلی تفسیر کردیم. در این مقاله قصد داریم نحوه درج کد گوگل آنالیتیکس توسط Google-Tag-Manager را آموزش دهیم.

ایجاد تگ برای گوگل آنالیتیکس:

بجای اینکه اسکریپت مربوط به اعلان سرویس گوگل آنالیتیکس را مستقیما در وب سایت خود درج کنیم، بهتر است از طریق Google Tag Manager اینکار را انجام دهیم. در تب workspace روی لینک Tags کلیک کنید و دکمه قرمز رنگ NEW را بفشارید. روش دیگر برای ساخت یک تگ جدید کلیک روی لینک New Tag در منوی Overview می باشد.

در پنجره ای که ظاهر می شود یک نام دلخواه به این تگ اختصاص دهید (مانند GA Base Tag) مطابق تصویر زیر:

برای ایجاد تگ جدید مطابق تصویر زیر باید دو بخش را تعریف کنید. Tag Configuration و Trigger

نحوه انجام تنظیمات (configuration) تگ در گوگل تگ منیجر:

با کلیک روی Configuration انواع مختلف تگ ها را مطابق تصویر زیر مشاهده خواهید کرد:

تگ های بسیارزیادی را در این لیست میبینید که تصویر فوق مربوط به تگ های ویژه و پرکاربرد (Featured Tags) می باشد. در بالای این لیست، تگ گوگل آنالیتیکس را مشاهده می کنید. ما در این مثال گزینه دوم را انتخاب می کنیم (یعنی Classic).

بدست آوردن کد رهگیری گوگل آنالیتیکس:

در باکس اول باید Property ID یا Tracking ID مربوط به اکانت گوگل آنالیتیکس سایت خود را وارد کنید. برای بدست آوردن این کد، وارد گوگل آنالیتیکس شده و در بخش ADMIN روی لینک Property Setting کلیک کنید. مطابق تصویر زیر:

پس از کپی و پیست کردن کد فوق در باکس مربوطه، باید در مرحله بعد، نوع رهگیری (Track Type) را انتخاب کنیم. لیست Track Type شامل گزینه هایی مانند Page view, transaction, social, event و غیره می باشد. که ما در این مثال می خواهیم از سرویس آنالیتیکس بصورت پیش فرض استفاده کنیم، همان گزینه پیش فرض یعنی page view را انتخاب می کنیم.

تعریف Trigger برای تگ گوگل آنالیتیکس:

تنظیمات مربوط به More Setting و Advanced Setting را به حالت پیش فرض خود رها کنید و به سراغ بخش Trigger بروید. ما در این مثال می خواهیم سرویس گوگل آنالیتیکس در تمام صفحات وب سایت مان فعال باشد.

در پنجره ای که پس از کلیک روی Trigger ظاهر می شود گزینه All Pages بعنوان آیتم پیش فرض وجود دارد. آن را انتخاب کرده و در نهایت دکمه Save را کلیک کنید. در این مثال نیازی به تعریف یک Trigger جدید نداریم.

پس از انجام اینکارها یک تگ جدید بنام GA Base Tag را در لیست تگ ها مشاهده خواهید کرد. اما باید قبل از اینکه کدهای جاوا اسکریپت را بر روی سایت تان منتشر کنید، باید مطمئن شوید که آنها درست کار می کنند. به بیان دیگر باید debug شوند.

حالت پیش نمایش (Preview mode):

برای اینکه بتوان تگ های واقع در Google Tag Manager را debug کنید، باید پس از تعریف تگ موردنظر خود، روی دکمه Preview کلیک کنید تا تصویر زیر را در فضای کاری GTM مشاهده کنید:

دیباگ کردن تگ ها در GTM:

همانطور که در بخش نارنجی رنگ تصویر فوق مشاهده می شود، با فعال بودن حالت preview این امکان را دارید تگ گوگل آنالیتیکس را بررسی و رفع خطا کنید. بدین منظور، در همین مرورگری که GTM باز است یک تب جدید باز کنید و وب سایت خود را در آن مشاهده کنید. مطابق تصویر زیر، یک پنل ویژه GTM در پایین مرورگر باز می شود.

در تصویر بالا مشاهده می شود که تگ GA Base Tag بدرستی در تمام صفحات وب سایت کار می کند. با کلیک بر روی GA Base Tag مشخصات این تگ نمایش می یابد. مطابق تصویر زیر:

همانطور که مشاهده می کنید، ID اکانت آنالیتیکس ما در مقابل Account درج شده است که با رنگ قرمز مشخص است. بدلیل اینکه سایر تنظیمات را تغییر نداده ایم، عبارت false مقابل آنها تعریف شده است.

در بخش سوم از آموزش گوگل تگ منیجر، چگونگی رهگیری کلیک روی لینک های خارجی یک وب سایت را آموزش خواهیم داد.

بخش سوم: رهگیری کلیک روی لینک خارجی

GTM Tutorial – Part 3 – Tracking Outbound Links

تعریف متغیر (Variable) برای لینک‌های حارجی:

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

بدین منظور ابتدا به منوی Variables رفته و در بخش متغیرهای پیش فرض (built-in variables) روی لینک Configure کلیک کنید. سپس مطابق تصویر زیر گزینه Click URL را انتخاب کنید.

پس از انتخاب Click URL دکمه ضربدر x را بزنید. اکنون مطابق تصویر زیر مشاهده می کنید که Click URL با نوع Data Layer Variable به لیست متغیرها اضافه شده است.

اکنون نوبت تعریف Trigger می باشد. در منوی Triggers روی دکمه NEW کلیک کنید تا یک TRIGGER جدید بسازید. به آن نام Outbound Link Clicked اختصاص دهید. از لیست تصویر زیر، گزینه Just Links را انتخاب کنید.

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

ما در این مثال می خواهیم رویدادی را برای لینک های خارجی (لینکی که href آن شامل آدرس سایت ما نیست) تعریف کنیم. پس گزینه Some Link Clicks را انتخاب کرده و مطابق تصویر زیر، گزینه اول همان Click URL بماند. گزینه دوم را عبارت does not contain انتخاب کنید و برای باکس سوم دامین سایت خود را وارد کنید.

در نهایت دکمه Save را می فشاریم. اکنون این Trigger به لیست Trigger های ما اضافه شده است.

حالا باید یک تگ جدید ایجاد کنیم. بنابراین به منوی Tags رفته و دکمه NEW را بزنید. نام آنرا GA Outbound Link Clicked Event انتخاب می کنیم. در بخش Tag Configuration آیتم دوم یعنی Classic Analytics را انتخاب کنید.

اکنون باید کد رهگیری آنالیتیکس (Tracking ID) را در باکس مربوطه وارد کنیم و مطابق تصویر زیر، سایر فیلدها را پر کنید:

همانطور که در تصویر بالا می بینید، در این مثال باید نوع رهگیری (Track Type) را برابر با Event انتخاب کنیم. اگر خاطرتان باشد در مثال اول، برای این فیلد Page View ست کردیم. سایر تنظیمات را دست نزنید و در نهایت دکمه Save را کلیک کنید. حالا باید پس از انجام Configuration، روی Trigger کلیک کنیم و Trigger ای که قبلا با نام Outbound Link Clicked ساخته ایم را انتخاب کنیم.

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

در این تصویر تگ اولی که در GTM تعریف کردیم یعنی GA Base Tag فعال است اما تگی که اخیرا ایجاد کرده ایم (با نام GA Outbound Link Clicked Event) فعال نیست (Not Fired) زیرا هنوز روی هیچ لینک خارجی (External Link) کلیک نکرده ایم.

حالا اگر در وب سایت خود روی یک لینک خارجی (لینکی که به سایت های دیگر غیر از سایت خودتان اشاره دارد: Outbound-External Link) کلیک کنید، این تگ فعال (fire) خواهد شد و پنل GTM Debug بصورت زیر نمایش می یابد:

در بخش Summary تصویر بالا اولین لینک، رویداد gtm.linkClick رخ داده است که یکی از رویدادهای داخلی و پیش فرض GTM می باشد. و در سمت راست تصویر عبارت Tags fired on this event را مشاهده می کنید.

حال اگر روی لینک Summary کلیک کنید، مطابق تصویر زیر متوجه می شوید که هر دو تگ شما فعال می باشند:

همانطور که در تصاویر بالا می بینید، تب Tags فعال می باشد. اکنون روی تب Variables کلیک کنید و از نوار Summary نیز روی gtm.linkClick کلیک کنید.

اگر خاطرتان باشد در هنگام تعریف Link در GTM ، پارامترهای Category , Action , Label را بصورت زیر تعریف کردیم:

Category=Interactions
Action=Outbound Link Clicked
Label={{Click Url}}

مشاهده می کنید که دو پارامتر اول یعنی Category و Action دارای مقادیر استاتیک (ثابت) می باشند اما پارامتر Label برابر با {{Click Url}} تعریف شده است. عبارت Click URL این ویژگی را دارد که بصورت داینامیک مقدار href هر لینک خارجی را در خود ذخیره می کند. در این مثال چون لینک خارجی ما به سایت گوگل اشاره دارد، با فعال کردن تب Tags و سپس کلیک روی تگ GA Outbound Link Clicked Event و انتخاب gtm.linkClick از نوار سمت چپ، تصویر زیر را خواهیم داشت:

مشاهده می شود که مقدار Event Label برابر عبارت http://www.google.co.uk می باشد.

بنابراین در هنگام debug کردن یک تگ، تنها چک کردن فعال شدن (fire) صحیح تگ کافی نیست بلکه باید مقادیر متغیرهایی که برای آن تگ تعریف کرده اید را نیز چک کنید.

ضمیمه بخش سوم: چک کردن عملکرد تگ ها در گوگل آنالیتیکس بصورت زنده

روش دیگری که برای تست کردن عملکرد تگ ها و متغیرهای GTM وجود دارد، استفاده از سرویس گزارش زنده (Real-Time) گوگل آنالیتیکس می باشد. اگر روی لینک خارجی مذکور کلیک کنیم، مطابق تصویر زیر می توان آمار آنرا در Real Time آنالیتیکس داشته باشیم.

در بخش Real Time روی لینک Events کلیک کنید. مشاهده می کنید که یک کلیک با category=interactions و action=outbound link clicked ثبت شده است. اگر به وب سایت خود مراجعه کنید و مجددا روی آن لینک خارجی کلیک کنید، یک واحد به تعداد کلیک های این لینک افزوده خواهد شد.

حال اگر روی لینک category کلیک کنید، در صفحه جدیدی که می بینید می توانید Label هر لینک کلیک شده را به تفکیک مشاهده کنید. تصویر زیر:

در بخش چهارم آموزش سرویس Google Tag Manager نحوه رهگیری فرم های ثبت نام در وب سایت را آموزش خواهیم داد.

بخش چهارم: رهگیری فرم های ثبت‌نام در وب سایت

GTM Tutorial – Part 4 – Tracking Form Submissions

در بخش قبل نحوه رهگیری کلیک کاربران روی لینک های خارجی (outbound یا external) یک وب سایت را آموزش دادیم.

رهگیری ثبت فرم تماس با ما:

ممکن است بخواهید ثبت فرم تماس با ما را در سایت خود رهگیری کنید. فرض کنید فرم ما بصورت زیر است:

تعریف متغیر (Variable):

با استفاده از Google Tag Manager این امکان را دارید که ثبت فرم های دلخواه خود را در وب سایت رهگیری کنید. بدین منظور وارد اکانت خود در GTM شوید و به بخش Variables بروید. در این بخش روی دکمه قرمز رنگ CONFIGURE کلیک کنید تا لیست انواع متغیرها نمایش داده شود. مطابق تصویر زیر در قسمت المان های Form آیتم Form ID را انتخاب نمائید.

دلیل انتخاب Form ID اینست که ممکن است ما چندین فرم در وب سایت مان داشته باشیم. می خواهیم متوجه شویم کدامیک از این فرم ها از طرف کاربران ثبت شده است.

تعریف تریگر (Trigger) برای ثبت فرم:

برای شروع، به منوی Triggers رفته و به آن نام Form Submitted را اختصاص دهید. اکنون مطابق تصویر زیر، روی Configuration کلیک کنید.

مطابق تصویر زیر از لیست موجود، گزینه Form Submission را انتخاب کنید.

در پنجره ای که ظاهر می شود، مطابق تصویر زیر، گزینه All Forms را انتخاب نمائید. زیرا می خواهیم ثبت تمام فرم های وب سایت را چک کنیم. اما در صورتی که وب سایتی با مقیاس بزرگ دارید و صدها فرم در آن وجود دارد، می توانید پس از انتخاب گزینه Some Forms آیدی فرم موردنظر خود را وارد کنید. سایز گزینه ها را به حالت خود رها کرده و دکمه Save را بزنید.

تعریف تگ جدید برای رویداد ارسال فرم:

اکنون باید یک تگ جدید بسازیم. به منوی Tags بروید و روی New کلیک کنید. نام آنرا GA Form Submitted Event تعریف کنید. روی Tag Configuration کلیک کرده و در لیست موجود، مانند قبل آیتم دوم یعنی Classic Google Analytics را انتخاب کنید. اکنون مانند چند مثال قبل باید کد رهگیری (Tracking ID) حساب آنالیتیکس خود را وارد کنید. در سرویس Google Analytics خود به بخش ADMIN بروید و در قسمت Property Setting کد رهگیری را کپی و در باکس تگ GTM آنرا پیست کنید.

تعریف متغیر Constant برای GA Tracking ID:

همانطور که متوجه شده اید، ما در تمام تگ هایی که می خواهیم از آنالیتیکس استفاده کنیم به کد رهگیری (Tracking ID) گوگل آنالیتیک نیاز داریم. پس بهتر است برای این کد یک Variable تعریف کنیم تا بتوان در تمام تگ ها از آن براحتی استفاده کنیم.

به منوی Variables رفته و در پنجره ظاهر شده در بخش User-Defined Variables روی دکمه NEW کلیک کرده و مطابق تصویر زیر، از لیست موجود آیتم Constant را انتخاب کنید.

سپس کد رهگیری آنالیتیکس خود را در باکس زیر وارد کنید:

با انجام اینکار (تعریف متغیر استاتیک برای کد رهگیری GA) از این پس براحتی می توانید با کلیک روی آیکون سیاه رنگ، از متغیرهای تعریف شده و یا پیش فرض موجود (تصویر زیر) استفاده کنید.

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

مقادیر Track Type، Action و Category را مانند تصویر زیر پر کنید:

مقدار Label را برابر عبارت {{Form ID}} تعریف کنید. تا پس از هر بار فراخوانی رویداد، آیدی فرم در این Label بصورت داینامیک درج شود.

تعریف تریگر (Trigger) برای تگ (Tag):

اکنون نوبت آنست که برای تگ جدید یک Trigger مشخص کنید. پس روی Trigger کلیک کنید تا لیست Trigger های موجود به شما نمایش داده شود. مطابق تصویر زیر روی تریگری که قبلا برای این مثال تعریف کرده ایم (Form Submitted) کلیک کنید.

در نهایت دکمه Save را بزنید.

یافتن خطا و رفع آن در گوگل تگ منیجر:

اکنون وقت آنست که با کلیک روی دکمه Preview ، تگ خود را debug کنید. سپس به صفحه تماس با ما در وب سایت خود مراجعه کنید و آنرا رفرش کنید. وقتی فرم را پر کنید، مانند تصویر زیر، تگ GA Form Submitted Event فعال خواهد شد (fired)

مانند مثال قبل، روش دیگر برای چک کردن عملکرد تگ GTM مراجعه به منوی Real Time در گوگل آنالیتیکس می باشد. مطابق تصویر زیر، مشاهده می شود که فرم موردنظر ما یکبار پر شده است.

تا اینجا در طی این سه مثال، سه تگ تصویر زیر را ایجاد کرده ایم:

1- پیاده سازی تگ Google Analytics

2- رهگیری لینک های خارجی (Outbound Links Tracking)

3- رهگیری ثبت فرم (Form Submission Tracking)

در بخش پنجم از آموزش گوگل تگ منیجر، نحوه رهگیری تعداد دانلود فایل های با فرمت خاص را در سرویس Google Tag Manager آموزش خواهیم داد.

بخش پنجم: رهگیری تعداد دانلود فایل

GTM Tutotial – Part 5 – Tracking File Downloads

در بخش قبل نحوه رهگیری پر شدن فرم های وب سایت مانند فرم تماس با ما را یاد گرفتیم.

رهگیری دانلود فایل با فرمت خاص:

گاهی اوقات ممکن است بخواهید تعداد دانلود فایل های خاصی در وب سایت تان را رهگیری کنید. فرض کنید چند کتاب الکترونیکی با فرمت .pdf در وب سایت تان برای دانلود در اختیار کاربران قرار داده اید. می خواهید تعداد دانلود آنها را با تعریف تگی خاص در Google Tag Manager رهگیری کنید.

تعریف تریگر برای مشخص کردن فرمت فایل دانلود شده:

بدین منظور ابتدا به منوی Triggers بروید و NEW را کلیک کنید. در این قسمت نام Trigger را برابر GA Download Url Regex قرار دهید و سپس مطابق شکل زیر، گزینه Some Link Clicks را انتخاب کرده و در سه باکسی که در پایین ظاهر می شود، لیست بازشوی اول را Click URL ، لیست دوم را match RegEx (ignore case) و سوم را برابر عبارت Regular موردنظر تعریف کنید که ما در این مثال بدلیل اینکه می خواهیم دانلود فایل های با فرمت pdf، xlsx، png و docx را رهگیری کنیم، RegEx را برابر \.(pdf|xlsx|png|docx)$ تعریف نموده ایم.

رهگیری دانلود فایل pdf:

اما اگر می خواهید فقط فایل های pdf موجود در وب سایت خود را رهگیری کنید، تنظیمات Trigger را مطابق تصویر زیر انجام دهید:

مشاهده می شود که در لیست بازشوی دوم گزینه ends with انتخاب شده است و در باکس آخر نیز عبارت .pdf تعریف شده است.

در بخش ششم از آموزش گوگل تگ منیجر، نحوه کار با فولدرها و نیز چگونگی انتشار تغییرات را آموزش می دهیم.

بخش ششم: مرتب‌سازی فضای کاری گوگل تگ منیجر توسط فولدرها (Folders)

GTM Tutorial – Part 6 – Folders & Publishing

در بخش پنجم از آموزش گوگل تگ منیجر، رهگیری تعداد دانلود فایل در سرویس مدیریت تگ گوگل را آموزش دادیم.

لزوم استفاده از فولدرها در GTM:

به منظور مرتب سازی فضای کاری سرویس Google Tag Manager باید از منوی Folders اقدام کنید. اگر شما یک سری تگ برای سرویس گوگل آنالیتیکس و تعدادی تگ برای ایمیل مارکتینگ تعریف کرده اید، می توانید تگ های مرتبط به هم را در فولدرهای خاص خود قرار دهید.

برای تعریف یک فولدر جدید در GTM به منوی Folders رفته و روی New Folder کلیک کنید. مطابق شکل زیر، نام آنرا تعریف کنید:

اکنون باید تگ هایی را که به Google Analytics مربوط هستند را انتخاب کرده (تیک بزنید)، مطابق تصویر زیر، و با کلیک روی دکمه Move فولدری که در بالا ساختیم (Google Analytics) را انتخاب کنید تا تگ های انتخابی شما به این پوشه منتقل شوند.

با انتقال تگ های GA به فولدر Google Analytics، سه تگ باقی می ماند که می توان برای آنها فولدری بنام Custom Triggers بسازید، مانند تصویرزیر، و آنها را به این فولدر انتقال دهید:

انتشار تغییرات GTM در وب سایت (Publish)

اعمال تغییرات انجام شده در GTM:

تگ هایی که تاکنون در Google Tag Manager تعریف کرده اید و تمام تغییراتی که در این سرویس انجام داده اید، در وب سایت شما فعال نمی باشند و فعلا در GTM قابلیت Preview دارند. برای اینکه این تغییرات را در وب سایت خود منتشر کنید، بصورت زیر عمل کنید.

در فضای کاری GTM روی دکمه SUBMIT واقع در گوشه سمت راست و بالای صفحه کلیک کنید. در پنجره ای که ظاهر می شود، لیست تمام کارهایی که تاکنون در GTM انجام داده اید قابل مشاهده می باشند. مطابق تصویر زیر:

درج مشخصات ورژن:

روی تب Publish and Create Version کلیک کرده (البته بصورت پیش فرض فعال می باشد)، سپس مطابق تصویر زیر مشخصات ورژن را وارد کنید:

پیش‌نمایش Version:

دو باکس مربوط به Version Name و Version Description را مانند تصویر بالا تعریف کنید. در نهایت دکمه آبی رنگ PUBLISH را در بالای صفحه بفشارید. اکنون پیش نمایش این ورژن بصورت زیر برای شما نمایش می یابد:

با انجام این کارها، تمام تگ ها و رویدادهایی که در سرویس Google Tag Manager تعریف کرده اید در وب سایت تان منتشر خواهند شد.

در بخش هفتم از آموزش GTM نحوه شخصی سازی فضای کاری (WorkSpace) و نیز Environment در گوگل تگ منیجر را آموزش می دهیم…

بخش هفتم: مدیریت فضای کاری

GTM Tutorial – Part 7 – Environment & Workspace

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

دلیل تعریف فضاهای کاری در GTM:

در یک Container می توان چندین فضای کاری (WorkSpace) تعریف کرد . کاربرد هر فضای کاری جایی مشخص می شود که بعنوان مثال در شرکتی چند تیم از سرویس مدیریت تگ گوگل استفاده می کند و یک تیم مسئول مدیریت تگ های Google Adwords است، یک تیم با سرویس Google Analytics می باشد و غیره…

می توان با تعریف فضای کاری مجزا برای هریک از این تیم ها، آنها را از هم جدا کرد.

نحوه تعریف فضای کاری جدید:

ابتدا مانند شکل زیر روی Default Workspace کلیک کنید تا وارد پنجره جدیدی شوید.

سپس روی دکمه پلاس (+) واقع در گوشه راست و بالای این صفحه، یک Workspace جدید بسازید. فرض کنید ما می خواهیم فضای کاری برای تیم سرویس ادوردز ایجاد کنیم. مانند تصویر زیر، نام آنرا Adwords Agency قرار دهید و یک توضیح کوتاه راجع به آن تعریف کنید.

در نهایت دکمه SAVE را بفشارید.

اکنون لیست فضاهای کاری موجود را بصورت زیر خواهید دید:

با تعریف یک فضای کاری برای تیم ادوردز، اگر یک نفر در این فضای کاری تگی تعریف کند، این تگ در فضاهای کاری دیگر قابل مشاهده نمی باشد.

ادغام فضاهای کاری در GTM

ترکیب کردن چند فضای کاری در GTM:

وقتی می خواهیم تغییرات اعمال شده در تمام فضاهای کاری را در وب سایت منتشر کنیم، باید ابتدا تمام فضاهای کاری را با یکدیگر ادغام کنیم. فرض کنید شما دو فضای کاری Default و Adwords دارید. به منظور ترکیب این دو Workspace، فضای کاری جدید یعنی Adwords را فعال کنید و دکمه SUBMIT و سپس دکمه PUBLISH را بفشارید.

اکنون اگر به تب workspaces برویم و فضای کاری Default را فعال کنیم، با پیغامی مبنی بر “a new container version is available – UPDATE WorkSpace” مواجه خواهیم شد. تصویر زیر را مشاهده نمائید:

روی UPDATE WORKSPACE کلیک کنید و در پنجره جدید دکمه UPDATE را بزنید.

در نهایت برای اینکه تغییرات هر دو فضای کاری در وب سایت اعمال شوند، هنگامی که در فضای کاری Default هستید، روی PUBLISH کلیک کنید.

مدیریت محیط (Managing Environment)

مدیریت Environment در GTM:

به منظور مدیریت Environment در GTM می بایست تب ADMIN را فعال کرده و سپس مطابق تصویر زیر، در تنظیمات مدیریت، آیتم Environment را انتخاب نمائید:

در نتیجه لیست محیط های موجود را مطابق شکل زیر خواهیم دید:

برای ایجاد یک محیط جدید در GTM روی NEW کلیک کنید و در پنجره جدید، مشخصات محیط را مطابق تصویر زیر وارد کنید:

در مرحله بعد با پیغام زیر مواجه خواهید شد:

دکمه Publish to DEV ENV را بفشارید و در پنجره زیر، ورژن موردنظر را انتخاب کرده و دکمه PUBLISH NOW را بزنید.

در مرحله پایانی پیغامی مبنی بر موفقیت آمیز بودن تعریف محیط جدید مشاهده می کنید.

حال اگر روی لینک Dev Env کلیک کنیم، یک پیش نمایش از این محیط بصورت یک پیغام پاپ آپ باز می شود. مطابق تصویر زیر:

حال اگر لینک واقع در تصویر فوق را در مرورگر خود وارد کنید، با پیامی به شکل زیر روبرو خواهید شد:

حال اگر روی محیط Live کلیک کنید، و آدرس موجود در پنجره جدید را در مرورگر خود اجرا کنید، پیام زیر را در مرورگر خود خواهید دید:

برای اینکه هربار نیاز نباشد بین محیط های Dev و Live سوئیچ کنید، می توانید مانند تصویر زیر، روی لینک Actions مقابل Dev Env کلیک کنید و گزینه Get Snippet را انتخاب نمائید.

پس از انتخاب آیتم Get Snippet پنجره پاپ آپ زیر مشاهده می شود:

اسکریپتی که در باکس بالا وجود دارد را کپی کرده و با کد تگ منیجر قبلی در بخش head جایگزین کنید.

انتشار Environment در GTM

تست تغییرات در محیط (Environment):

برای تست تغییرات فوق در بخش Environment ها، به منوی Variables رفته و یک متغیر User-Defined تعریف کنید. پس روی NEW کلیک کرده و نام آنرا environment قرار دهید. سپس روی Configuration کلیک کنید و از لیست موجود، گزینه Constant را انتخاب نمائید و عبارت dev را برای آن ست کنید.

وقتیکه دکمه SUBMIT و سپس PUBLISH را کلیک کنید، بصورت پیش فرض، محیط Live انتخاب شده است. روی Live کلیک کنید تا بتوانید از لیست تمام محیط ها، Environment موردنظر (در این مثال Dev) را انتخاب کنید. پس از انتخاب Dev Env یک نام و یک توضیح (name & description) برای ورژن انتشار تعریف کرده (مطابق تصویر زیر) و درنهایت دکمه PUBLISH بالای صفحه را بفشارید.

حال اگر صفحه وب سایت خود را در مرورگر رفرش کنید، در پنل دیباگ GTM خواهید دید که در بخش Variables مقدار متغیر environment برابر dev می باشد.

به پایان آموزش سرویس مدیریت تگ گوگل (گوگل تگ منیجر: Google Tag Manager) رسیدیم. امیدوارم از این آموزش استفاده لازم را برده باشید. لطفا با ایمیل EhsanSafari@hotmail.com با ما در تماس باشید. یا سوالات خود را از طریق فرم پایین مقاله برای ما ارسال کنید. با تشکر از همراهی شما

فهرست مطالب پنهان

1 بخش اول: معرفی و بررسی امکانات

1.1 ساخت اکانت در گوگل تگ منیجر:

1.2 محیط کاری گوگل تگ منیجر:

1.3 تب Versions در GTM:

1.9 کنترل دسترسی کاربران در GTM (User Access Control):

2 بخش دوم: پیاده‌سازی کد گوگل آنالیتیکس