การโต้ตอบทางสังคม - การติดตามเว็บ (ga.js)

เอกสารนี้จะอธิบายวิธีใช้ Google Analytics เพื่อดูเมตริกการโต้ตอบในเครือข่ายที่ไม่ใช่ของ Google เช่น Facebook และ Twitter ใช้เอกสารนี้เพื่อตั้งค่า Analytics สำหรับปุ่มการแชร์ผ่านโซเชียล หากคุณเป็นเจ้าของเว็บไซต์ นักพัฒนาซอฟต์แวร์ปลั๊กอินการจัดการเนื้อหา หรือหากคุณเป็นผู้ให้บริการโซเชียลเน็ตเวิร์กที่ต้องการรายงานการโต้ตอบทางโซเชียลโดยอัตโนมัติสำหรับผู้ใช้ปุ่มแชร์

เกริ่นนำ

โดยค่าเริ่มต้น Google Analytics จะมีการรายงานแบบผสานรวมสำหรับ ปุ่ม +1 หมายความว่าหากคุณใช้งาน ga.js และปุ่ม +1 บนหน้าเดียวกัน ระบบจะรายงานการโต้ตอบในโซเชียลของ +1 ทั้งหมดโดยอัตโนมัติ ดูข้อมูลเพิ่มเติมเกี่ยวกับ Analytics สำหรับ +1 รวมถึงเคล็ดลับการแก้ปัญหาได้ที่เกี่ยวกับ Analytics โซเชียลในศูนย์ช่วยเหลือ

หากต้องการดู Analytics การโต้ตอบทางโซเชียลและการรายงานสำหรับเครือข่ายอื่นๆ เช่น Facebook หรือ Twitter คุณต้องผสานรวม Google Analytics กับปุ่มเครือข่ายแต่ละปุ่ม ปลั๊กอินโซเชียลใน Analytics ทำให้การโต้ตอบที่บันทึกไว้มีตั้งแต่การ "ถูกใจ" ของ Facebook ไปจนถึง "ทวีต" ใน Twitter แม้ว่าการติดตามเหตุการณ์จะติดตามการโต้ตอบของเนื้อหาทั่วไปได้เช่นกัน แต่ Analytics โซเชียลมีเฟรมเวิร์กที่สอดคล้องกันสำหรับการบันทึกการโต้ตอบทางโซเชียล วิธีนี้ช่วยให้ผู้ใช้รายงาน Google Analytics มีชุดรายงานที่สอดคล้องกันเพื่อเปรียบเทียบการโต้ตอบในเครือข่ายโซเชียลในหลายๆ เครือข่าย

หากต้องการดูตัวอย่างการใช้งานของวิธีผสานรวม Analytics กับปุ่ม Facebook และ Twitter โปรดดูโค้ดตัวอย่างของการวิเคราะห์โซเชียล

การตั้งค่า Analytics ทางสังคม

หากต้องการตั้งค่าการติดตามการโต้ตอบทางโซเชียล คุณจะต้องใช้เมธอด _trackSocial ซึ่งจะส่งข้อมูลการโต้ตอบทางโซเชียลไปยัง Google Analytics ควรมีการเรียกใช้เมธอดเมื่อผู้ใช้ดำเนินการโต้ตอบทางโซเชียลจนเสร็จสมบูรณ์ โซเชียลเน็ตเวิร์กแต่ละเครือข่ายใช้กลไกที่ต่างกันในการพิจารณาว่าการโต้ตอบทางโซเชียลเกิดขึ้นเมื่อใด และโดยปกติจะต้องผสานรวมกับ API สำหรับปุ่มเครือข่ายนั้น

เนื่องจากรายละเอียดเฉพาะสำหรับการผสานรวม Analytics โซเชียลแตกต่างกันไปตามโซเชียลเน็ตเวิร์ก ส่วนที่เหลือของคู่มือนี้จึงให้แนวทางปฏิบัติที่ดีที่สุดทั่วไปเกี่ยวกับการตั้งค่าปลั๊กอินสังคมใน Analytics สำหรับแต่ละเครือข่ายเหล่านี้ เราขอแนะนำให้คุณดูเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์สำหรับแต่ละเครือข่ายเพื่อศึกษาการใช้งานเฉพาะเครือข่าย

นี่คือคำอธิบายเมธอด _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 Analytics

การดำเนินการของ Facebook

ตาม Facebook JavaScript SDK วิธีที่ง่ายที่สุดในการตั้งค่าปุ่ม Like บนหน้าเว็บคือการใช้โค้ดต่อไปนี้

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

การกดชอบ

หากต้องการบันทึกการกดชอบด้วย Google Analytics ให้ติดตามเหตุการณ์ edge.create ของ Facebook แล้วสร้างฟังก์ชันเรียกกลับเพื่อเรียกใช้โค้ดติดตาม Google Analytics

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

เมื่อผู้ใช้ชอบหน้าเว็บ ฟังก์ชันเรียกกลับจะทำงานและรับ URL ของทรัพยากรที่มีการกดชอบ จากนั้นระบบจะส่งทรัพยากรเป็นค่าไปยังเมธอด _trackSocial เพื่อให้ Google Analytics รายงานเกี่ยวกับเครือข่าย การดำเนินการ และ URL ที่ชอบได้

ไม่ชอบ

Facebook API ยังช่วยให้คุณสมัครรับข้อมูลกิจกรรมที่น่าสนใจอื่นๆ ได้ เช่น การเลิกชอบ

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 ของ Web Intents หากต้องการใช้ปุ่ม 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 Analytics คุณต้องใช้เหตุการณ์ JavaScript ของ Web Intents ของ 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 และแสดงผลเป็นลักษณะการทำงานเริ่มต้นของเมธอด

แนวทางปฏิบัติแนะนำสำหรับการผสานรวม

เว็บไซต์จำนวนมากเพิ่มปุ่มโซเชียลโดยใช้ปลั๊กอินการจัดการเนื้อหา หากคุณเป็นผู้เขียนปลั๊กอินดังกล่าว เราขอแนะนำอย่างยิ่งให้คุณผสานรวมปลั๊กอินโซเชียลใน Analytics เพื่อบันทึกการโต้ตอบเหล่านี้โดยอัตโนมัติ ในทำนองเดียวกัน หากเป็นนักพัฒนาซอฟต์แวร์ในโซเชียลเน็ตเวิร์ก คุณยังช่วยให้ผู้ใช้ติดตามการโต้ตอบในเครือข่ายโซเชียลใน Google Analytics ได้ง่ายขึ้นด้วยการผสานรวมกับ Analytics โซเชียล

ในส่วนนี้จะอธิบายแนวทางปฏิบัติแนะนำสำหรับการผสานรวมปลั๊กอินโซเชียลของ Analytics เพื่อให้ผลิตภัณฑ์หรือ CMS ติดตามการโต้ตอบทางโซเชียลโดยอัตโนมัติ หากคุณต้องการดูตัวอย่างที่ใช้งานได้ของแนวทางปฏิบัติแนะนำเหล่านี้ทั้งหมด โปรดดูโค้ดตัวอย่างของ Analytics สำหรับปลั๊กอินสังคม

การเริ่มต้นและใช้คิว _gaq

โค้ดติดตาม Google Analytics เวอร์ชันล่าสุดรองรับการโหลดทั้งแบบพร้อมกันและไม่พร้อมกัน หากต้องการให้นักพัฒนาแอปเรียกใช้เมธอดที่ยังไม่ได้โหลด Google Analytics จะมีคิวคำสั่ง _gaq ซึ่งจะเป็นวิธีการติดตามที่จะพุช _gaq.push(); ได้

เมื่อโหลดโค้ดติดตามแล้ว คำสั่งทั้งหมดในคิวจะถูกเรียกใช้ เมื่อผสานรวมโค้ดติดตาม JavaScript ของ Google Analytics กับปลั๊กอินหรือผลิตภัณฑ์ คุณควรตรวจสอบว่ามีการสร้างอินสแตนซ์คิวคำสั่งนี้ทุกครั้ง และการผสานรวมของคุณพุชคำสั่ง _trackSocial ไปยังอาร์เรย์นี้

var _gaq = _gaq || [];

ซึ่งให้ความมั่นใจในระดับที่สมเหตุสมผลว่าจะมีการเรียกใช้เมธอดนั้นไม่ว่าหน้าของเว็บไซต์ที่เป็นผู้รับจะใช้ข้อมูลโค้ดติดตามแบบดั้งเดิมหรือแบบอะซิงโครนัสก็ตาม

การกำหนดค่าผู้ใช้

หากคุณกำลังพัฒนาปลั๊กอินที่ผสานรวมปลั๊กอินสังคมใน Analytics ก็ควรพิจารณาให้ตัวเลือกต่อไปนี้อนุญาตให้ผู้ใช้ตั้งค่าได้เมื่อใช้ปลั๊กอินของคุณ

การตั้งค่าพารามิเตอร์เส้นทางหน้าเว็บที่ไม่บังคับ — พารามิเตอร์สุดท้ายของเมธอด _trackSocial คือการลบล้าง URL ปัจจุบันที่มีการโต้ตอบทางโซเชียลเกิดขึ้น เป้าหมายสูงสุดคือให้มีการรายงาน URL เดียวกันระหว่างการติดตามหน้าเว็บและปลั๊กอินสังคมใน Analytics เนื่องจากผู้ใช้บางรายอาจลบล้าง URL หน้าเริ่มต้นที่จะติดตามด้วยการติดตามการดูหน้าเว็บ ผู้ใช้จึงต้องมีวิธีลบล้าง URL ในปลั๊กอินโซเชียลใน Analytics เพื่อให้ได้รับการรายงานที่สอดคล้องกัน

ต่อไปนี้เป็นตัวอย่างวิธีอนุญาตให้ผู้ใช้ตั้งค่าตัวเลือกเหล่านี้ รวมถึงวิธีที่โค้ดจำเป็นต้องตอบสนองต่อตัวเลือกดังกล่าว

// 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 Analytics จะใช้ค่าเริ่มต้นของพารามิเตอร์ที่ไม่ได้กำหนด

หมายเหตุ: ในตัวอย่างนี้ เราเพิ่มการตรวจสอบอีก 2 รายการเพื่อให้แน่ใจว่าไม่มีข้อผิดพลาดเกี่ยวกับสคริปต์เกิดขึ้น หาก Facebook API โหลดไม่ได้ ในฐานะนักพัฒนาแอปที่มีความรับผิดชอบ คุณควรจัดการข้อผิดพลาดอย่างเหมาะสม

ตัวติดตามหลายตัว

ผู้ใช้ Google Analytics บางรายตั้งชื่อออบเจ็กต์การติดตามเพื่อแยกความแตกต่างระหว่างเครื่องมือติดตามหลายตัวในหน้าเดียวกัน แม้ว่าเราจะไม่แนะนำให้ใช้อุปกรณ์ติดตามหลายอย่างในหน้าเว็บไซต์เดียวกัน แต่ก็อาจลองใช้อุปกรณ์ติดตามหลายรายการ

ด้านล่างนี้คือตัวอย่างวิธีทำซ้ำและเรียกใช้เมธอด _trackSocial สำหรับออบเจ็กต์เครื่องมือติดตามแต่ละรายการ โดยจะใช้เมธอด _getTrackers ซึ่งแสดงผลอาร์เรย์ของออบเจ็กต์ตัวติดตามทั้งหมดในหน้าเว็บ

ในตัวอย่างนี้ เมื่อมีการทริกเกอร์เหตุการณ์ Facebook ระบบจะพุชเมธอด _trackSocial สำหรับออบเจ็กต์เครื่องมือติดตามแต่ละรายการไปยังคิวคำสั่งของ 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) {}
}