آموزش کار با گوگل تگ منیجر | Google Tag Maneger

2 هفته پیش
گوگل تگ منیجر

در این مقاله آموزشی با ابزار گوگل تگ منیجر و چگونگی دسترسی به ابزار ها و ساختار اصلی گوگل تگ منیجر آشنا می شویم و همینطور یاد میگیریم چطوری حساب کاربری Google Tag Maneger ایجاد می کنیم و یا گوگل تگ منیجری که برای سایت ما است، بیایم و با سایر کاربران به اشتراک بگذاریم و سطوح دسترسی و مجوز ها رو در داخلش یاد میگیریم.

همچنین بخوانید، ترفند های جالب در استفاده از مترجم گوگل | دانلود برنامه Google Translate

همینطور برای این که بیایم و یک تگ جدیدی را ایجاد کنیم و باهاش کار کنیم نیاز است تا با مخزن آشنا بشیم و چگونگی نصب Container رو داخل گوگل تگ منیجر یاد میگیریم و از Container هایی که داخل گوگل تگ منیجر ایجاد کردیم می توانیم داخل پروژه های دیگه استفاده نماییم که برای این کار Container گوگل تگ منیجر را داخل وردپرس نصب می کنیم و همینطور یاد میگیریم از تگ هایی که ایجاد کردیم به چه صورت استفاده کنیم.

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

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

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

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

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

برای دسترسی به این ابزار ابتدا فیلتر شکن خودتان را روشن کنید، سپس از اینجا وارد سایت مورد نظر شوید (https://tagmanager.google.com)

 

create-account-tag-manager

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

information-tag-manager

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

aacount-gmail

در داخل این صفحه لیست تمامی حساب های کاربری شما را نمایش می دهد. برای ایجاد حساب کاربری اگر تا به حال هیچ حساب کاربری ایجاد نکرده اید کافی است تا بر روی دکمه Create Account کلیک کنید.

create-account-tag-manager

وقتی شما این کار را انجام می دهید به شما صفحه ایجاد اکانت جدید را نمایش می دهد. در این قسمت دو بخش وجود دارد.

add-account-tag-manager

بخش َAccount Setup

در داخل اکانت ستاپ اسم اکانت را می نویسید، کشور را انتخاب می کنید که مهم نیست. گزینه تحت عنوان Share data anonymously with Google and others وجود دارد که داده های شما را به صورت ناشناس در اختیار گوگل قرار می دهد، بهتر است که تیک این گزینه را نزنید چرا که اگر مشکلی در داخل سایت شما به وجود بیاید این اطلاع رسانی سریع تر به گوگل ارجاع می شود و تبعات حذف شما از نتایج گوگل و مشکلات دیگه، سریع تر دامن گیر شما می شود اما از اون طرف هم اگر سایت شما مشکلی داشته باشد و مشکل را رفع کنید این اطلاع رسانی هم سریع تر به گوگل انجام می شود و سریع تر شما را به لیست نتایج خودش بر می گرداند یعنی دیتای شما مدام در اختیار گوگل قرار می گیرد.

add-a-new-account

بخش Container Setup

در این بخش باید نام Container خودتان را وارد کنید که آدرس دامنه خودتان را وارد می کنید و مشخص می کنید که این Container شما در کدام بخش قرار است استفاده بشود، در وب، ای او اس، اندروید و AMP که Web را انتخاب می کنید و گزینه ی Create را می زنید.

container-setuoدر این آموزش ما از افزونه WASP inspector Analytics استفاده می کنیم و با نصب کردن آن روی مرورگر گوگل کروم امکانات جالبی را به کروم اضافه کرده است. در قسمت بعدی باید قواعد و قوانین گوگل تگ منیجر رو قبول کنید و تیک آن را بزنید و بر روی گزینه ی Yes کلیک می کنید.

agree-google-tag-manager

 بعد از ایجاد حساب کاربری مشابه تصویر زیر به شما نمایش داده می شود که به این نیازی نداریم و آن را می بندیم.

script

 

panel

این میشه محیط اولیه در سرویس گوگل تگ منیجر. ساختاری که وجود دارد با استفاده از گزینه هایی که در ستون کناری است، می توانید به قسمت های مختلف دسترسی داشته باشید. در این داشبورد یکسری آماری وجود دارد که قسمت های مختلف این ابزار رو در اختیار ما قرار می دهد و در قسمت Version، ورژن های مختلف از Container را در اختیار شما قرار می دهد.

container panel

در قسمت Admin، پنل مدیریت این حساب کاربری که می توانید به آن دسترسی داشته باشید.

user manager

برای نصب افزونه ی WASP inspector کافی است آن را در داخل مرورگر کروم جستجو نمایید.(این افزونه ی گوگل کروم می باشد که مرتبط با گوگل تگ منیجر است.)

google wasp

wasp

شما با زدن دکمه Add to Chrome می توانید این افزونه را را روی مرورگر خودتان نصب نمایید.

سطح دسترسی

در این قست بعدی می خواهیم به دسترسی حساب کاربری و سطح دسترسی آنها بپردازیم و بر روی Admin می زنید که می توانید مشخص کنید که چه یوزر هایی به این پنل دسترسی داشته باشند.(User Managment)

user manager

در قسمت CONTAINER ،User Managment وجود دارد که تفاوت این دو که در یوزر منیجر با هم دارند این است که بخش اکانت، اکانت را با کاربران دیگر به اشتراک بگذارید اما در بخش CONTAINER، این امکان رو می دهد که بخش CONTAINER رو با دیگر کاربران به اشتراک بگذارید. بسته به هر کدام که مد نظر شما است می توانید از آنها استفاده نمایید. در اینجا من می خواهم CONTAINER را به اشتراک بگذارم. خب در ادامه بر روی User Managment که در قسمت CONTAINER وجود دارد، کلیک می کنیم.

container permission

در اینجا حساب های کاربری که در دسترس می باشد را مشاهده می کنید که اگر بخواهید یوزر جدیدی را اضافه کنید بر روی دکمه ی + آبی رنگ کلیک می کنید و بر روی Add User می زنید.

add user

در ادامه، که ایمیل را وارد کردید، سطح دسترسی آن اکانت را مشخص می کنید که بتواند اطلاعات داخل CONTAINER رو بخواند، بتواند ویرایش بزند، تایید کنید یا منتشر کند. توجه فرمایید ایمیل هایی که در این قسمت وارد می کنید، باید ایمیل هایی باشد که در سرویس جیمیل باشند و فعال باشند . در انتها هم بر روی Invite کلیک می کنید و کاربر رو دعوت می کنید.

send

برای سطح دسترسی قسمت Account هم دقیقا مثل مورد قبلی بر روی User Management کلیک می کنید.

user manager 1

در قسمت بعدی، لیست کاربران در دسترسی هاشون را مشاهده می کنید که بر روی دکمه آبی رنگ + می زنید و بر روی Add users کلیک می کنید.

use manager 2

 

ایمیل مورد نظر را وارد می کنید و سطح دسترسی رو مشخص می کنید که یوزر هست یا ادمین و همین طور به چه CONTAINER هایی دسترسی داشته باشد.

send

publish

پس به این شکل می توانید کاربران مختلفی را به پنل مدیریت اضافه نمایید و سطح دسترسی آنها را مدیریت کنیم که بتوانند به چه صورت به حساب کاربری و CONTAINER دسترسی داشته باشند.

ایجاد و مدیریت CONTAINER

در این قسمت می خواهیم به بررسی CONTAINER ها بپردازیم و اینکه به چه صورت می توانیم آنها را مدیریت کنیم. برای ایجاد حساب کاربری در CONTAINER در بخش قبلی دیدیم که وقتی وارد سرویس گوگل تگ منیجر می شویم به چه صورت اطلاعات یک CONTAINER را وارد می کنیم. در ادامه ما در قسمت Admin می توانیم به بررسی CONTAINER های مورد نظر بپردازیم و چطور آنها را مدیریت و ایجاد کنم.

create container

در ابتدا بر روی علامت + کلیک می کنیم که با این کار CONTAINER جدیدی ایجاد می کنید. در قسمت بعدی نام Container را وارد می کنید و مشخص می کنید که این Container در کجا استفاده شود. سپس بر روی Create کلیک می کنید.

create container1

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

aacount

تنظیمات Container

در قسمت پنل Admin بر روی Container Settings کلیک می کنید.

settings container

در قسمت بعدی می توانید نام Container خودتان را عوض کنید یا آن را حذف نمایید. این که Container کجا قرار است استفاده بشود، امکان تغییر وجود ندارد که پس از انجام تغییرات مورد نظر می توانید بر روی Save کلیک نمایید.

container setting2

در قسمت Container Activity فعالیت هایی که در داخل Container شده است را به شما نمایش می دهد که می گوید که دو ساعت قبل، CONTAINER ایجاد شده است که اگر تغییری ایجاد شود در قسمت Container Activity گزارشش را به شما می دهد که چه کاربری چه کاری رو چند دقیقه انجام داده است.

container activity

نصب Google Tag Manager

چیزی که بیشتر از همه مهم می باشد نحوه ی نصب Google Tag Manager است که چطور این Container رو در داخل یک وب سایت فراخوانی کنید. برای این کار کافی است Install Google Tag Manager کلیک کنید تا اسکریپت مربوط به Container را به ما نمایش دهد.

install google tag managercode

در قسمت بالا دو حالت دارید، در قسمت اول می گوید که کد را در داخل تگ head قرار بدید و در کادر دوم می گوید به صورت اختیاری در داخل تگ body قرار دهید.

html

اگر این ساختار HTML صفحه شما باشد، کد مورد نظر را قبل از تگ بسته ی Head قرار می دهید یا اگر هم می خواهید از روش دوم استفاده نمایید باید قبل از بسته شدن تگ body قرار دهید. اگر بخواهید در یک سایت ورد پرسی آن را نصب کنید، شما می توانید در پنل مدیریت ورد پرس خود از قسمت نمایش، ویرایشگر پوسته را انتخاب می کنید.

wordpress

فایل مربوط به سربرگ یا header.php را پیدا می کنید و جایی که تگ head بسته می شود، میایم و این کد رو قرار می دهیم و بعد از اینکه، این کار را انجام دادید، به روز رسانی پرونده را کلیک می کنید.

code weordpress

اگر شما به پنل گوگل تگ منیجر رفته باشید، کافی است که شما یک بار Submit را کلیک کنید و Container را publish کنید. در اینجا نام ورژن را می نویسید. در قسمت Version Description اگر توضیحاتی مد نظر شما باشد را در اینجا وارد می کنید. همچنین می توانید محیط خودتان را لایو انتخاب کنید یا سایر محیط ها که می توانید خودتان تغییر بدهید که همان روی لایو می گذارید و روی publish می زنید.

panel publish container

بررسی تگ ها

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

account

در پنل کاربری قسمتd به نام New Tag وجود دارد یا می توانید وارد قسمت Tag بشوید و new را انتخاب نمایید که هر دوی آنها ما رو به یک قسمت هدایت می کند.

new tag

tags

شما اگر بر روی Add a new tag کلیک کنید پنجره ی جدیدی به شما نشان داده می شود. در این پنجره ابتدا نام تگ خودتان را وارد می کنید، بعد از آن باید مشخص کنیم که Tag Configuration است یا Triggering است که ما می خواهیم یک تگ جدید ایجاد کنیم سپس بر روی Tag Configuration کلیک می کنیم.

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

tag trigger

سپس از بین سرویس های موجود، Google Analytics: Universal Analytics انتخاب می کنید.

chose tag

در قسمت بعدی، Track Type را Page View انتخاب می کنید و در قسمت Google Analytics Settings می توانید متغییر تعریف کنید که از این قسمت رد می شوید. در قسمت Advanced Settings هم می توانید اولیت را مشخص کنید که بیشترین عدد در بین تگ ها بالاترین اولویت را دارد که اولویت به صورت پیش فرض صفر می باشد.

قسمت بعدی که بسیار مهم می باشد Tag firing options است که مشخص می کند آن را به چه صورت اجرا کند، تعریف می کنم به اضای هر صفحه این تگ رو ارجاع کند یا به ازای هر رویداد، بتواند این تگ رو اجرا کند. با استفاده از Tag Sequencing می توانید قبل از اجرای تگ یا بعد از اجرای تگ، یک تگ دیگری رو اجرا کند و در انتها بر روی save می زنید.

analitics

در ادامه به شما پیام می دهد که شما هیچ تریگری ندارید، اگر بخواهید تریگر اضافه کنید بر روی اد تریگر کلیک می کنید در غیر این صورت بر روی Save Tag می زنید، این کار باعث می شود که تگ مورد نظر ذخیره شود. در ادامه به شما خطا می دهد و می گوید که هیچ متغییری اینجا تعریف نکرده اید که باید Tracking ID گوگل آنالیتیکس خودتان را وارد نمایید.

mistake

به جای این که، این کار را کنیم در قسمت   Custom Html ، Tag Type را انتخاب می کنید. سپس وارد حساب کاربری خود در گوگل آنالیتیکس می شوید.

admin analitics

قسمت Admin را انتخاب می کنید، در قسمت Tracking code ،Tracking info را کلیک می کنیم تا کد نصب در گوگل آنالیتیکس را به شما بدهد.

taking code

سپس باید کد مورد نظر که در وسط صفحه قرار دارد را کپی نمایید.

code

در ادامه در گوگل تگ منیجر Custom HTML را انتخاب نمایید و کد مورد نظر را در قسمت Html وارد می کنید.

custom html - آموزش کار با گوگل تگ منیجر | Google Tag Maneger

در نتیجه شما بر روی دکمه Save کلیک می کنید. الان ما در محیط کاری خودمان یک تغییری را ایجاد کردیم و در پنل مورد نظر بر روی preview کلیک می کنیم تا پیشنمایش آن، به ما نشان داده شود.

submit

همچنین می توانید بر روی submit کلیک نمایید و سپس ورژن و توضیحات خودتان را بنویسید و publish بزنید.

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

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

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

variable

برای دسترسی به تغییر ها کافی است از قسمت سمت چپ بر روی Variables کلیک کنید. برای ایجاد متغییر هایی که توسط خود سیستم پیاده سازی شده است، یک لیست آماده وجود دارد که می توانیم به آنها دسترسی داشته باشیم که این متغییر ها بسته به کاری که انجام می دهند، دسته بندی می شوند. این متغییر ها مانند متغییر های مربوط به پیج آدرس صفحه، میزبان صفحه، مسیر صفحه و چیزی که کاربر را به آن صفحه فرستاده است و… دسته بندی می شوند.

varaible built

در داخل قسمت Utilities، رویداد ها رو داریم، در Errors، انواع محتلف خطا ها رو داریم. در قسمت کلیک ها هم، کلیک بر روی یک المان خاص، کلاس کلیک، آیدی کلیک و… وجود دارد.

فرم ها هم انواع مختلفی وجود دارد که می توانید استفاده نمایید. در قسمت History هم تاریخچه کاربر، در قسمت ویدیو، اطلاعات مربوط به ویدیو، در قسمت Scrolling اطلاعات مربوط به اسکرول کردن و در قسمت Visibility به ما اجازه می دهند اطلاعات مربوط به نمایان شدن المان ها را کنترل کنیم.

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

user difine

 

 

در ابتدا شما باید اسم متغییر را وارد نمایید و  در ادامه مشخص می کنید که این متغییر من چه چیزی خواهد بود. در اینجا لیست متغییر هایی مشاهده می کنید که می توانید از هر کدام که بخواهید استفاده نمایید. بسته به این چیزی که شما دارید ازش استفاده می کنید ممکن نوع متغییرتان متفاوت باشد.

بررسی تریگر ها

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

triggers

روی گزینه ی NEW کلیک می کنید و وارد صفحه ایجاد تریگر جدید می شوید و برای پیکربندی تریگر جدید بر روی آیکون مداد کلیک می کنید.

triggers config

در این قسمت انواع مختلف رویداد هایی که در یک صفحه امکان اتفاق افتادنش هست رو برای من ایجاد کرده است مثلا DOM Ready به این معنا است که صفحه به صورت کامل لود بشود، پیج ویو مشاهده ی صفحه را مشخص می کند، Window Loaded بارگذاری پنجره را مشخص می کنید. گزینه های دیگری مانند کلیک کردن بر روی همه المان ها یا کلیک کردن بر روی لینک خاص، ارتباط برقرار کردن با یوزر یا custom event وجود دارد که می توانید رویداد های مشخصی را براش تعریف کنیم، یا اینکه بر اساس تایمر و بعد از گذشتن مدت زمانی، کاری را انجام دهیم یا یک گروه از تریگر ها را ایجاد کنیم.

choose trigger

فعلا می خوام یک تریگر ساده ایجاد کنم و Page View را انتخاب می کنم. در قسمت بعدی در پیج ویو می توانیم مشخص کنیم همه صفحات باشه یا یک صفحه مشخص باشد، که می توانید یک صفحه خاصی را انتخاب نمایید و مشخص می کنیم که مسیر صفحه شامل عبارتی باشد(مثلا Shop) و وقتی که کاربر وارد صفحه ای بشود که عبارت shop باشد این تریگر اجرا می شود یا اگه بگم All page view که در همه صفحات ایجاد می شود و تریگر با نام مورد نظر را ذخیره می کنید.

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

حرف آخر

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

0/5 ( 0 نظر )
0
نویسنده مطلب AmiR

بدون دیدگاه