با gtag.js داده ها را به Google Analytics ارسال کنید

در این صفحه نحوه استفاده از دستورات gtag.js برای ارسال داده ها از سایت خود به Google Analytics توضیح داده شده است.

ارسال داده با دستور event

هنگامی که قطعه کلی را به یک صفحه وب اضافه کردید، از دستور event برای ارسال داده به Google Analytics استفاده کنید. به عنوان مثال، از دستور event زیر برای نشان دادن اینکه یک کاربر با استفاده از حساب Google خود وارد شده است استفاده کنید:

gtag('event', 'login', {'method': 'Google'});

درباره فرمان event در مرجع API بیشتر بیاموزید.

مسیریابی داده ها به گروه ها و ویژگی ها

می توانید یک مجموعه از اطلاعات اندازه گیری را به یک یا چند شناسه دارایی Google Analytics و مجموعه دیگری از اطلاعات را به شناسه های دارایی دیگر ارسال کنید. می توانید ویژگی ها را در گروه ها سازماندهی کنید و داده ها را به آنها هدایت کنید.

به عنوان مثال، مثال کد زیر نحوه مسیریابی یک رویداد sign_in را به یک گروه «آژانس» که شامل دو ویژگی Google Analytics است، نشان می‌دهد.

// Configure a target
gtag('config', 'GA_MEASUREMENT_ID_1');
gtag('config', 'GA_MEASUREMENT_ID_2', { 'groups': 'agency' });
gtag('config', 'GA_MEASUREMENT_ID_3', { 'groups': 'agency' });

// Route this sign_in event to Analytics IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });

درباره نحوه گروه بندی و مسیریابی داده ها بیشتر بیاموزید.

بدانید چه زمانی یک رویداد ارسال شده است

در برخی موارد، باید بدانید که یک رویداد با موفقیت به Google Analytics ارسال شده است، بنابراین می توانید بلافاصله پس از آن اقدام کنید. این زمانی رایج است که شما نیاز به ضبط یک تعامل خاص دارید که کاربر را از صفحه فعلی دور می کند. بسیاری از مرورگرها به محض شروع بارگیری صفحه بعدی، اجرای جاوا اسکریپت را متوقف می کنند، به این معنی که دستورات event gtag.js شما ممکن است هرگز اجرا نشوند.

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

راه حل این است که رویداد را قطع کنید تا بارگذاری صفحه بعدی متوقف شود تا بتوانید رویداد را به Google Analytics ارسال کنید. پس از ارسال رویداد، فرم را به صورت برنامه ای ارسال کنید.

پیاده سازی توابع تماس مجدد رویداد

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

مثال زیر نشان می‌دهد که چگونه می‌توان اقدام ارسال پیش‌فرض یک فرم را لغو کرد، یک رویداد را به Google Analytics ارسال کرد و سپس با استفاده از تابع تماس رویداد، فرم را دوباره ارسال کرد:

// Get a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');

// Add a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevent the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Send the event to Google Analytics and
  // resubmit the form once the hit is done.
  gtag('event', 'signup_form_complete', {
    'event_callback': function() {
      form.submit();
    }
  });
});

رسیدگی به تایم اوت ها

مثال بالا یک اشکال دارد: اگر کتابخانه gtag.js بارگیری نشود، تابع تماس رویداد هرگز اجرا نخواهد شد و کاربران هرگز نمی توانند فرم را ارسال کنند.

هر زمان که عملکردهای مهم سایت را در تابع پاسخ به تماس رویداد قرار می دهید، همیشه باید از یک تابع timeout برای رسیدگی به مواردی که کتابخانه gtag.js بارگیری نمی شود استفاده کنید.

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

// Gets a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Creates a timeout to call submitForm after one second.
  setTimeout(submitForm, 1000);

  // Monitors whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where the event callback function fires normally.
  var formSubmitted = false;

  function submitForm() {
    if (!formSubmitted) {
      formSubmitted = true;
      form.submit();
    }
  }

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  gtag('event', 'signup_form_complete', {
    'event_callback': submitForm
  });
});

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

تابع ابزار زیر یک تابع را به عنوان ورودی می پذیرد و یک تابع جدید را برمی گرداند. اگر تابع برگردانده شده قبل از بازه زمانی فراخوانی شود (تایم اوت پیش فرض یک ثانیه است)، مهلت زمانی را پاک کرده و تابع ورودی را فراخوانی می کند. اگر تابع برگشتی قبل از بازه زمانی فراخوانی نشود، تابع ورودی بدون در نظر گرفتن فراخوانی می شود.

function createFunctionWithTimeout(callback, opt_timeout) {
  var called = false;
  function fn() {
    if (!called) {
      called = true;
      callback();
    }
  }
  setTimeout(fn, opt_timeout || 1000);
  return fn;
}

اکنون، می‌توانید تمام عملکردهای بازگشت به تماس رویداد را با یک مهلت زمانی بپیچید تا مطمئن شوید که سایت شما مطابق انتظار کار می‌کند، حتی در مواردی که رویدادهای شما ارسال نمی‌شوند یا کتابخانه gtag.js هرگز بارگیری نمی‌شود.

// Gets a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  gtag('event', 'signup_form', { 'event_callback': {
    createFunctionWithTimeout(function() {
      form.submit();
    })
  }});
});

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

به‌طور پیش‌فرض، gtag.js روش HTTPS و مکانیسم انتقال را برای ارسال بهینه بازدیدها انتخاب می‌کند. سه گزینه عبارتند از:

• "تصویر" (با استفاده از یک شی Image )
• xhr (با استفاده از یک شی XMLHttpRequest )
• 'beacon' (با استفاده از روش navigator.sendBeacon )

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

کد زیر مکانیسم انتقال را برای مرورگرهایی که از آن پشتیبانی می‌کنند، روی 'beacon' تنظیم می‌کند:

gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});