Interaksi Sosial - Pelacakan Web (ga.js)

Dokumen ini menjelaskan cara menggunakan Google Analytics untuk mendapatkan metrik interaksi di jaringan non-Google seperti Facebook dan Twitter. Gunakan dokumen ini untuk menyiapkan Analytics bagi tombol berbagi ke media sosial jika Anda adalah pemilik situs, developer plugin pengelolaan konten, atau jika Anda adalah operator jaringan sosial yang ingin memberikan pelaporan interaksi sosial otomatis kepada pengguna tombol berbagi Anda.

Pengantar

Secara default, Google Analytics menyediakan pelaporan terintegrasi untuk Tombol +1. Ini berarti jika Anda sudah menerapkan ga.js dan Tombol +1 pada laman yang sama, semua interaksi sosial +1 akan dilaporkan secara otomatis. Untuk informasi lebih lanjut tentang Analytics +1, termasuk tips pemecahan masalah, lihat Tentang Analytics Sosial di Pusat Bantuan.

Untuk mendapatkan Analytics interaksi sosial dan pelaporan untuk jaringan lain seperti Facebook atau Twitter, Anda harus mengintegrasikan Google Analytics dengan setiap tombol jaringan. Dengan Analytics Plugin Sosial, interaksi yang dicatat berkisar mulai dari "Like" Facebook hingga "Tweet" Twitter. Meskipun pelacakan peristiwa juga dapat melacak interaksi konten umum, Analytics Sosial memberikan framework yang konsisten untuk mencatat interaksi sosial. Hal ini pada akhirnya akan memberi pengguna laporan Google Analytics serangkaian laporan yang konsisten untuk membandingkan interaksi jaringan sosial di beberapa jaringan.

Untuk melihat contoh praktis cara mengintegrasikan Analytics dengan tombol Facebook dan Twitter lihat kode contoh Analisis Sosial.

Menyiapkan Analisis Sosial

Untuk menyiapkan pelacakan interaksi sosial, Anda harus menggunakan metode _trackSocial, yang mengirimkan data interaksi sosial ke Google Analytics. Metode ini harus dipanggil setelah pengguna menyelesaikan interaksi sosial. Setiap jejaring sosial menggunakan mekanisme yang berbeda untuk menentukan kapan interaksi sosial terjadi dan ini biasanya memerlukan integrasi dengan API untuk tombol jaringan tersebut.

Karena detail khusus untuk mengintegrasikan Analytics Sosial bervariasi menurut jaringan sosial, bagian selanjutnya dari panduan ini memberikan praktik terbaik umum tentang cara menyiapkan Analytics Plugin Sosial untuk setiap jaringan ini. Sebaiknya lihat dokumentasi developer untuk setiap jaringan guna mengetahui penerapan khusus jaringan.

Berikut adalah deskripsi metode _trackSocial:

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

dengan parameter mewakili:

  • network

    Wajib. String yang mewakili jaringan sosial yang dilacak (misalnya Facebook, Twitter, LinkedIn).

  • socialAction

    Wajib. String yang mewakili tindakan sosial yang dilacak (misalnya, Suka, Bagikan, Tweet).

  • opt_target

    Opsional. String yang mewakili URL (atau resource) yang menerima tindakan. Misalnya, jika pengguna mengklik tombol Like pada halaman di situs, opt_target mungkin ditetapkan ke judul halaman, atau ID yang digunakan untuk mengidentifikasi halaman dalam sistem pengelolaan konten. Dalam banyak kasus, halaman yang Anda Sukai adalah halaman yang sama dengan yang sedang Anda buka. Jadi, jika parameter ini adalah undefined, atau dihilangkan, kode pelacakan secara default akan menggunakan document.location.href.

  • opt_pagePath

    Opsional. String yang mewakili halaman menurut jalur (termasuk parameter) tempat tindakan terjadi. Misalnya, jika Anda mengklik tombol Suka pada https://developers.google.com/analytics/devguides/, opt_pagePath harus ditetapkan ke /analytics/devguides. Hampir selalu, jalur halaman adalah sumber tindakan sosial. Jadi, jika parameter ini bernilai undefined atau dihilangkan, kode pelacakan secara default akan menggunakan location.pathname plus location.search. Biasanya Anda hanya perlu menetapkan ini jika melacak pageview virtual dengan mengubah parameter jalur halaman opsional dengan metode _trackPageview Google Analytics.

Tindakan Facebook

Menurut Facebook JavaScript SDK, cara paling mudah untuk menyiapkan tombol Like di halaman Anda adalah dengan menggunakan kode berikut:

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

Suka

Untuk mencatat Like dengan Google Analytics, berlanggananlah ke peristiwa edge.create Facebook dan buat fungsi callback untuk menjalankan kode pelacakan Google Analytics.

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

Saat pengguna Menyukai halaman Anda, fungsi callback akan dijalankan dan menerima URL resource yang disukai. Resource ini kemudian diteruskan sebagai nilai ke metode _trackSocial sehingga Google Analytics dapat melaporkan jaringan, tindakan, dan URL yang disukai.

Tidak suka

Facebook API juga memungkinkan Anda berlangganan peristiwa menarik lainnya seperti tidak suka.

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

Berbagi

Anda juga dapat berlangganan bagian.

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

Tweet Twitter

Menurut Dokumentasi Tombol Tweet dan Peristiwa JavaScript Intent Web, untuk menerapkan tombol twitter di halaman Anda dan mendeteksi interaksi pengguna, kode berikut harus digunakan :

<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>

Untuk melacak peristiwa Tombol Tweet dengan Google Analytics, Anda harus menggunakan Peristiwa JavaScript Intent Web Twitter dan mengikat fungsi callback ke Intent Event. Anda perlu menggabungkan binding peristiwa dalam fungsi callback untuk memastikan semuanya telah dimuat sebelum peristiwa binding.

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

Saat pengguna melakukan Tweet, fungsi callback menerima objek yang biasanya dapat digunakan untuk mendapatkan URL resource yang di-tweet. Setelah dimuat, kode JavaScript Twitter akan mengubah link tweet yang dianotasi menjadi iframe, dan URL yang di-tweet akan dienkode dan ditambahkan sebagai parameter kueri ke URL iframe tersebut. Objek peristiwa yang diteruskan ke callback memiliki referensi ke iframe ini dan kita dapat menggunakannya untuk mendapatkan URL resource yang sedang di-tweet.

Fungsi callback di atas memastikan bahwa referensi iframe memang merupakan iframe, lalu mencoba mengekstrak resource yang di-tweet dengan melihat parameter kueri url.

Berikut adalah contoh fungsi untuk mengekstrak parameter kueri dari 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;
}

Parameter akan ditampilkan jika terletak di string kueri. Jika tidak ada parameter yang ditemukan, fungsi akan menampilkan undefined, yang diteruskan ke metode _trackSocial, sehingga menghasilkan perilaku default metode tersebut.

Praktik Terbaik untuk Integrasi

Banyak situs menambahkan tombol sosial dengan menggunakan plugin pengelolaan konten. Jika Anda adalah pembuat plugin tersebut, sebaiknya Anda mengintegrasikan Analytics Plugin Sosial untuk mencatat interaksi ini secara otomatis. Demikian juga, jika Anda adalah developer di Jaringan Sosial, Anda juga dapat lebih memudahkan pengguna untuk melacak interaksi jejaring sosial di Google Analytics dengan mengintegrasikan Analytics Sosial.

Untuk membantu Anda, bagian ini menjelaskan praktik terbaik untuk mengintegrasikan Analytics Plugin Sosial sehingga produk atau CMS Anda secara otomatis melacak interaksi sosial. Jika Anda ingin melihat contoh praktis dari semua praktik terbaik ini, lihat kode contoh Analytics Plugin Sosial.

Membuat Instance dan Menggunakan Antrean _gaq

Versi terbaru kode pelacakan Google Analytics mendukung pemuatan secara sinkron dan asinkron. Untuk memungkinkan developer memanggil metode yang belum dimuat, Google Analytics menyediakan antrean perintah _gaq, yang akan menjadi tempat metode pelacakan yang dapat dikirim _gaq.push();.

Setelah kode pelacakan dimuat, semua perintah pada antrean akan dieksekusi. Saat mengintegrasikan kode pelacakan JavaScript Google Analytics dengan plugin atau produk Anda, pastikan antrean perintah ini dibuat instance-nya dan integrasi Anda mendorong perintah _trackSocial ke array ini.

var _gaq = _gaq || [];

Hal ini memberikan jaminan yang wajar bahwa metode tersebut akan dipanggil, terlepas dari apakah halaman situs penerima menggunakan cuplikan kode pelacakan tradisional atau asinkron.

Konfigurasi Pengguna

Jika Anda mengembangkan plugin yang mengintegrasikan Analytics Plugin Sosial, sebaiknya sediakan opsi berikut yang memungkinkan pengguna untuk menyetel saat mereka menggunakan plugin Anda:

Menetapkan parameter jalur halaman opsional — Parameter akhir pada metode _trackSocial adalah untuk mengganti URL saat ini tempat interaksi sosial terjadi. Sasaran akhirnya adalah memiliki URL yang sama yang dilaporkan antara pelacakan halaman dan Analytics Plugin Sosial. Karena beberapa pengguna mungkin mengganti URL halaman default yang dilacak dengan pelacakan kunjungan halaman, mereka juga memerlukan cara untuk mengganti URL di Analytics Plugin Sosial untuk mendapatkan pelaporan yang konsisten.

Berikut ini contoh cara mengizinkan pengguna menetapkan opsi ini, serta bagaimana kode Anda harus meresponsnya.

// 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) {}
}

Pada contoh di atas, jika fungsi trackFacebook dipanggil dengan menetapkan parameter opt_pagePath, nilai jalur halaman default akan ditimpa dengan jalur pasokan dari parameter. Jika tidak, nilai untuk parameter tersebut akan ditetapkan ke undefined. dan kode pelacakan Google Analytics akan menggunakan nilai default untuk parameter yang tidak ditentukan.

Catatan: Dalam contoh ini, beberapa pemeriksaan juga telah ditambahkan untuk memastikan tidak ada error skrip yang terjadi jika Facebook API belum dimuat. Sebagai developer yang bertanggung jawab, Anda harus memastikan untuk menangani error dengan tepat.

Beberapa Pelacak

Beberapa pengguna Google Analytics memberi nama objek pelacakan mereka untuk membedakan beberapa pelacak di halaman yang sama. Meskipun kami tidak menganjurkan penggunaan beberapa pelacak di halaman situs yang sama, Anda dapat mempertimbangkan untuk menangani beberapa pelacak.

Di bawah ini adalah contoh cara melakukan iterasi dan memanggil metode _trackSocial untuk setiap objek pelacak. Class ini menggunakan metode _getTrackers yang menampilkan array semua objek pelacak di halaman.

Dalam contoh ini, saat peristiwa Facebook dipicu, metode _trackSocial untuk setiap objek pelacak akan didorong ke antrean perintah Google Analytics _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) {}
}