Tương tác trên mạng xã hội – Theo dõi web (ga.js)

Tài liệu này mô tả cách sử dụng Google Analytics để nhận chỉ số về lượt tương tác trên các mạng không phải của Google, chẳng hạn như Facebook và Twitter. Hãy sử dụng tài liệu này để thiết lập Analytics cho nút chia sẻ qua mạng xã hội nếu bạn là chủ sở hữu trang web, nhà phát triển trình bổ trợ quản lý nội dung hoặc nếu bạn là nhà điều hành mạng xã hội muốn tự động cung cấp báo cáo về lượt tương tác trên mạng xã hội cho người dùng nút chia sẻ.

Giới thiệu

Theo mặc định, Google Analytics cung cấp báo cáo tích hợp cho Nút +1. Điều này có nghĩa là nếu bạn đã triển khai ga.js và Nút +1 trên cùng một trang, thì tất cả các tương tác +1 trên mạng xã hội sẽ được tự động báo cáo. Để biết thêm thông tin về Analytics +1, bao gồm cả mẹo khắc phục sự cố, hãy xem bài viết Giới thiệu về Analytics cho mạng xã hội trong Trung tâm trợ giúp.

Để nhận được Báo cáo và Analytics về lượt tương tác trên mạng xã hội cho các mạng khác như Facebook hoặc Twitter, bạn cần tích hợp Google Analytics với từng nút mạng. Với Analytics plugin trên mạng xã hội, các lượt tương tác được ghi lại có phạm vi từ "Thích" trên Facebook đến "Tweet" trên Twitter. Mặc dù tính năng theo dõi sự kiện cũng có thể theo dõi lượt tương tác chung trên nội dung, nhưng Analytics trên mạng xã hội cung cấp một khung nhất quán để ghi lại các lượt tương tác trên mạng xã hội. Điều này sẽ cung cấp cho người dùng báo cáo của Google Analytics một bộ báo cáo nhất quán để so sánh các lượt tương tác trên mạng xã hội trên nhiều mạng.

Để xem ví dụ cách hoạt động về cách tích hợp Analytics với các nút trên Facebook và Twitter, hãy tham khảo mã mẫu cho Analytics cho mạng xã hội.

Thiết lập Analytics trên mạng xã hội

Để thiết lập tính năng theo dõi lượt tương tác trên mạng xã hội, bạn cần sử dụng phương thức _trackSocial. Phương thức này sẽ gửi dữ liệu về lượt tương tác trên mạng xã hội đến Google Analytics. Phương thức này sẽ được gọi sau khi người dùng hoàn thành một tương tác trên mạng xã hội. Mỗi mạng xã hội sử dụng một cơ chế khác nhau để xác định thời điểm tương tác trên mạng xã hội xảy ra và điều này thường yêu cầu tích hợp với API cho nút mạng đó.

Vì thông tin chi tiết cụ thể để tích hợp Analytics cho mạng xã hội sẽ khác nhau tuỳ theo mạng xã hội, nên phần còn lại của hướng dẫn này sẽ cung cấp các phương pháp chung hay nhất về cách thiết lập Analytics trên mạng xã hội cho từng mạng này. Bạn nên kiểm tra tài liệu dành cho nhà phát triển đối với từng mạng để tìm hiểu cách triển khai cụ thể cho từng mạng.

Dưới đây là nội dung mô tả về phương thức _trackSocial:

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

trong đó các thông số biểu thị:

  • network

    Bắt buộc. Một chuỗi thể hiện mạng xã hội đang được theo dõi (ví dụ: Facebook, Twitter, LinkedIn).

  • socialAction

    Bắt buộc. Một chuỗi thể hiện hành động trên mạng xã hội đang được theo dõi (ví dụ: Thích, Chia sẻ, Tweet).

  • opt_target

    Không bắt buộc. Một chuỗi đại diện cho URL (hoặc tài nguyên) nhận thao tác. Ví dụ: nếu người dùng nhấp vào nút Thích trên một trang trên trang web, opt_target có thể được đặt thành tiêu đề của trang, hoặc một mã nhận dạng dùng để xác định trang đó trong hệ thống quản lý nội dung. Trong nhiều trường hợp, trang mà bạn Thích chính là trang mà bạn đang truy cập. Vì vậy, nếu thông số này là undefined hoặc bị bỏ qua, mã theo dõi sẽ mặc định sử dụng document.location.href.

  • opt_pagePath

    Không bắt buộc. Một chuỗi đại diện cho trang theo đường dẫn (bao gồm cả các tham số) nơi diễn ra hành động. Ví dụ: nếu bạn nhấp vào nút Thích trên https://developers.google.com/analytics/devguides/, thì bạn phải đặt opt_pagePath thành /analytics/devguides. Trong hầu hết mọi trường hợp, đường dẫn của trang là nguồn của hành động trên mạng xã hội. Vì vậy, nếu tham số này là undefined hoặc bị bỏ qua, mã theo dõi sẽ mặc định sử dụng location.pathname cộng với location.search. Thường thì bạn chỉ cần đặt thuộc tính này nếu đang theo dõi số lượt xem trang ảo bằng cách sửa đổi tham số đường dẫn trang (không bắt buộc) thông qua phương thức _trackPageview của Google Analytics.

Hành động trên Facebook

Theo SDK JavaScript của Facebook, cách đơn giản nhất để thiết lập nút Thích trên trang là dùng mã sau:

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

Số lượt thích

Để ghi lại Lượt thích bằng Google Analytics, hãy đăng ký sự kiện edge.create của Facebook và tạo một hàm gọi lại để thực thi mã theo dõi Google Analytics.

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

Khi người dùng Thích trang của bạn, hàm callback sẽ được thực thi và nhận URL của tài nguyên đang được thích. Sau đó, tài nguyên được chuyển dưới dạng giá trị đến phương thức _trackSocial để Google Analytics có thể báo cáo về mạng, hành động và URL được thích.

Lượt không thích

Các API của Facebook cũng cho phép bạn đăng ký các sự kiện thú vị khác, chẳng hạn như lượt không thích.

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

Lượt chia sẻ

Bạn cũng có thể đăng ký chia sẻ.

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

Bài đăng trên Twitter

Theo Tài liệu về nút Tweet và Sự kiện JavaScript có ý định trên web, để triển khai nút twitter trên trang và phát hiện các lượt tương tác của người dùng, bạn nên sử dụng mã sau:

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

Để theo dõi các sự kiện của Nút Tweet bằng Google Analytics, bạn cần sử dụng Sự kiện JavaScript dựa trên ý định trên web của Twitter và liên kết một hàm gọi lại với Intent Event. Bạn cần phải gói các liên kết sự kiện vào một hàm callback để đảm bảo mọi thứ đều được tải trước các sự kiện liên kết.

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

Khi người dùng Tweet, hàm callback sẽ nhận được một đối tượng thường có thể dùng để lấy URL của tài nguyên đang được tweet. Sau khi tải, mã JavaScript Twitter sẽ chuyển đổi đường liên kết tweet có chú thích thành một iframe, đồng thời URL đang được tweet sẽ được mã hoá và nối dưới dạng tham số truy vấn vào URL của iframe đó. Đối tượng sự kiện được chuyển đến lệnh gọi lại của chúng ta tham chiếu đến iframe này và chúng ta có thể sử dụng đối tượng đó để lấy URL của tài nguyên đang được tweet.

Hàm callback ở trên đảm bảo tệp tham chiếu iframe thực sự là một iframe, sau đó cố gắng trích xuất tài nguyên đang được tweet bằng cách xem tham số truy vấn url.

Dưới đây là hàm ví dụ để trích xuất tham số truy vấn từ một 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;
}

Tham số được trả về nếu nằm trong chuỗi truy vấn. Nếu không tìm thấy tham số, thì hàm sẽ trả về undefined (được truyền đến phương thức _trackSocial), dẫn đến hành vi mặc định của phương thức này.

Các phương pháp hay nhất để tích hợp

Nhiều trang web thêm các nút mạng xã hội bằng cách sử dụng các trình bổ trợ quản lý nội dung. Nếu là tác giả của những trình bổ trợ như vậy, bạn nên tích hợp Phân tích trình bổ trợ trên mạng xã hội để tự động ghi lại những lượt tương tác này. Tương tự, nếu là nhà phát triển tại một mạng xã hội, bạn cũng có thể giúp người dùng theo dõi các lượt tương tác của bạn trên mạng xã hội trong Google Analytics dễ dàng hơn nhiều bằng cách tích hợp với Analytics trên mạng xã hội.

Để giúp bạn, phần này mô tả các phương pháp hay nhất để tích hợp Analytics plugin trên mạng xã hội để sản phẩm hoặc CMS của bạn tự động theo dõi các lượt tương tác trên mạng xã hội. Nếu bạn muốn xem ví dụ về cách hoạt động của tất cả các phương pháp hay nhất này, hãy xem mã mẫu của Analytics về plugin trên mạng xã hội.

Tạo thực thể và sử dụng hàng đợi _gaq

Phiên bản mới nhất của mã theo dõi Google Analytics hỗ trợ việc tải cả đồng bộ và không đồng bộ. Để cho phép nhà phát triển gọi các phương thức chưa tải, Google Analytics cung cấp một hàng đợi lệnh _gaq mà tại đó các phương thức theo dõi có thể được đẩy tới _gaq.push();.

Sau khi mã theo dõi được tải, tất cả các lệnh trong hàng đợi sẽ được thực thi. Khi tích hợp mã theo dõi JavaScript Google Analytics với trình bổ trợ hoặc sản phẩm của mình, bạn phải luôn đảm bảo rằng hàng đợi lệnh này được tạo thực thể và chức năng tích hợp của bạn đẩy lệnh _trackSocial vào mảng này.

var _gaq = _gaq || [];

Điều này giúp đảm bảo hợp lý rằng phương thức này sẽ được gọi bất kể trang nhận dữ liệu trên trang web nhận sử dụng đoạn mã theo dõi truyền thống hay không đồng bộ.

Cấu hình của người dùng

Nếu đang phát triển một trình bổ trợ tích hợp Analytics trên mạng xã hội, bạn nên cân nhắc cung cấp các tuỳ chọn sau để người dùng có thể đặt khi sử dụng trình bổ trợ của bạn:

Cài đặt tham số đường dẫn trang không bắt buộc – Thông số cuối cùng cho phương thức _trackSocial là để ghi đè URL hiện tại mà từ đó lượt tương tác trên mạng xã hội đã xảy ra. Mục tiêu cuối cùng là đảm bảo các URL giống nhau được báo cáo giữa tính năng theo dõi trang và Analytics trên trình bổ trợ trên mạng xã hội. Vì một số người dùng có thể ghi đè URL trang mặc định đang được theo dõi bằng tính năng theo dõi lượt xem trang, nên họ cũng cần một cách để ghi đè URL trong Analytics plugin trên mạng xã hội để đạt được báo cáo nhất quán.

Dưới đây là ví dụ về cách bạn có thể cho phép người dùng đặt các tuỳ chọn này, cũng như cách mã của bạn cần phản hồi các tuỳ chọn đó.

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

Trong ví dụ trên, nếu hàm trackFacebook được gọi bằng bộ tham số opt_pagePath, thì giá trị đường dẫn trang mặc định sẽ được ghi đè bằng đường dẫn cung cấp từ tham số. Nếu không, giá trị của thông số đó sẽ được đặt thành undefined. và mã theo dõi Google Analytics sẽ sử dụng giá trị mặc định cho thông số không xác định.

Lưu ý: Trong ví dụ này, chúng tôi cũng đã thêm một vài bước kiểm tra để đảm bảo không xảy ra lỗi tập lệnh nếu API Facebook chưa tải. Là một nhà phát triển có trách nhiệm, bạn phải đảm bảo rằng bạn xử lý lỗi một cách thích hợp.

Nhiều vòng đeo tay theo dõi

Một số người dùng Google Analytics đặt tên cho đối tượng theo dõi để phân biệt nhiều trình theo dõi trên cùng một trang. Mặc dù bạn không nên sử dụng nhiều trình theo dõi trên cùng một trang web, nhưng bạn có thể cân nhắc việc xử lý nhiều trình theo dõi.

Dưới đây là ví dụ về cách lặp lại và gọi phương thức _trackSocial cho từng đối tượng trình theo dõi. Phương thức này sử dụng phương thức _getTrackers trả về một mảng gồm tất cả các đối tượng trình theo dõi trên trang.

Trong ví dụ này, khi sự kiện Facebook được kích hoạt, phương thức _trackSocial cho từng đối tượng trình theo dõi sẽ được đẩy vào hàng đợi lệnh _gaq của Google Analytics. 

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