ปลั๊กอินคือสคริปต์ที่ปรับปรุงฟังก์ชันการทำงานของ 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
ตัวสร้างจะส่งต่อออบเจ็กต์ตัวติดตามเป็นอาร์กิวเมนต์แรก และใช้ตัวเลือกการกำหนดค่าที่ส่งไปยังคำสั่ง 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);
ตัวอย่าง
ปลั๊กอินตัวอย่างต่อไปนี้ได้รับการออกแบบมาเพื่อบันทึกค่าแคมเปญที่กำหนดเองจาก 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 เป็นโอเพนซอร์สซึ่งมีให้บริการใน GitHub และมีปลั๊กอิน analytics.js หลายตัวที่จะช่วยในการติดตามการโต้ตอบของผู้ใช้ทั่วไป โปรดดูซอร์สโค้ดของการติดตามอัตโนมัติเพื่อทำความเข้าใจวิธีการทำงานของปลั๊กอินให้ดียิ่งขึ้น