نحوه ساخت تگ سرور

در مقدمه‌ای بر برچسب‌گذاری سمت سرور ، شما یک مرور کلی از برچسب‌گذاری سمت سرور در Tag Manager دریافت کردید. شما یاد گرفتید که کلاینت‌ها چه هستند و چه کاری انجام می‌دهند: کلاینت‌ها داده‌های رویداد را از دستگاه‌های کاربران شما دریافت می‌کنند و آن را برای استفاده توسط بقیه کانتینر تطبیق می‌دهند. این مقاله نحوه پردازش آن داده‌ها را در برچسب‌های سمت سرور شرح می‌دهد.

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

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

• گوگل آنالیتیکس
• درخواست HTTP

اگر می‌خواهید داده‌ها را به جایی غیر از گوگل آنالیتیکس ارسال کنید، یا به ویژگی‌های بیشتری نسبت به آنچه تگ درخواست HTTP ارائه می‌دهد نیاز دارید، باید از تگ دیگری استفاده کنید. می‌توانید تگ‌های اضافی را در گالری قالب انجمن پیدا کنید یا می‌توانید تگ خودتان را بنویسید. این آموزش اصول اولیه نوشتن تگ‌های خودتان برای یک کانتینر سرور را به شما آموزش می‌دهد.

اهداف

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

پیش‌نیازها

• یک کانتینر سرور مستقر
• آشنایی با Tag Manager، Server Containerها و مفاهیم اولیه آنها مانند Clientها ، Tagها ، Triggers و Variableها
• آشنایی با اصول اولیه نوشتن قالب برای تگ‌ها و متغیرها

برچسب Baz Analytics

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

Baz Analytics یک سرویس تحلیلی فرضی و ساده است که داده‌ها را از طریق درخواست‌های HTTP GET به https://example.com/baz_analytics دریافت می‌کند. این سرویس دارای پارامترهای زیر است:

پارامتر	مثال	توضیحات
شناسه	BA-1234	شناسه حساب Baz Analytics شما.
انگلیسی	کلیک	نام رویداد.
ل	https://www.google.com/search?q=sgtm	آدرس اینترنتی (URL) صفحه‌ای که رویداد در آن رخ داده است.
تو	۲۳۸۴۲۹۴۸۹۲	شناسه کاربری که عمل را انجام می‌دهد. برای مرتبط کردن چندین عمل به یک کاربر واحد استفاده می‌شود.

پیکربندی برچسب

اولین کاری که باید انجام دهید ایجاد الگوی برچسب است. به بخش الگوها در کانتینر خود بروید و در بخش الگوهای برچسب ، روی «جدید» کلیک کنید. یک نام و توضیح به برچسب خود اضافه کنید.

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

1. پیکربندی کامل : برای هر پارامتر یک فیلد پیکربندی اضافه کنید. از کاربر بخواهید همه چیز را به طور صریح تنظیم کند.
2. بدون پیکربندی : هیچ گزینه‌ای برای پیکربندی تگ وجود ندارد. تمام داده‌ها مستقیماً از رویداد گرفته می‌شوند.
3. برخی پیکربندی‌ها : برای برخی پارامترها فیلد داشته باشید و برای برخی دیگر نداشته باشید.

داشتن فیلد برای هر پارامتر بسیار انعطاف‌پذیر است و به کاربر کنترل کامل بر پیکربندی تگ‌هایش را می‌دهد. با این حال، در عمل، این معمولاً منجر به کارهای تکراری زیادی می‌شود. به طور خاص، مواردی مانند پارامتر l در Baz Analytics که حاوی URL صفحه است، واضح و جهانی هستند. وارد کردن داده‌های یکسان و بدون تغییر در هر بار پیکربندی تگ، کاری است که بهتر است به کامپیوتر واگذار شود.

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

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

داده‌ها از کجا می‌آیند؟

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

داده‌های مشخص‌شده توسط کاربر، هر چیزی است که کاربر در یک دستور event gtag.js قرار می‌دهد. برای مثال، دستوری مانند این:

gtag('event', 'search', {
  search_term: 'beets',
});

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

{
  event_name: 'search',
  search_term: 'beets',
}

این به اندازه کافی ساده است، اما از دیدگاه تگ، کار با آن بسیار دشوار است. از آنجا که این داده‌ها توسط کاربر وارد می‌شوند، می‌توانند هر چیزی باشند. شاید، همانطور که در بالا ذکر شد، کاربر فقط رویدادها و پارامترهای پیشنهادی را ارسال کند، اما هیچ الزامی برای انجام این کار وجود ندارد. به استثنای مهم مکان (اما نه مقدار!) پارامتر event_name ، هیچ تضمینی در مورد شکل یا ساختار داده‌های کاربر وجود ندارد.

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

• ip_override
• language
• page_location
• page_referrer
• page_title
• screen_resolution
• user_agent

علاوه بر این، اگر درخواست سرور از یک مرورگر وب باشد، ممکن است داده‌های کوکی مرورگر نیز از طریق API getCookieValue در دسترس باشند.

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

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

با در نظر گرفتن این نکته، نگاهی دوباره به پارامترهای تگ Baz Analytics بیندازید.

• شناسه اندازه‌گیری، id : از آنجا که به طور خودکار جمع‌آوری نمی‌شود، نمونه بارزی از مقداری است که باید هنگام پیکربندی برچسب توسط کاربر وارد شود.
• نام رویداد، en : همانطور که در بالا ذکر شد، نام رویداد همیشه می‌تواند مستقیماً از پارامتر event_name گرفته شود. با این حال، از آنجا که مقدار آن توسط کاربر تعریف می‌شود، ایده خوبی است که در صورت نیاز، امکان لغو نام را فراهم کنید.
• آدرس صفحه، l : این مقدار را می‌توان از پارامتر page_location گرفت که به طور خودکار توسط تگ مرورگر گوگل آنالیتیکس در هر رویداد جمع‌آوری می‌شود. بنابراین، نباید از کاربر بخواهید که مقداری را به صورت دستی وارد کند.
• شناسه کاربری، u : در تگ سرور Baz Analytics، پارامتر u نه توسط کاربر تعیین می‌شود و نه به طور خودکار توسط تگ موجود در صفحه جمع‌آوری می‌شود. در عوض، در یک کوکی مرورگر ذخیره می‌شود تا کاربران بتوانند در چندین بازدید از وب‌سایت شناسایی شوند. همانطور که در پیاده‌سازی زیر مشاهده خواهید کرد، این تگ سرور Baz Analytics است که از API setCookie برای تنظیم کوکی استفاده می‌کند. این بدان معناست که تگ Baz Analytics تنها چیزی است که می‌داند کوکی کجا و چگونه ذخیره می‌شود. مانند l ، پارامتر u باید به طور خودکار جمع‌آوری شود.

وقتی تنظیمات مربوط به تگ را انجام دادید، باید چیزی شبیه به این باشد:

پیاده‌سازی برچسب

حالا که پیکربندی تگ به طور کامل انجام شد، آماده‌اید تا به سراغ پیاده‌سازی رفتار آن در جاوااسکریپتِ در حالت سندباکس بروید.

این تگ باید چهار کار انجام دهد:

1. نام رویداد را از پیکربندی تگ دریافت کنید.
2. آدرس صفحه را از ویژگی page_location رویداد دریافت کنید.
3. محاسبه شناسه کاربر. این تگ، شناسه کاربر را در کوکی‌ای به نام _bauid جستجو می‌کند. اگر آن کوکی وجود نداشته باشد، تگ مقدار جدیدی را محاسبه کرده و آن را برای درخواست‌های بعدی ذخیره می‌کند.
4. یک URL بسازید و درخواستی به سرور جمع‌آوری Baz Analytics ارسال کنید.

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

• نباید رویداد را بررسی کرد تا مشخص شود که آیا باید اجرا شود یا خیر. تریگر برای همین کار ساخته شده است.
• نباید کانتینر را با API runContainer اجرا کرد. این وظیفه کلاینت است.
• به استثنای مهم کوکی‌ها، نباید سعی کند مستقیماً با درخواست یا پاسخ تعامل داشته باشد. این نیز وظیفه کلاینت است.

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

با در نظر گرفتن همه این موارد، در زیر یک پیاده‌سازی حاشیه‌نویسی‌شده از این تگ در JS سندباکس‌شده آورده شده است.

const encodeUriComponent = require('encodeUriComponent');
const generateRandom = require('generateRandom');
const getCookieValues = require('getCookieValues');
const getEventData = require('getEventData');
const logToConsole = require('logToConsole');
const makeString = require('makeString');
const sendHttpGet = require('sendHttpGet');
const setCookie = require('setCookie');

const USER_ID_COOKIE = '_bauid';
const MAX_USER_ID = 1000000000;

// The event name is taken from either the tag's configuration or from the
// event. Configuration data comes into the sandboxed code as a predefined
// variable called 'data'.
const eventName = data.eventName || getEventData('event_name');

// page_location is automatically collected by the Google Analytics tag.
// Therefore, it's safe to take it directly from event data rather than require
// the user to specify it. Use the getEventData API to retrieve a single data
// point from the event. There's also a getAllEventData API that returns the
// entire event.
const pageLocation = getEventData('page_location');
const userId = getUserId();

const url = 'https://www.example.com/baz_analytics?' +
    'id=' + encodeUriComponent(data.measurementId) +
    'en=' + encodeUriComponent(eventName) +
    (pageLocation ? 'l=' + encodeUriComponent(pageLocation) : '') +
    'u=' + userId;

// The sendHttpGet API takes a URL and returns a promise that resolves with the
// result once the request completes. You must call data.gtmOnSuccess() or
// data.gtmOnFailure() so that the container knows when the tag has finished
// executing.
sendHttpGet(url).then((result) => {
  if (result.statusCode >= 200 && result.statusCode < 300) {
    data.gtmOnSuccess();
  } else {
    data.gtmOnFailure();
  }
});

// The user ID is taken from a cookie, if present. If it's not present, a new ID
// is randomly generated and stored for later use.
//
// Generally speaking, tags should not interact directly with the request or
// response. This prevents different tags from conflicting with each other.
// Cookies, however, are an exception. Tags are the only container entities that
// know which cookies they need to read or write. Therefore, it's okay for tags
// to interact with them directly.
function getUserId() {
  const userId = getCookieValues(USER_ID_COOKIE)[0] || generateRandom(0, MAX_USER_ID);
  // The setCookie API adds a value to the 'cookie' header on the response.
  setCookie(USER_ID_COOKIE, makeString(userId), {
    'max-age': 3600 * 24 * 365 * 2,
    domain: 'auto',
    path: '/',
    httpOnly: true,
    secure: true,
  });

  return userId;
}

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

• مقادیر کوکی را می‌خواند: _bauid
• داده‌های رویداد را می‌خواند: event_name و page_location
• درخواست‌های HTTP را ارسال می‌کند: https://www.example.com/*
• یک کوکی تنظیم می‌کند: _bauid

همچنین باید برای تگ خود تست بنویسید. برای مطالعه بیشتر در مورد تست قالب، بخش تست‌ها را در راهنمای توسعه‌دهنده قالب مطالعه کنید.

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

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

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

نتیجه‌گیری

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

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