ارسال اطلاعات به گوگل آنالیتیکس

آخرین خط قطعه اندازه‌گیری جاوا اسکریپت یک دستور send را به صف فرمان ga() اضافه می‌کند تا یک صفحه نمایش به Google Analytics ارسال شود:

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

شیئی که ارسال را انجام می دهد ردیاب است که برای ایجاد در خط قبلی کد برنامه ریزی شده بود و داده ای که ارسال می شود داده های ذخیره شده در آن ردیاب است.

این راهنما روش‌های مختلف ارسال داده به Google Analytics را توضیح می‌دهد و نحوه کنترل داده‌های ارسالی را توضیح می‌دهد.

بازدیدها، انواع ضربه ها و پروتکل اندازه گیری

هنگامی که یک ردیاب داده‌ها را به Google Analytics ارسال می‌کند، به آن ارسال ضربه می‌گویند و هر ضربه باید یک نوع ضربه داشته باشد. تگ Google Analytics یک ضربه از نوع pageview ارسال می کند. دیگر انواع ضربه شامل screenview ، event ، transaction ، item ، social ، exception و timing است. این راهنما به تشریح مفاهیم و روش‌های مشترک برای همه انواع ضربه می‌پردازد. راهنماهای جداگانه برای هر نوع ضربه را می توان در بخش اندازه گیری تعاملات مشترک کاربر در ناوبری سمت چپ یافت.

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

اگر هنگام بارگذاری صفحه ای که از analytics.js استفاده می کند، ابزارهای توسعه دهندگان مرورگر خود را باز دارید، می توانید بازدیدهای ارسال شده را در برگه شبکه مشاهده کنید. به دنبال درخواست های ارسال شده به google-analytics.com/collect بگردید.

چه داده هایی ارسال می شود

هنگام ارسال ضربه به پروتکل اندازه‌گیری، ردیاب‌ها همه فیلدهایی را که در حال حاضر ذخیره شده‌اند و پارامترهای پروتکل اندازه‌گیری معتبر هستند ارسال می‌کنند. به عنوان مثال، فیلدهایی مانند title و location ارسال می شوند اما cookieDomain و hitCallback ارسال نمی شوند.

در برخی موارد، شما می خواهید فیلدهایی را برای ضربه فعلی به Google Analytics ارسال کنید، اما برای بازدیدهای بعدی نه. نمونه‌ای از آن یک رویداد هیت است که در آن فیلدهای eventAction و eventLabel فقط مربوط به ضربه فعلی هستند.

برای ارسال فیلدها فقط با ضربه فعلی، می توانید آنها را به عنوان آرگومان به متد send ارسال کنید. برای ارسال داده‌های میدانی با تمام بازدیدهای بعدی، باید ردیاب را با استفاده از روش set به‌روزرسانی کنید.

روش ارسال

متد send ردیاب را می توان مستقیماً بر روی خود شی ردیاب یا با افزودن یک دستور send به صف فرمان ga() فراخوانی کرد. از آنجایی که در بیشتر مواقع شما مرجعی به شی ردیاب ندارید، استفاده از صف فرمان ga() روش پیشنهادی برای ارسال داده های ردیاب به Google Analytics است.

با استفاده از صف فرمان ga()

امضای افزودن دستور send به صف فرمان ga() به صورت زیر است:

ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);

همانطور که در بالا ذکر شد، مقادیر مشخص شده از طریق فیلدهای hitType ، ...fields ، و پارامترهای fieldsObject فقط برای ضربه فعلی ارسال می شوند. آنها روی شی ردیاب ذخیره نمی شوند و با ضربه های بعدی ارسال نمی شوند.

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

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

ساده ترین راه برای استفاده از دستور send ، که برای همه انواع ضربه کار می کند، عبور دادن همه فیلدها با استفاده از پارامتر fieldsObject است. مثلا:

ga('send', {
  hitType: 'event',
  eventCategory: 'Video',
  eventAction: 'play',
  eventLabel: 'cats.mp4'
});

برای راحتی، انواع ضربه های خاص اجازه می دهند که فیلدهای رایج مورد استفاده مستقیماً به عنوان آرگومان به دستور send ارسال شوند. به عنوان مثال، دستور send بالا برای نوع ضربه "رویداد" می تواند به صورت زیر بازنویسی شود:

ga('send', 'event', 'Video', 'play', 'cats.mp4');

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

استفاده از یک ردیاب با نام

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

دستور send زیر در ردیاب به نام "myTracker" فراخوانی می شود:

ga('myTracker.send', 'event', 'Video', 'play', 'cats.mp4');

روی خود شی ردیاب

اگر مرجعی به شی ردیاب دارید، می توانید مستقیماً روش send آن ردیاب را فراخوانی کنید:

ga(function(tracker) {
  tracker.send('event', 'Video', 'play', 'cats.mp4');
});

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

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

نمونه ای از این موارد زمانی است که می خواهید رویدادی را به Google Analytics ارسال کنید تا ثبت کند که کاربر روی دکمه ارسال فرم کلیک کرده است. در بیشتر موارد، با کلیک بر روی دکمه ارسال، بلافاصله صفحه بعدی بارگیری می شود و دستورات ga('send', ...) اجرا نمی شوند.

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

بازگشت به تماس

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

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

// 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.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: function() {
      form.submit();
    }
  });
});

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

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

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

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

// 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);

  // Keeps track of whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where `hitCallback` 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.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: submitForm
  });
});

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

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

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

اکنون می‌توانید به راحتی همه عملکردهای hitCallback را با یک مهلت زمانی بپیچید تا مطمئن شوید که سایت شما همانطور که انتظار می‌رود کار می‌کند، حتی در مواردی که بازدیدهای شما ارسال نمی‌شوند یا کتابخانه analytics.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.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: createFunctionWithTimeout(function() {
      form.submit();
    })
  });
});

تعیین مکانیسم های مختلف حمل و نقل

به‌طور پیش‌فرض، analytics.js روش HTTP و مکانیسم انتقال را انتخاب می‌کند تا با آن بازدیدها را به‌طور بهینه ارسال کند. این سه گزینه عبارتند از 'image' (با استفاده از یک شی Image'xhr' (با استفاده از یک شی XMLHttpRequest )، یا 'beacon' با استفاده از روش جدید navigator.sendBeacon .

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

اگر مرورگر کاربر شما از navigator.sendBeacon پشتیبانی می‌کند، می‌توانید 'beacon' به عنوان مکانیزم transport مشخص کنید و نگران تنظیم یک تماس برگشتی نباشید.

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

ga('create', 'UA-XXXXX-Y', 'auto');

// Updates the tracker to use `navigator.sendBeacon` if available.
ga('set', 'transport', 'beacon');

مراحل بعدی

اندازه گیری انواع خاصی از تعاملات کاربر گاهی اوقات می تواند به پیاده سازی های پیچیده نیاز داشته باشد. با این حال، در بسیاری از موارد این پیاده سازی ها قبلاً توسعه یافته و به عنوان افزونه analytics.js در دسترس قرار گرفته اند. راهنمای بعدی نحوه استفاده از افزونه های analytics.js با صف فرمان ga() را توضیح می دهد.