खास जानकारी
इस दस्तावेज़ में, Embed API का इस्तेमाल करने के तरीके का पूरा उदाहरण दिया गया है. आवेदन करने के बाद, आपके पास ऐसा ऐप्लिकेशन दिखेगा.
एक आसान डैशबोर्ड बनाना
इन दो आसान चरणों का पालन करके, अपने सर्वर पर सैंपल ऐप्लिकेशन चलाया जा सकता है:
- नया क्लाइंट आईडी बनाना
- कोड को कॉपी करें और चिपकाएं
ऐप्लिकेशन के चालू होने और उसके इस्तेमाल के बाद, अगला सेक्शन इस बारे में विस्तार से बताएगा कि सभी चीज़ें एक साथ कैसे फ़िट होती हैं.
नया Client ID बनाएं
एम्बेड एपीआई, अनुमति देने की करीब-करीब सभी प्रोसेस हैंडल करता है. इसके लिए, एक-क्लिक में साइन-इन करने वाला ऐसा कॉम्पोनेंट उपलब्ध कराया जाता है जो जाने-पहचाने 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>
तीसरा चरण: उपयोगकर्ता को अनुमति देना
Embed API, अनुमति देने की करीब-करीब सभी प्रोसेस को हैंडल करता है. यह, एक-क्लिक में साइन-इन करने वाला एक कॉम्पोनेंट उपलब्ध कराता है, जो जाने-पहचाने OAuth 2.0 फ़्लो का इस्तेमाल करता है. इस बटन को आपके पेज पर काम करने के लिए, आपको एक कंटेनर रेफ़रंस और अपना क्लाइंट आईडी पास करना होगा.
gapi.analytics.auth.authorize({
container: 'auth-button',
clientid: CLIENT_ID,
});
इससे 'auth-button' आईडी वाले एलिमेंट के अंदर एक बटन जनरेट होगा, जो आपके लिए ऑथराइज़ेशन फ़्लो का काम करता है.
चौथा चरण: व्यू सिलेक्टर बनाना
दृश्य सिलेक्टर कॉम्पोनेंट का इस्तेमाल किसी खास व्यू के आईडी पाने के लिए किया जा सकता है, ताकि आप उसके लिए रिपोर्ट चला सकें.
व्यू सिलेक्टर बनाने के लिए, आपको सिर्फ़ पहले चरण में बनाए गए कंटेनर का रेफ़रंस चाहिए.
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector'
});
इससे व्यू सिलेक्टर कॉम्पोनेंट बनता है, लेकिन यह फ़िलहाल पेज पर रेंडर नहीं होता. ऐसा करने के लिए, आपको execute() को कॉल करना होगा. इसे छठे चरण में मैनेज किया जाता है.
पांचवां चरण: टाइमलाइन चार्ट बनाना
एम्बेड एपीआई से आपको एक चार्ट कॉम्पोनेंट मिलता है, जो Google चार्ट और एक ही रिपोर्ट ऑब्जेक्ट, दोनों होता है. यह डेटा दिखाने की प्रोसेस को बहुत आसान बनाता है, क्योंकि चार्ट ऑब्जेक्ट आपकी रिपोर्ट को स्क्रीन के पीछे चलाएगा और नतीजों के साथ अपने-आप अपडेट हो जाएगा.
चार्ट कॉम्पोनेंट बनाने के लिए, आपको एपीआई क्वेरी पैरामीटर और चार्ट के विकल्प बताने होंगे. चार्ट विकल्पों में उस कंटेनर के आईडी का रेफ़रंस होता है जिसे आपने पहले चरण में बनाया था.
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();
});
अलग-अलग कॉम्पोनेंट से मिलने वाले सभी इवेंट की पूरी सूची देखने के लिए, एपीआई का रेफ़रंस देखें.
अगले चरण
इस गाइड में, Embed API की मदद से बुनियादी विज़ुअलाइज़ेशन बनाने का तरीका बताया गया. अगर आपको इस बारे में ज़्यादा जानना है, तो एपीआई के रेफ़रंस में जाकर, इस बारे में ज़्यादा जानें कि क्या-क्या किया जा सकता है.