การเขียนปลั๊กอิน

ปลั๊กอินคือสคริปต์ที่ช่วยปรับปรุงฟังก์ชันการทํางานของ analytics.js เพื่อช่วยแก้ปัญหาและช่วยในการวัดการโต้ตอบของผู้ใช้ คู่มือนี้จะอธิบายถึงกระบวนการเขียนปลั๊กอิน analytics.js ของคุณเอง สําหรับข้อมูลเกี่ยวกับวิธีใช้ปลั๊กอิน analytics.js ในการใช้งานของคุณเอง โปรดดูที่การใช้ปลั๊กอิน

การกําหนดปลั๊กอิน

ระบบจะกําหนดปลั๊กอินผ่านคําสั่ง provide ซึ่งต้องเรียกใช้พร้อมชื่อของปลั๊กอินเป็นอาร์กิวเมนต์แรกตามด้วยฟังก์ชันเครื่องมือสร้างของปลั๊กอิน เมื่อเรียกใช้คําสั่ง provide จะลงทะเบียนปลั๊กอินที่จะใช้ด้วยคิวคําสั่ง ga()

เครื่องมือสร้างปลั๊กอิน

ตัวอย่างพื้นฐานของปลั๊กอิน analytics.js มีดังนี้

// Defines the plugin constructor.
function MyPlugin() {
  console.log('myplugin has been required...');
}

// Registers the plugin for use.
ga('provide', 'myplugin', MyPlugin);

ปลั๊กอินต้องทํางานอย่างถูกต้องแม้จะเปลี่ยนชื่อออบเจ็กต์ ga ส่วนกลางไปแล้ว ดังนั้นหากคุณเขียนปลั๊กอินเพื่อการใช้งานของบุคคลที่สาม คุณควรใส่การตรวจสอบเพื่อดูว่าตัวแปร GoogleAnalyticsObject มีการตั้งค่าเป็นสตริงอื่นที่ไม่ใช่ 'ga' หรือไม่ ฟังก์ชัน providePlugin มีดังนี้

// Provides a plugin name and constructor function to analytics.js. This
// function works even if the site has customized the ga global identifier.
function providePlugin(pluginName, pluginConstructor) {
  var ga = window[window['GoogleAnalyticsObject'] || 'ga'];
  if (typeof ga == 'function') {
    ga('provide', pluginName, pluginConstructor);
  }
}

การกําหนดค่าอินสแตนซ์ปลั๊กอิน

เมื่อคิวคําสั่ง ga() เรียกใช้คําสั่ง require ระบบจะสร้างอินสแตนซ์ใหม่โดยใช้โอเปอเรเตอร์ new ในฟังก์ชันตัวสร้างปลั๊กอิน provide&#39 ระบบจะส่งตัวสร้างเป็นออบเจ็กต์เครื่องมือติดตามเป็นอาร์กิวเมนต์แรก และตัวเลือกการกําหนดค่าใดๆ ที่ส่งไปยังคําสั่ง require เป็นอาร์กิวเมนต์ที่ 2

ลองพิจารณาคําสั่ง require ต่อไปนี้ที่เพิ่มลงในแท็ก Google Analytics

ga('create', 'UA-XXXXX-Y', 'auto');
ga('require', 'localHitSender', {path: '/log', debug: true});
ga('send', 'pageview');

และโค้ด localHitSender

function LocalHitSender(tracker, config) {
  this.path = config.path;
  this.debug = config.debug;
  if (this.debug) {
    console.log('localHitSender enabled for path: ' + this.path);
    console.log('on tracker: ' + tracker.get('name'));
  }
}

providePlugin('localHitSender', LocalHitSender);

เมื่อเรียกใช้คําสั่ง require ระบบจะบันทึกข้อมูลต่อไปนี้ลงในคอนโซล (โปรดทราบว่าชื่อของเครื่องมือติดตามเริ่มต้นคือ "t0")

// localHitSender enabled for path: /log
// on tracker: t0

การกําหนดวิธีการของปลั๊กอิน

ปลั๊กอินสามารถแสดงเมธอดของตนเองที่สามารถเรียกใช้ได้โดยใช้ไวยากรณ์คิวคําสั่ง ga ดังนี้

ga('[trackerName.]pluginName:methodName', ...args);

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

ตัวอย่างการเรียกเมธอดปลั๊กอิน

// Execute the 'doStuff' method using the 'myplugin' plugin.
ga('create', 'UA-XXXXX-Y', 'auto');
ga('require', 'myplugin');
ga('myplugin:doStuff');

// Execute the 'setEnabled' method of the 'hitCopy' plugin on tracker 't3'.
ga('create', 'UA-XXXXX-Y', 'auto', {name: 't3'});
ga('t3.require', 'hitcopy');
ga('t3.hitcopy:setEnabled', false);

ตัวอย่างคําจํากัดความของเมธอดปลั๊กอิน

// myplugin constructor.
var MyPlugin = function(tracker) {
};

// myplugin:doStuff method definition.
MyPlugin.prototype.doStuff = function() {
  alert('doStuff method called!');
};

// hitcopy plugin.
var HitCopy = function(tracker) {
};

// hitcopy:setEnabled method definition.
HitCopy.prototype.setEnabled = function(isEnabled) {
  this.isEnabled = isEnabled;
}:

กําลังโหลดปลั๊กอิน

โดยทั่วไปปลั๊กอินจะโหลดจากไฟล์ JavaScript แยกต่างหากหรือรวมอยู่ในโค้ดของแอปพลิเคชันหลัก

<script async src="myplugin.js"></script>

ไม่จําเป็นต้องติดตั้งปลั๊กอินเสมอไป เนื่องจาก analytics.js โหลดแบบไม่พร้อมกันและปลั๊กอินมักโหลดแบบไม่พร้อมกัน คิวคําสั่ง ga() จึงสร้างขึ้นเพื่อจัดการในเรื่องนี้

หากคิวคําสั่งได้รับคําสั่ง require สําหรับปลั๊กอินที่ยังไม่ได้รับการจัดเตรียม คําสั่งจะหยุดการดําเนินการของรายการที่เหลือในคิวจนกว่าปลั๊กอินจะพร้อมใช้งาน

โค้ดต่อไปนี้จะแสดงวิธีใช้งานคําสั่ง ga('require', 'myplugin') จริงจนกว่าจะพบคําสั่ง ga('provide', 'myplugin', ...) หลังจากนั้น 3 วินาที

ga('require', 'myplugin');

function MyPlugin() {
  console.log('myplugin has been required...');
}

// Waits 3 second after running the `require`
// command before running the `provide` command.
setTimeout(function() {
  ga('provide', 'myplugin', MyPlugin);
}, 3000);

สําคัญ แม้ว่าคําสั่ง require และ provide จะมีความสําคัญ แต่คําสั่งเหล่านี้ไม่สามารถเรียกได้ก่อนข้อมูลโค้ดการติดตาม JavaScript จะทํางานเนื่องจากทั้งคู่อ้างอิงกับฟังก์ชันคิวคําสั่ง ga ร่วม

ตัวอย่าง

ปลั๊กอินตัวอย่างต่อไปนี้ออกแบบมาเพื่อบันทึกมูลค่าแคมเปญที่กําหนดเองจาก URL ของหน้าเว็บและส่งต่อไปที่เครื่องมือติดตาม ปลั๊กอินนี้แสดงวิธีการกําหนดและลงทะเบียนสคริปต์ปลั๊กอิน ส่งพารามิเตอร์การกําหนดค่าปลั๊กอิน และกําหนดและเรียกเมธอดปลั๊กอิน

// campaign-loader.js

function providePlugin(pluginName, pluginConstructor) {
  var ga = window[window['GoogleAnalyticsObject'] || 'ga'];
  if (typeof ga == 'function') {
    ga('provide', pluginName, pluginConstructor);
  }
}

/**
 * Constructor for the campaignLoader plugin.
 */
var CampaignLoader = function(tracker, config) {
  this.tracker = tracker;
  this.nameParam = config.nameParam || 'name';
  this.sourceParam = config.sourceParam || 'source';
  this.mediumParam = config.mediumParam || 'medium';
  this.isDebug = config.debug;
};

/**
 * Loads campaign fields from the URL and updates the tracker.
 */
CampaignLoader.prototype.loadCampaignFields = function() {
  this.debugMessage('Loading custom campaign parameters');

  var nameValue = getUrlParam(this.nameParam);
  if (nameValue) {
    this.tracker.set('campaignName', nameValue);
    this.debugMessage('Loaded campaign name: ' + nameValue);
  }

  var sourceValue = getUrlParam(this.sourceParam);
  if (sourceValue) {
    this.tracker.set('campaignSource', sourceValue);
    this.debugMessage('Loaded campaign source: ' + sourceValue);
  }

  var mediumValue = getUrlParam(this.mediumParam);
  if (mediumValue) {
    this.tracker.set('campaignMedium', mediumValue);
    this.debugMessage('Loaded campaign medium: ' + mediumValue);
  }
};

/**
 * Enables / disables debug output.
 */
CampaignLoader.prototype.setDebug = function(enabled) {
  this.isDebug = enabled;
};

/**
 * Displays a debug message in the console, if debugging is enabled.
 */
CampaignLoader.prototype.debugMessage = function(message) {
  if (!this.isDebug) return;
  if (console) console.debug(message);
};

/**
 * Utility function to extract a URL parameter value.
 */
function getUrlParam(param) {
  var match = document.location.search.match('(?:\\?|&)' + param + '=([^&#]*)');
  return (match && match.length == 2) ? decodeURIComponent(match[1]) : '';
}

// Register the plugin.
providePlugin('campaignLoader', CampaignLoader);

โค้ดข้างต้นสามารถรวมอยู่ในหน้า HTML ดังนี้

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('require', 'campaignLoader', {
  debug: true,
  nameParam: 'cname',
  sourceParam: 'csrc',
  mediumParam: 'cmed'
});
ga('campaignLoader:loadCampaignFields');

ga('send', 'pageview');
</script>

<!--Note: plugin scripts must be included after the tracking snippet. -->
<script async src="campaign-loader.js"></script>

ปลั๊กอิน Autotrack

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

• eventTracker
• mediaQueryTracker
• outboundFormTracker
• outboundLinkTracker
• socialTracker
• urlChangeTracker