SPA कुकी सहमति के लिए क्यों मुश्किल हैं

सिंगल-पेज एप्लिकेशन एक बार लोड होते हैं और नेविगेशन को क्लाइंट-साइड पर हैंडल करते हैं। सहमति जांच को फिर से ट्रिगर करने के लिए कोई पेज रीलोड नहीं होता। index.html में लोड की गई थर्ड-पार्टी स्क्रिप्ट किसी भी सहमति UI के दिखने से पहले फायर हो जाती हैं।

सामान्य SPA गलतियां

• सहमति से पहले index.html में Google Analytics लोड करना
• रूट परिवर्तन पर सहमति स्थिति की दोबारा जांच न करना
• ऐप के री-रेंडर होने पर सहमति स्थिति खो जाना
• सहमति गेट के बिना कंपोनेंट लाइफसाइकिल में ट्रैकिंग इवेंट फायर करना

सही कार्यान्वयन

1. अपने HTML हेड में केवल CMP स्क्रिप्ट लोड करें — और कुछ नहीं
2. सहमति मिलने के बाद ही थर्ड-पार्टी स्क्रिप्ट को सशर्त रूप से लोड करें
3. सहमति स्थिति को प्रोग्रामेटिक रूप से जांचने के लिए CMP के JavaScript API का उपयोग करें
4. अपने कंपोनेंट्स में सहमति जांच के पीछे एनालिटिक्स और मार्केटिंग कॉल को गेट करें

फ्रेमवर्क-विशिष्ट सुझाव

React

एक consent context provider का उपयोग करें। ट्रैकर्स को इनिशियलाइज़ करने से पहले useEffect hooks में सहमति स्थिति जांचें।

Vue

एक consent plugin बनाएं। नेविगेशन पर सहमति स्थिति सत्यापित करने के लिए router guards का उपयोग करें।

Angular

DI के माध्यम से इंजेक्ट किए गए consent service का उपयोग करें। Route guards और कंपोनेंट init में सहमति जांचें।

SPA के साथ FlexyConsent

FlexyConsent का सिंगल-स्क्रिप्ट दृष्टिकोण किसी भी फ्रेमवर्क के साथ काम करता है। यह एसिंक्रोनस रूप से लोड होता है, कुकीज़ के माध्यम से सहमति स्थिति प्रबंधित करता है और प्रोग्रामेटिक सहमति जांच के लिए JavaScript API उजागर करता है। किसी फ्रेमवर्क-विशिष्ट SDK की आवश्यकता नहीं है।