Skip to content

در یکپارچه‌سازی با استفاده از Google Tag Manager بدون تغییر Source Code می‌توان SDK متریکس را در وبسایت خود پیاده‌سازی کنید. برای این کار ابتدا مستندات مربوط به WebSDK را مطالعه کرده سپس به ادامه همین مطلب بازگردید.

در Google Tag Manager سه تعریف وجود دارد؛ که برای پیاده‌سازی به این سه تعریف نیازمندیم.

  • Folder: فولدرها برای دسته‌بندی Tagها و Triggerها بکار می‌روند.

  • Tag: تمامی کدهای مربوط به SDK درون Tagها پیاده‌سازی می‌شوند. و زمان اجرای آن‌ها توسط Triggerها مشخص می‌شود.

  • Trigger: مدت زمان اجرای Tagها را مشخص می‌کنند.

پیاده‌سازی

ایجاد Folder متریکس

با استفاده از تب Folders یک فولدر با نام Metrix SDK ایجاد کنید. انجام این مرحله الزامی ندارد اما برای دسته‌بندی مناسب Tag ها و Trigger ها از اهمیت ویژه‌ای برخوردار است.

Gtag folder

حال شما می‌توانید Tag ها Trigger های مربوط به پیاده‌سازی SDK را درون این فولدر قرار دهید.

اضافه‌کردن Script متریکس و شروع به کار آن

برای اضافه کردن اسکریپت متریکس به وبسایت خود نیازمند تعریف یک Tag هستید. به همین منظور با زدن بر روی آیکون سه نقطه بر روی فولدر گزینه‌ی Add New Tag را انتخاب نمایید.

Gtag new tag

در پنجره‌ی باز شده دو بخش با نام‌های Tag Configuration و Triggering وجود دارد که در بخش Tag Configuration کدهای جاوااسکریپتی مربوط به SDK را پیاده‌سازی خواهیم کرد. با زدن روی این بخش پنجره‌ای جدید باز خواهد شد که در آن نوع Tag را Custom HTML انتخاب خواهیم کرد.

Gtag create tag 1

با انتخاب این گزینه Google Tag Manager محیطی برای پیاده‌سازی کدهای HTML و Javascript در اختیار ما قرار می‌دهد.

Gtag create tag 2

برای اضافه کردن اسکریپت متریکس در ابتدا خط زیر را داخل این محیط اضافه می‌کنیم.

<script src="https://cdn.metrix.ir/sdk/web/metrix.umd-2.3.0.js"></script>

برای شروع به کار SDK متریکس داخل scriptای مجزا، SDK را init می‌کنیم.

<script>
  var config = {} // Change and config based on your needs
  Metrix.init('YOUR_APP_ID', 'YOUR_API_KEY', config);
</script>

برای اجرا شدن این اسکریپت نیازمند تعریف یک Trigger نیز برای آن هستیم. لذا با کلیک کردن بر روی بخش Triggering می‌توان یک Trigger از پیش ساخته‌شده برای آن انتخاب کرده یا اقدام به تعریف یک Trigger جدید کنیم. در صورت نیاز به تعریف Trigger جدید با زدن روی آیکون + با پنجره‌ی زیر مواجه شده و می‌توان Trigger جدید تعریف نمود.

define new trigger

Google Tag Manager بصورت پیش‌فرض تعدادی Trigger Type درون خود تعریف کرده است. بطور مثال می‌توان با انتخاب Page View از تایپ Page View ، اجرا شدن این تریگر را روی ویو کردن تمامی صفحات گذاشته یا از طریق Trigger Configuration با اعمال فیلتر، روی صفحات خاص اعمال کنیم.

define new trigger 2

با Save نمودن این Trigger جدید، بعنوان Triggering تگ تعریف شده انتخاب می‌شود.

شناساندن کاربر به متریکس

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

<script>
  if (##USER_INFO_IS_PRESENT##) { // Check user info is present
    Metrix.authorizeUser(##USERNAME_OF_USER##); // Authorize user with its username
  }
</script>

deauthorize

ارسال رخداد کاربران

طبق این بخش از داکیومنت وب برای ارسال ایونت و رخدادهای کاربران نیازمند تعریف یک Tag جدید همانطور که در قسمت‌های پیشین بیان شد هستید. برای ارسال ایونت بسته به نیازمندی خود باید Trigger مورد نظر خود را تعریف کنید. Tag مورد نظر برای ارسال ایونت می‌تواند به صورت زیر باشد:

<script>
  var customAttributes = {} // Change based on your custom attributes.
  Metrix.newEvent("YOUR_EVENT_SLUG", customAttributes);
</script>

به طور مثال این ایونت می‌تواند روی کلیک بر روی یک المان با ID مشخص ارسال شود؛ بنابراین Trigger Type این Tag را باید از نوع Click تعریف کرده و در صورت نیاز فیلتر‌های خود را روی آن اعمال کنید.

gtag define trigger 3

gtag define trigger 4

یا در مثالی دیگر در صورت View کردن یک Page مشخص نیاز به ارسال ایونت دارید که در این صورت باید Trigger Type را از نوع Page View تعریف نمایید.

فعالسازی webpush

همانند این بخش از داکیومنت وب، بسته به روش مورد نظر برای دریافت اجازه پوش از کاربر ممکن است نیازمند تعریف Tag و Trigger جدید یا تغییر تنظیمات Config هنگام init کردن SDK باشید.

بازگرداندن کاربر به حالت ناشناس

زمانی که کاربر شما از وبسایت شما Logout می‌کند باید آن را به حالت ناشناس بازگردانید بنابراین می‌توانید با تعریف یک Trigger روی دکمه‌ی Logout و متصل کردن آن به یک تگ حاوی اسکریپت زیر کاربر را به حالت ناشناس بازگردانید.

<script>
  Metrix.deauthorizeUser()
</script>

منتشر کردن تغییرات

پس از آنکه تمامی Tagها و Triggerهای مورد نیاز خود را تعریف کرده و از درستی آن اطمینان حاصل کردید برای در دسترس قرار گرفتن این تغییرات روی محیط Production باید این تغییرات را Publish کنید. بنابراین با زدن روی دکمه‌ی Submit با پنجره‌ی زیر روبرو خواهید شد:

publish

با پرکردن فیلد Version Name یک عنوان برای تغییرات خود وارد کرده و در انتها دکمه‌ی Publish را بزنید. پس از چند دقیقه تغییرات شما روی وبسایت شما در دسترس خواهد بود.