शुरू करना

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

खास जानकारी

इस दस्तावेज़ में, एम्बेड एपीआई का इस्तेमाल करने के तरीके से जुड़े सभी उदाहरण दिए गए हैं. सेट अप पूरा हो जाने के बाद, आपके पास ऐसा ऐप्लिकेशन होगा जो दिखेगा.

इस गाइड में शामिल उदाहरण का स्क्रीनशॉट
इस गाइड में शामिल उदाहरण का स्क्रीनशॉट.

एक साधारण डैशबोर्ड बनाना

आप इन 2 आसान चरणों का पालन करके अपने सर्वर पर ऐप्लिकेशन का नमूना चला सकते हैं:

  1. नया क्लाइंट आईडी बनाएं
  2. कोड को कॉपी करें और चिपकाएं

जब आप यह ऐप्लिकेशन तैयार करें और चलाएं, तब अगला सेक्शन पूरी जानकारी देगा कि सभी हिस्से एक साथ कैसे फ़िट होते हैं.

नया क्लाइंट आईडी बनाएं

'एम्बेड करें' एपीआई, आपके लिए अनुमति देने की करीब-करीब सभी प्रक्रियाएं संभालता है. इसके लिए, यह सिर्फ़ एक क्लिक वाले साइन इन कॉम्पोनेंट का इस्तेमाल करता है, जो जाने-पहचाने OAuth 2.0 फ़्लो का इस्तेमाल करता है. इस बटन को आपके पेज पर काम करने के लिए, आपको एक क्लाइंट आईडी की ज़रूरत होगी.

अगर आपने कभी क्लाइंट आईडी नहीं बनाया है, तो इन निर्देशों का पालन करके ऐसा किया जा सकता है.

निर्देशों में दिए गए निर्देशों के मुताबिक, यह ज़रूरी है कि आप इन दो ज़रूरी चरणों को अनदेखा न करें:

  • Analytics API चालू करना
  • सही ऑरिजिन सेट करें

ऑरिजिन कंट्रोल करते हैं कि किन डोमेन को, उपयोगकर्ताओं को अनुमति देने के लिए इस कोड का इस्तेमाल करने की अनुमति दी गई है. इससे अन्य लोग आपके कोड को कॉपी नहीं कर पाएंगे और उनकी साइट पर नहीं चला पाएंगे.

उदाहरण के लिए, अगर आपकी वेबसाइट example.com डोमेन पर होस्ट की गई है, तो अपने क्लाइंट आईडी http://example.com के लिए इस ऑरिजिन को सेट करना न भूलें. अगर आपको अपने कोड की जांच स्थानीय तौर पर करनी है, तो आपको अपने स्थानीय सर्वर का ऑरिजिन भी जोड़ना होगा. जैसे, http://localhost:8080.

कोड को कॉपी करें और चिपकाएं

जब आपके पास क्लाइंट का मूल आईडी और मूल ऑरिजिन सेट हो जाए, तब आप डेमो बनाने के लिए तैयार हों. बस, नीचे दिए गए कोड को अपने क्लाइंट आईडी में ऐसी एचटीएमएल फ़ाइल में कॉपी-पेस्ट करें जिसमें यह लिखा हो: "अपना क्लाइंट आईडी यहां डालें".

<!DOCTYPE html>
<html>
<head>
  <title>Embed API Demo</title>
</head>
<body>

<!-- Step 1: Create the containing elements. -->

<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>

<!-- Step 2: Load the library. -->

<script>
(function(w,d,s,g,js,fjs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>
<script>
gapi.analytics.ready(function() {

  // Step 3: Authorize the user.

  var CLIENT_ID = 'Insert your client ID here';

  gapi.analytics.auth.authorize({
    container: 'auth-button',
    clientid: CLIENT_ID,
  });

  // Step 4: Create the view selector.

  var viewSelector = new gapi.analytics.ViewSelector({
    container: 'view-selector'
  });

  // Step 5: Create the timeline chart.

  var timeline = new gapi.analytics.googleCharts.DataChart({
    reportType: 'ga',
    query: {
      'dimensions': 'ga:date',
      'metrics': 'ga:sessions',
      'start-date': '30daysAgo',
      'end-date': 'yesterday',
    },
    chart: {
      type: 'LINE',
      container: 'timeline'
    }
  });

  // Step 6: Hook up the components to work together.

  gapi.analytics.auth.on('success', function(response) {
    viewSelector.execute();
  });

  viewSelector.on('change', function(ids) {
    var newIds = {
      query: {
        ids: ids
      }
    }
    timeline.set(newIds).execute();
  });
});
</script>
</body>
</html>

कोड वॉकथ्रू

यह सेक्शन आपको सिलसिलेवार तरीके से बताता है कि सैंपल ऐप्लिकेशन के लिए दिए गए कोड में क्या चल रहा है. जब आपको इस बारे में अच्छी तरह पता चल जाए कि यह कैसे काम करता है, तो वीडियो में अपने हिसाब से बदलाव किए जा सकते हैं.

पहला चरण: कॉम्पोनेंट कंटेनर बनाना

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

<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>

कॉम्पोनेंट बनाते समय, आप उसे बताते हैं कि उसका आईडी एट्रिब्यूट, किस तरह के कंटेनर का इस्तेमाल करेगा. जैसा कि आप बाद में देख सकते हैं.

दूसरा चरण: लाइब्रेरी लोड करना

एंबेड एपीआई को इस स्निपेट के साथ लोड किया जा सकता है.

<script>
(function(w,d,s,g,js,fjs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>

लाइब्रेरी के पूरी तरह लोड होने पर, gapi.analytics.ready को जारी किए गए किसी भी कॉलबैक को शुरू कर दिया जाएगा.

<script>
gapi.analytics.ready(function() {
  // Put your application code here...
});
</script>

तीसरा चरण: उपयोगकर्ता को अनुमति देना

एंबेड एपीआई आपके लिए अनुमति देने की करीब-करीब सभी प्रोसेस संभालता है. इसके लिए, यह सिर्फ़ एक क्लिक वाले साइन इन कॉम्पोनेंट का इस्तेमाल करता है, जो जाने-पहचाने OAuth 2.0 फ़्लो का इस्तेमाल करता है. इस बटन को अपने पेज पर काम करने देने के लिए, आपको एक कंटेनर रेफ़रंस और अपना Client-ID पास करना होगा.

gapi.analytics.auth.authorize({
  container: 'auth-button',
  clientid: CLIENT_ID,
});

इससे, एलिमेंट के अंदर एक बटन जनरेट होगा, जिसमें 'auth-button' आईडी होगा. यह आपके लिए अनुमति देने के फ़्लो का ध्यान रखता है.

चौथा चरण: व्यू सिलेक्टर बनाना

व्यू सिलेक्टर कॉम्पोनेंट का इस्तेमाल करके, किसी खास व्यू के आईडी हासिल किए जा सकते हैं, ताकि आप उसके लिए रिपोर्ट चला सकें.

व्यू सिलेक्टर बनाने के लिए, आपको सिर्फ़ पहले कदम में बनाए गए कंटेनर का रेफ़रंस देना होगा.

var viewSelector = new gapi.analytics.ViewSelector({
  container: 'view-selector'
});

इससे व्यू सिलेक्टर कॉम्पोनेंट बन जाता है, लेकिन यह अभी तक इसे पेज पर रेंडर नहीं करता. इसके लिए, आपको execute() पर कॉल करना होगा. इसके लिए, छठे चरण का इस्तेमाल करें.

पांचवां चरण: टाइमलाइन चार्ट बनाना

'एम्बेड करें एपीआई' आपको एक चार्ट कॉम्पोनेंट के साथ-साथ एक Google चार्ट के साथ-साथ एक रिपोर्ट ऑब्जेक्ट भी देता है. इससे, डेटा दिखाने की प्रोसेस बहुत आसान हो जाती है, क्योंकि चार्ट ऑब्जेक्ट, सीन को बैकग्राउंड में चलाता है और नतीजों के साथ अपने-आप अपडेट होता है.

चार्ट का कॉम्पोनेंट बनाने के लिए, आपको एपीआई क्वेरी पैरामीटर के साथ-साथ चार्ट के विकल्प भी तय करने होंगे. चार्ट विकल्पों में, कंटेनर का आईडी का रेफ़रंस दिया जाता है जिसे आपने चरण 1 में बनाया है.

var timeline = new gapi.analytics.googleCharts.DataChart({
  reportType: 'ga',
  query: {
    'dimensions': 'ga:date',
    'metrics': 'ga:sessions',
    'start-date': '30daysAgo',
    'end-date': 'yesterday',
  },
  chart: {
    type: 'LINE',
    container: 'timeline'
  }
});

व्यू सिलेक्टर की तरह, इससे चार्ट कॉम्पोनेंट बन जाता है. हालांकि, उसे उस पेज पर रेंडर किया जा सकता है जिस पर आपको execute() को कॉल करना है. इस बारे में अगले चरण में बताया गया है.

छठा चरण: एक साथ काम करने के लिए कॉम्पोनेंट को हुक करें

एम्बेड किए गए एपीआई कॉम्पोनेंट, इवेंट तब ट्रिगर करते हैं, जब कई तरह की चीज़ें होती हैं, जैसे कि अनुमति मिलना, नया व्यू चुनना या किसी चार्ट को पूरी तरह से रेंडर करना.

इस गाइड में दिया गया ऐप्लिकेशन, अनुमति मिलने के बाद व्यू सिलेक्टर को रेंडर करने के लिए इंतज़ार करता है. साथ ही, व्यू सिलेक्टर से नया व्यू चुने जाने पर, यह टाइमलाइन चार्ट को अपडेट करता है.

gapi.analytics.auth.on('success', function(response) {
  viewSelector.execute();
});

viewSelector.on('change', function(ids) {
  var newIds = {
    query: {
      ids: ids
    }
  }
  timeline.set(newIds).execute();
});

अलग-अलग कॉम्पोनेंट से होने वाले सभी इवेंट की पूरी सूची देखने के लिए, एपीआई से जुड़ी जानकारी देखें.

अगले चरण

इस गाइड में आपको एम्बेड एपीआई की मदद से बुनियादी विज़ुअलाइज़ेशन बनाने का तरीका बताया गया है. अगर आप ज़्यादा जानना चाहते हैं, तो एपीआई का रेफ़रंस देखें. इससे, आपको यह जानने में मदद मिलेगी कि क्या हो सकता है.