हम कुकीज़ का उपयोग करते हैं
हम आपके अनुभव को बेहतर बनाने, ट्रैफ़िक का विश्लेषण करने और सामग्री को वैयक्तिकृत करने के लिए कुकीज़ और समान तकनीकों का उपयोग करते हैं। आप सभी कुकीज़ स्वीकार कर सकते हैं या गैर-आवश्यक कुकीज़ को अस्वीकार कर सकते हैं।
यह गाइड वेब प्रोजेक्ट्स पर SurveyAnalytica Clickstream SDK को इंस्टॉल करने और उपयोग करने के बारे में बताता है। यह SDK npm पर प्रकाशित है और Vanilla JS, Next.js, और React सहित किसी भी JavaScript एनवायरनमेंट में काम करता है। मोबाइल ऐप्स के लिए, Mobile SDKs guide देखें।
शुरू करने से पहले, अपनी API Key और Endpoint URL प्राप्त करने के लिए workflow setup पूरा करें।
UMD बंडल को सीधे अपने पेज में शामिल करें। किसी बिल्ड स्टेप की आवश्यकता नहीं है।
<script src="https://cdn.jsdelivr.net/npm/@surveyanalytica/clickstream-web/dist/index.umd.js"></script>
<script>
SAClickstream.init('YOUR_WORKFLOW_ID', 'YOUR_API_KEY', {
endpoint: 'YOUR_ENDPOINT_URL'
});
</script>npm install @surveyanalytica/clickstream-webफिर अपने ऐप के एंट्री पॉइंट पर एक बार इनिशियलाइज़ करें:
import { SAClickstream } from '@surveyanalytica/clickstream-web';
SAClickstream.init('YOUR_WORKFLOW_ID', 'YOUR_API_KEY', {
endpoint: 'YOUR_ENDPOINT_URL'
});Next.js के लिए, init को किसी Client Component के अंदर या _app.js / layout.js में कॉल करें। यह SDK सर्वर-साइड रेंडरिंग के लिए सुरक्षित है — सभी ब्राउज़र API एक्सेस आंतरिक रूप से गार्ड किए गए हैं।
यह SDK पेज व्यू को अपने आप ट्रैक करता है। हर बार जब URL बदलता है (History API के माध्यम से सिंगल-पेज नेविगेशन सहित), एक page_view इवेंट वर्तमान URL, पेज टाइटल, और रेफ़रर के साथ भेजा जाता है। init कॉल के अलावा किसी कोड की आवश्यकता नहीं है।
पेज व्यू को मैन्युअल रूप से भेजने के लिए:
SAClickstream.page('/checkout', { campaign: 'summer-sale' });SAClickstream.track('button_clicked', {
label: 'Buy Now',
productId: 'sku-9821',
price: 49.99
});प्रॉपर्टी वैल्यू स्ट्रिंग्स, नंबर्स, बूलियन्स, या नेस्टेड ऑब्जेक्ट्स हो सकते हैं। अपने कोडबेस में इवेंट नामों को छोटा और सुसंगत रखें (उदाहरण के लिए, buttonClick और btn_tap को मिलाने के बजाय हमेशा button_clicked का उपयोग करें)।
लॉगिन से पहले, यह SDK प्रत्येक विज़िटर को localStorage में संग्रहीत एक रैंडम एनोनिमस ID असाइन करता है। लॉगिन के बाद, अपने बैकएंड से कॉन्टैक्ट ID के साथ identify कॉल करें:
// After a successful login
SAClickstream.identify('contact-id-from-your-backend');यह एक uid_transition इवेंट भेजता है जो एनोनिमस सेशन को ज्ञात कॉन्टैक्ट से जोड़ता है। लॉगिन से पहले रिकॉर्ड किए गए इवेंट्स कॉन्टैक्ट रिकॉर्ड पर संग्रहीत एनोनिमस ID के माध्यम से कॉन्टैक्ट से जुड़े होते हैं — कोई डेटा नहीं खोता।
यदि आपकी साइट कुकी सहमति बैनर का उपयोग करती है, तो उपयोगकर्ता की पसंद का सम्मान करें:
// User accepted tracking
SAClickstream.setConsent(true);
// User declined tracking
SAClickstream.setConsent(false);जब सहमति को false पर सेट किया जाता है, तो ट्रैकिंग तुरंत बंद हो जाती है और एनोनिमस ID एसोसिएशन साफ़ हो जाता है। सहमति फिर से दिए जाने तक कोई और इवेंट नहीं भेजे जाते।
यह SDK इवेंट्स को बैच करता है और उन्हें हर 500 मिलीसेकंड में भेजता है, या तुरंत जब 20 इवेंट्स कतार में आ जाते हैं। विफल अनुरोधों को बढ़ते हुए विलंब के साथ तीन बार तक पुनः प्रयास किया जाता है। इससे अस्थायी कनेक्टिविटी समस्याओं के दौरान इवेंट्स खोए बिना नेटवर्क उपयोग कम रहता है।
track या page कॉल से पहले init को कॉल किया गया है।यदि आप स्वचालित ट्रैकिंग के अलावा SAClickstream.page() को मैन्युअल रूप से कॉल करते हैं, तो आपको प्रति नेविगेशन दो इवेंट दिखाई देंगे। या तो स्वचालित ट्रैकिंग को अक्षम करें (init options में autoPage: false) या अपने मैन्युअल page() कॉल हटा दें।