التفاعلات الاجتماعية - تتبّع الويب (ga.js)

يوضّح هذا المستند كيفية استخدام "إحصاءات Google" للحصول على مقاييس التفاعل على شبكات غير تابعة لـ Google، مثل Facebook وTwitter. استخدِم هذا المستند لإعداد "إحصاءات Google" لأزرار المشاركة على وسائل التواصل الاجتماعي، إذا كنت مالكًا لموقع إلكتروني، أو مطوّرًا لمكوّن إضافي لإدارة المحتوى، أو إذا كنت مشغّل شبكات اجتماعية وتريد تقديم تقارير تلقائية للتفاعل الاجتماعي لمستخدمي أزرار المشاركة.

مقدمة

توفِّر "إحصاءات Google" تلقائيًا تقارير مدمجة لزر 1+. وهذا يعني أنه في حالة تنفيذ ga.js وزر 1+ في الصفحة نفسها، سيتم إعداد تقارير عن جميع تفاعلات 1+ بشكل تلقائي. للحصول على مزيد من المعلومات عن تحليلات إجراءات 1+، بما في ذلك نصائح حول تحديد المشاكل وحلّها، اطّلع على لمحة عن تحليلات الشبكات الاجتماعية في مركز المساعدة.

للحصول على إحصاءات للتفاعل الاجتماعي وإعداد التقارير للشبكات الأخرى مثل Facebook أو Twitter، عليك دمج "إحصاءات Google" مع كل زر شبكة. باستخدام تحليلات المكوّنات الإضافية الاجتماعية، تتراوح التفاعلات المسجّلة بين "أعجبني" على Facebook و "تغريدة" على Twitter. على الرغم من أنّ ميزة تتبُّع الأحداث يمكنها تتبُّع التفاعلات العامة مع المحتوى أيضًا، توفّر إحصاءات الشبكات الاجتماعية إطار عمل متّسق لتسجيل التفاعلات الاجتماعية. ويؤدي ذلك بدوره إلى تزويد مستخدمي تقارير "إحصاءات Google" بمجموعة متسقة من التقارير لمقارنة تفاعلات الشبكات الاجتماعية على مستوى شبكات متعددة.

للاطّلاع على مثال عملي عن كيفية دمج "إحصاءات Google" مع أزرار Facebook وTwitter، يمكنك الاطّلاع على نموذج الرمز الخاص بإحصاءات الشبكات الاجتماعية.

إعداد تحليلات الشبكات الاجتماعية

لإعداد تتبّع التفاعلات الاجتماعية، ستحتاج إلى استخدام طريقة _trackSocial التي تُرسِل بيانات التفاعلات الاجتماعية إلى "إحصاءات Google". يجب استدعاء الطريقة بعد إكمال المستخدِم للتفاعل الاجتماعي. تستخدم كل شبكة اجتماعية آلية مختلفة لتحديد وقت حدوث التفاعل الاجتماعي، وعادةً ما يتطلّب ذلك الدمج مع واجهة برمجة التطبيقات الخاصة لزرّ الشبكة المعني.

نظرًا لأن التفاصيل المحددة لدمج تحليلات الشبكات الاجتماعية تختلف باختلاف الشبكة الاجتماعية، يقدِّم باقي هذا الدليل أفضل الممارسات العامة حول كيفية إعداد تحليلات المكوّنات الإضافية للشبكات الاجتماعية لكل شبكة من هذه الشبكات. ننصحك بالاطّلاع على مستندات المطوّرين الخاصة بكل شبكة لمعرفة طريقة التنفيذ الخاصة بالشبكة.

في ما يلي وصف لطريقة _trackSocial:

_gaq.push(['_trackSocial', network, socialAction, opt_target, opt_pagePath]);

حيث تمثل المعلمات:

  • network

    مطلوبة. سلسلة تمثل شبكة التواصل الاجتماعي التي يتم تتبُّعها (مثل Facebook أو Twitter أو LinkedIn)

  • socialAction

    مطلوبة. سلسلة تمثل الإجراء الاجتماعي الذي يتم تتبُّعه (مثل أعجبني أو مشاركة أو تغريدة).

  • opt_target

    اختياريّ. سلسلة تمثل عنوان URL (أو المورد) الذي يتلقى الإجراء. على سبيل المثال، إذا نقر المستخدم على الزر أعجبني في صفحة على موقع إلكتروني، قد يتم ضبط opt_target على عنوان الصفحة أو معرّف يتم استخدامه لتحديد الصفحة في نظام إدارة المحتوى. في كثير من الحالات، تكون الصفحة التي أعجبتني هي الصفحة نفسها التي تشاهدها. لذلك، إذا كانت هذه المَعلمة هي undefined أو محذوفة، يتم ضبط رمز التتبّع تلقائيًا على استخدام document.location.href.

  • opt_pagePath

    اختياريّ. سلسلة تمثّل الصفحة حسب المسار (بما في ذلك المَعلمات) التي حدث منها الإجراء. على سبيل المثال، إذا نقرت على زر أعجبني على https://developers.google.com/analytics/devguides/، يجب ضبط opt_pagePath على /analytics/devguides. دائمًا تقريبًا، يكون مسار الصفحة هو مصدر الإجراء الاجتماعي. لذلك، إذا كانت هذه المَعلمة مضبوطة على undefined أو تم حذفها، يتم ضبط رمز التتبّع تلقائيًا على استخدام location.pathname زائد location.search. وبوجه عام، عليك ضبط هذا الإعداد فقط في حال تتبُّع مشاهدات الصفحة الافتراضية على الويب عن طريق تعديل مَعلمة مسار الصفحة الاختيارية باستخدام طريقة _trackPageview في "إحصاءات Google".

إجراءات Facebook

وفقًا لـ Facebook JavaScript SDK، إنّ أبسط طريقة لإعداد الزر أعجبني على صفحتك هي استخدام الرمز البرمجي التالي:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like></fb:like>

المعجبون

لتسجيل إبداءات الإعجاب باستخدام "إحصاءات Google"، اشترِك في حدث edge.create على Facebook وأنشئ دالة رد اتصال لتنفيذ رمز تتبّع "إحصاءات Google".

FB.Event.subscribe('edge.create', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
});

عندما يبدي المستخدم إعجابه بصفحتك، يتم تنفيذ وظيفة معاودة الاتصال وتلقّي عنوان URL للمورد الذي أبدى إعجابه به. يتم بعد ذلك تمرير المورد كقيمة إلى الطريقة _trackSocial حتى تتمكّن "إحصاءات Google" من إعداد تقارير عن الشبكة والإجراء وعنوان URL الذي يتم إبداء الإعجاب به.

عدد غير المعجبين

تتيح لك واجهات برمجة تطبيقات Facebook أيضًا الاشتراك في أحداث أخرى شيقة مثل إلغاء الإعجاب.

FB.Event.subscribe('edge.remove', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]);
});

مرّات مشاركة الفيديوهات

يمكنك أيضًا الاشتراك في المشاركات.

FB.Event.subscribe('message.send', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'send', targetUrl]);
});

تغريدات على Twitter

وفقًا لمستندات زر التغريدة و أحداث JavaScript لأهداف الويب، يجب استخدام الرمز التالي لتفعيل زر Twitter على صفحتك ورصد تفاعلات المستخدمين: 

<a href="http://developers.google.com/analytics" class="twitter-share-button" data-lang="en">Tweet</a>
<script type="text/javascript" charset="utf-8">
  window.twttr = (function (d,s,id) {
    var t, js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
    js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
    return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
  }(document, "script", "twitter-wjs"));
</script>

لتتبُّع أحداث أزرار التغريدة باستخدام "إحصاءات Google"، عليك استخدام أحداث JavaScript لأهداف الويب على Twitter وربط وظيفة معاودة الاتصال بـ Intent Event. من المهم لفّ عمليات ربط الأحداث في دالة استدعاء للتأكّد من أنّه تم تحميل كل الأحداث قبل ربط الأحداث.

function trackTwitter(intent_event) {
  if (intent_event) {
    var opt_pagePath;
    if (intent_event.target && intent_event.target.nodeName == 'IFRAME') {
          opt_target = extractParamFromUri(intent_event.target.src, 'url');
    }
    _gaq.push(['_trackSocial', 'twitter', 'tweet', opt_pagePath]);
  }
}

//Wrap event bindings - Wait for async js to load
twttr.ready(function (twttr) {
  //event bindings
  twttr.events.bind('tweet', trackTwitter);
});

عندما يشارك المستخدم تغريدة، تتلقّى وظيفة معاودة الاتصال عنصرًا يمكن استخدامه عادةً للحصول على عنوان URL للمورد الذي يتم نشر تغريدةه. بعد تحميل رمز JavaScript من Twitter، يحوّل رابط التغريدة التي تتضمّن تعليقات توضيحية إلى إطار iframe، ويتم ترميز عنوان URL الذي تتم مشاركته في تغريدة وإلحاقه كمَعلمة طلب بحث بعنوان URL لإطار iframe. يشير كائن الحدث الذي تم تمريره إلى معاودة الاتصال لدينا إلى إطار iframe هذا ويمكننا استخدام ذلك للحصول على عنوان URL للمورد الذي يتم تغريده.

تعمل وظيفة رد الاتصال أعلاه على التأكّد من أنّ مرجع iframe هو بالفعل إطار iframe، ثم تحاول استخراج المورد الذي يتم مشاركته في تغريدة من خلال الاطّلاع على معلَمة طلب البحث url.

في ما يلي مثال على دالة لاستخراج مَعلمة طلب بحث من معرّف موارد منتظم (URI):

function extractParamFromUri(uri, paramName) {
  if (!uri) {
    return;
  }
  var regex = new RegExp('[\\?&#]' + paramName + '=([^&#]*)');
  var params = regex.exec(uri);
  if (params != null) {
    return unescape(params[1]);
  }
  return;
}

يتم عرض المَعلمة إذا كانت متوفّرة في سلسلة طلب البحث. إذا لم يتم تحديد أي معلَمة، تعرض الدالة undefined، الذي يتم تمريره إلى الإجراء _trackSocial، ما يؤدي إلى السلوك التلقائي للطريقة.

أفضل الممارسات المتعلقة بالدمج

تضيف العديد من المواقع الإلكترونية أزرارًا للتواصل الاجتماعي باستخدام المكوّنات الإضافية لإدارة المحتوى. إذا كنت أنت مؤلف هذه المكوّنات الإضافية، ننصحك بشدة بدمج إحصاءات المكوّن الإضافي للشبكات الاجتماعية لتسجيل هذه التفاعلات تلقائيًا. وبالمثل، إذا كنت مطوّر برامج في شبكة اجتماعية، يمكنك أيضًا أن تسهّل على المستخدمين تتبُّع تفاعلاتك على الشبكات الاجتماعية في "إحصاءات Google" من خلال الدمج مع "إحصاءات الشبكات الاجتماعية".

لمساعدتك في ذلك، يصف هذا القسم أفضل الممارسات لدمج تحليلات المكوّنات الإضافية الاجتماعية حتى يتتبّع منتجك أو نظام إدارة المحتوى التفاعلات الاجتماعية تلقائيًا. إذا كنت تريد الاطّلاع على مثال عملي لكل أفضل الممارسات هذه، راجِع نموذج الرمز الخاص بإحصاءات المكوّن الإضافي للشبكات الاجتماعية.

إنشاء مثيل واستخدام قائمة انتظار _gaq

يتيح أحدث إصدار من رمز تتبّع "إحصاءات Google" التحميل بشكلٍ متزامن وغير متزامن. وللسماح للمطوّرين باستدعاء طُرق لم يتمّ تحميلها بعد، توفّر "إحصاءات Google" قائمة انتظار أوامر _gaq، والتي يمكن إرسال طرق التتبّع _gaq.push(); إليها.

بعد تحميل رمز التتبّع، يتم تنفيذ جميع الأوامر في قائمة الانتظار. عند دمج رمز تتبّع JavaScript "إحصاءات Google" مع المكوِّن الإضافي أو المنتج، يجب دائمًا التأكد من إنشاء مثيل لقائمة انتظار الأوامر هذه وأن عملية الدمج تدفع الأمر _trackSocial إلى هذه المصفوفة.

var _gaq = _gaq || [];

وهذا يوفر ضمانًا معقولاً بأنه سيتم استدعاء الطريقة بغض النظر عما إذا كانت صفحة الموقع الإلكتروني المستلمة تستخدم مقتطف رمز التتبع التقليدي أو غير المتزامن.

إعدادات المستخدم

إذا كنت تعمل على تطوير مكوّن إضافي يدمج تحليلات المكوّن الإضافي الاجتماعي، يجب مراعاة توفير الخيارات التالية التي تسمح للمستخدمين بتعيينها عند استخدامهم للمكوّن الإضافي:

ضبط معلَمة مسار الصفحة الاختيارية - تتمثّل المعلَمة النهائية لطريقة _trackSocial في إلغاء عنوان URL الحالي الذي حدث منه تفاعل اجتماعي. والهدف النهائي هو إعداد تقارير عن عناوين URL نفسها بين تتبع الصفحات وتحليلات المكوّنات الإضافية للإجراءات الاجتماعية. نظرًا لأن بعض المستخدمين قد يتجاوزون عنوان URL للصفحة التلقائية الذي يتم تتبّعه باستخدام تتبُّع مشاهدة الصفحة، فإنهم بحاجة أيضًا إلى طريقة لتجاوز عنوان URL في إحصاءات المكوّنات الإضافية الاجتماعية من أجل إعداد تقارير متّسقة.

في ما يلي مثال على كيفية السماح للمستخدمين بضبط هذه الخيارات، بالإضافة إلى كيفية استجابة الرمز لها.

// Create a function for a user to call to pass in the options.
function trackFacebook(opt_pagePath) {
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push(['_trackSocial', 'facebook', 'like',
            opt_target, opt_pagePath]);
      });
    }
  } catch(e) {}
}

في المثال أعلاه، إذا تم استدعاء الدالة trackFacebook باستخدام مجموعة المعلَمة opt_pagePath، سيتم استبدال قيمة مسار الصفحة التلقائي بمسار العرض من المَعلمة. وبخلاف ذلك، سيتم ضبط قيمة هذه المعلَمة على undefined. وسيستخدم رمز تتبّع "إحصاءات Google" القيمة التلقائية للمَعلمة غير المحدّدة.

ملاحظة: في هذا المثال، تمت أيضًا إضافة عمليتَي تحقّق لضمان عدم حدوث أخطاء في النصوص البرمجية في حال عدم تحميل Facebook API. وبصفتك مطوِّرًا مسؤولاً، عليك الحرص على التعامل مع الأخطاء بشكل مناسب.

أجهزة تتبُّع متعددة

يختار بعض مستخدمي "إحصاءات Google" تسمية كائن التتبُّع الخاص بهم للتفريق بين أدوات تتبُّع متعدّدة على الصفحة نفسها. لا ننصح باستخدام عدة أدوات تتبُّع على صفحة الموقع الإلكتروني نفسها، ولكن ننصحك بالتعامل مع عدة أدوات تتبُّع.

في ما يلي مثال على كيفية تكرار العملية _trackSocial واستدعاءها لكل كائن متتبّع. تستخدم الطريقة _getTrackers التي تعرض صفيفًا لجميع عناصر التتبُّع على الصفحة.

في هذا المثال، عند بدء حدث Facebook، يتم دفع طريقة _trackSocial لكل عنصر أداة تتبُّع إلى قائمة انتظار أوامر "إحصاءات Google" _gaq. 

getSocialActionTrackers = function(network, socialAction, opt_target, opt_pagePath) {
  return function() {
    var trackers = _gat._getTrackers();
    for (var i = 0, tracker; tracker = trackers[i]; i++) {
      tracker._trackSocial(network, socialAction, opt_target, opt_pagePath);
    }
  };
}

function trackFacebook(opt_pagePath) {
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push(_ga.getSocialActionTrackers_('facebook', 'like',
            opt_target, opt_pagePath));
      });
    }
  } catch(e) {}
}