प्लग इन लिखना

प्लग इन ऐसी स्क्रिप्ट होती हैं जो समस्याओं को हल करने और उपयोगकर्ता के इंटरैक्शन को मेज़र करने में मदद करने के लिए, 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 कमांड को लागू करता है, तो यह provide प्लग इन' के कंस्ट्रक्टर फ़ंक्शन पर new ऑपरेटर का इस्तेमाल करके एक नए ऑब्जेक्ट को इंस्टैंशिएट करता है. कंस्ट्रक्टर, ट्रैकर ऑब्जेक्ट को अपने पहले आर्ग्युमेंट के तौर पर और require कमांड को अपने दूसरे आर्ग्युमेंट के तौर पर पास किया गया कोई भी कॉन्फ़िगरेशन विकल्प पास करता है.

नीचे दिए गए 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('provide', 'myplugin', ...) निर्देश मिलने के तीन सेकंड बाद तक ga('require', 'myplugin') निर्देश असल में कैसे काम करता है.

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

उदाहरण

नीचे दिए गए उदाहरण में दिए गए प्लग इन को, पेज के यूआरएल से कस्टम कैंपेन वैल्यू को कैप्चर करने और उन्हें ट्रैकर को पास करने के लिए डिज़ाइन किया गया है. यह प्लग इन, प्लग इन स्क्रिप्ट को तय करने और रजिस्टर करने, प्लग इन के कॉन्फ़िगरेशन पैरामीटर पास करने, और प्लग इन के तरीकों को तय करने और कॉल करने का तरीका बताता है.

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

एचटीएमएल कोड में ये कोड शामिल किए जा सकते हैं:

<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 प्लग इन शामिल हैं, जो उपयोगकर्ता के सामान्य इंटरैक्शन को ट्रैक करने में मदद करते हैं. प्लग इन के काम करने के तरीके को बेहतर ढंग से समझने के लिए ऑटोट्रैक सोर्स कोड देखें.