การวัดข้ามโดเมน

คู่มือนี้อธิบายวิธีวัดเหตุการณ์ในหลายโดเมนโดยใช้ analytics.js

คำเตือน: การติดตั้งการติดตามผลแบบข้ามโดเมนอย่างถูกต้องมีความซับซ้อนและมีแนวโน้มที่จะเกิดข้อผิดพลาด คู่มือนี้จะอธิบายแนวคิดเหล่านี้ แต่เราขอแนะนำให้คุณใช้ปลั๊กอิน Linker อย่างเป็นทางการแทนการพยายามใช้งานการติดตามผลแบบข้ามโดเมนด้วยตนเอง

ภาพรวม

ไลบรารี analytics.js ใช้รหัสไคลเอ็นต์ที่ไม่ซ้ำกันเพื่อระบุว่าเป็นผู้ใช้ใหม่หรือผู้ใช้ที่กลับมา ระบบจะถือว่าผู้ใช้กลับมาใช้งานอีกครั้งหากมีการส่ง Hit ที่มีรหัสไคลเอ็นต์ตรงกันไปยังพร็อพเพอร์ตี้เดียวกันแล้ว

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

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

การรับรหัสไคลเอ็นต์ในโดเมนต้นทาง

หากต้องการเรียกข้อมูลรหัสไคลเอ็นต์ในโดเมนต้นทาง ให้ใช้เมธอด get ดังนี้

ga(function(tracker) {
  var clientId = tracker.get('clientId');
});

เมื่อมีรหัสไคลเอ็นต์ในโดเมนต้นทางแล้ว คุณจะเพิ่มรหัสดังกล่าวในลิงก์ที่ชี้ไปยังโดเมนปลายทางได้

<a href="https://destination.com/?clientId=XXXXXX">destination.com</a>

การตั้งค่ารหัสไคลเอ็นต์ในโดเมนปลายทาง

คุณบอกออบเจ็กต์เครื่องมือติดตามในโดเมนปลายทางได้ว่าจะใช้รหัสไคลเอ็นต์ใดโดยการระบุช่องรหัสไคลเอ็นต์ในคำสั่ง create ดังนี้

ga('create', 'UA-XXXXX-Y', 'auto', {
  'clientId': getClientIdFromUrl()
});

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

การตรวจหาการแชร์ URL

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

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

การไม่สนใจการอ้างอิงจากตัวเอง

ระบบจะสร้างแคมเปญการอ้างอิงใหม่เมื่อURL ที่มาของเอกสารของหน้าเว็บมาจากชื่อโฮสต์ที่ไม่ตรงกับรายการใดๆ ในรายการการยกเว้นการอ้างอิงสำหรับพร็อพเพอร์ตี้ของคุณ

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

iframe

เทคนิคที่อธิบายไว้ข้างต้นต้องใช้โค้ด JavaScript ที่ทำงานหลังจากโหลด analytics.js เนื่องจากโดยปกติแล้วองค์ประกอบ <iframe> จะอยู่ในหน้าเว็บก่อนที่จะโหลด analytics.js การใส่รหัสไคลเอ็นต์ต่อท้าย URL ในพารามิเตอร์แหล่งที่มาของ iframe จึงมักไม่ใช่ตัวเลือก

ในการแก้ปัญหานี้ คุณสามารถกำหนดค่าหน้าภายใน iframe ให้ชะลอการสร้างเครื่องมือติดตามไว้จนกว่าจะได้รับข้อมูลรหัสไคลเอ็นต์จากหน้าหลัก และในหน้าหลัก คุณสามารถกำหนดค่าให้ส่งรหัสไคลเอ็นต์ไปยังหน้า iframe โดยใช้ postMessage

นี่คือตัวอย่างโค้ดของหน้าหลักใน source.com

<iframe id="destination-frame" src="https://destination.com"></iframe>

<script>
ga('create', 'UA-XXXXX-Y', 'auto');
ga(function(tracker) {
  // Gets the client ID of the default tracker.
  var clientId = tracker.get('clientId');

  // Gets a reference to the window object of the destionation iframe.
  var frameWindow = document.getElementById('destination-frame').contentWindow;

  // Sends the client ID to the window inside the destination frame.
  frameWindow.postMessage(clientId, 'https://destination.com');
});
</script>

และนี่คือรหัสที่จะได้รับข้อความใน iframe ที่โฮสต์เมื่อ destination.com:

window.addEventListener('message', function(event) {
  // Ignores messages from untrusted domains.
  if (event.origin != 'https://destination.com') return;

  ga('create', 'UA-XXXXX-Y', 'auto', {
    clientId: event.data
  });
});

อาจเป็นไปได้ว่า analytics.js จะโหลดบนหน้าเว็บหลักไม่สำเร็จ และหน้าใน iframe จะไม่ได้รับรหัสไคลเอ็นต์เลย วิธีที่คุณจะจัดการกับกรณีนี้ขึ้นอยู่กับความสำคัญที่รหัสไคลเอ็นต์ตรงกัน

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

โค้ดต่อไปนี้ใช้การหมดเวลาหน้าเว็บใน iframe เพื่อจัดการกรณีที่หน้าเว็บหลักทำงานช้าหรือไม่ส่งรหัสไคลเอ็นต์:

// Stores whether or not the tracker has been created.
var trackerCreated = false;

function createTracker(opt_clientId) {
  if (!trackerCreated) {
    var fields = {};
    if (opt_clientId) {
      fields.clientId = opt_clientId;
    }

    ga('create', 'UA-XXXXX-Y', 'auto', fields);
    trackerCreated = true;
  }
}


window.addEventListener('message', function(event) {
  // Ignores messages from untrusted domains.
  if (event.origin != 'https://destination.com') return;

  // Creates the tracker with the data from the parent page.
  createTracker(event.data);
});


// Waits for three seconds to receive the client ID from the parent page.
// If that doesn't happen, it creates the tracker as normal.
setTimeout(createTracker, 3000);