अपने ईकॉमर्स खोज इंजन को वैयक्तिकृत कैसे करें

ऑनलाइन खरीदारी को शुरू में सुविधा के लिए एक शानदार मार्ग के रूप में डिजाइन किया गया था - कुछ क्लिक और आपके पसंदीदा आइटम सीधे आपके दरवाजे पर भेज दिए जाते हैं, कोई सामाजिक संपर्क या मॉल के माध्यम से ट्रेकिंग की आवश्यकता नहीं होती है!

तब से, ई-कॉमर्स पूरी तरह से कुछ और में विकसित हुआ है। अब, ऑनलाइन दुकानें कभी न खत्म होने वाले कैटलॉग और न्यूनतम पारस्परिक मार्गदर्शन के साथ भारी महसूस कर सकती हैं। परिणामस्वरूप, ई-कॉमर्स अनुभवों में उपयोगकर्ता अपनी आवश्यकता को कम करने में मदद करने के लिए खोज पर बहुत अधिक झुकाव रखते हैं, लेकिन हजारों परिणामों के माध्यम से खुदाई करने की चक्रीय दुविधा का अनुभव कर सकते हैं जो वे वास्तव में खोज रहे हैं। हालाँकि, अल्गोलिया के साथ अपने खोज अनुभव को वैयक्तिकृत करना उपयोगकर्ता की गतिविधि और रुचियों के आधार पर उन खोज परिणामों को वैयक्तिकृत करके इस दुविधा को समाप्त कर सकता है। यह उपयोगकर्ताओं के लिए एक बेहतर खोज अनुभव प्रदान करता है और आपकी वेबसाइट के कैटलॉग के साथ जुड़ाव भी बढ़ाता है, जो सभी के लिए एक जीत है!

अल्गोलिया डेवलपर्स के लिए वैयक्तिकृत खोज सुविधाओं को लागू करना आसान बनाने के लिए उपकरण प्रदान करता है। अपने उपयोगकर्ताओं को पसंद आने वाला कस्टम खोज अनुभव बनाने के लिए अल्गोलिया वैयक्तिकरण का लाभ उठाने का तरीका जानने के लिए आगे पढ़ें!

हम क्या बना रहे हैं

इस ट्यूटोरियल में, हम रिएक्ट और Commerce.js का उपयोग करके एक ई-कॉमर्स एप्लिकेशन का निर्माण करेंगे। सौभाग्य से, हमें स्क्रैच से निर्माण नहीं करना होगा - हम इस मूल ई-कॉमर्स एप्लिकेशन का उपयोग उन अनुशंसा सुविधाओं के साथ करेंगे जिन्हें हमने इस लेख में अपने शुरुआती बिंदु के रूप में बनाया है।

ट्यूटोरियल के पूरा होने पर, हमारा एप्लिकेशन हमारे स्टोर के उत्पाद कैटलॉग को खोजने और उपयोगकर्ता गतिविधि के आधार पर प्रासंगिक (और वैयक्तिकृत) खोज परिणामों को खींचने में सक्षम होगा:

यदि आप समय से पहले पूरे प्रोजेक्ट का कोड देखना चाहते हैं, तो आप algolia-commercejs-personalizations-app रिपॉजिटरी पर जा सकते हैं।

शुरू करना

निर्माण शुरू करने से पहले, सुनिश्चित करें कि आपने निम्नलिखित सेट अप किया है:

• नोड: यह जांचने के लिए कि क्या आपके पास पहले से ही नोड स्थापित है, अपनी कमांड लाइन में node -v चलाएँ। यदि कोई संस्करण पॉप अप नहीं होता है, तो आपको इसे स्थापित करने की आवश्यकता होगी — आप अपनी मशीन के लिए स्थापना निर्देश यहां प्राप्त कर सकते हैं।
• ngrok: यहाँ एक ngrok खाता बनाएँ। आपको अपने स्थानीय ऐप्स से कनेक्शन को टनल करने के लिए इसकी आवश्यकता होगी ताकि आप वेबहुक को कॉन्फ़िगर कर सकें और एपीआई कॉल कर सकें।
• चेक: Commerce.js आपके एकीकरण, एपीआई कुंजी और उत्पादों को प्रबंधित करने के लिए चेक नामक एक मंच का उपयोग करता है। आपको यहां एक खाता बनाना होगा और फिर एक Commerce.js स्टोर स्थापित करना होगा।
• अल्गोलिया: अल्गोलिया की सुविधाओं का लाभ उठाने के लिए, मुफ्त में अल्गोलिया बिल्ड प्लान अकाउंट बनाएं। एक बार आपका खाता हो जाने के बाद, अपने ई-कॉमर्स ऐप और products नामक एक इंडेक्स का प्रतिनिधित्व करने के लिए एक एप्लिकेशन बनाएं ।
  • अल्गोलिया अनुशंसित कार्यक्रम: अपने ऐप की पूरी सुविधाओं का उपयोग करने के लिए, अल्गोलिया अनुशंसा सेट करें - ऐसा करने के लिए, आपको 3 दिनों में कम से कम 500 रूपांतरण ईवेंट उत्पन्न करने होंगे, या तो मैन्युअल रूप से या CSV के माध्यम से ।
  • नोट: अल्गोलिया वैयक्तिकरण का उपयोग करने के लिए आपको इन घटनाओं की भी आवश्यकता होगी।
  • अल्गोलिया अनुशंसा मॉडल: एक बार जब आप अपने ईवेंट सेट अप और एकत्र कर लेते हैं, तो इन ईवेंट के आधार पर ट्रेंडिंग आइटम के लिए एक अनुशंसा मॉडल तैयार करें ताकि वे आपके ऐप में दिखाई दे सकें।

यदि आप उपरोक्त अल्गोलिया अवधारणाओं से अपरिचित हैं और सुनिश्चित नहीं हैं कि इसे स्वयं कैसे स्थापित किया जाए, तो आप भाग्यशाली हैं! हमारे पास एक पूर्ण मार्गदर्शिका है जो उपरोक्त सेटअप चरणों को कैप्चर करती है और साथ ही अन्य आवश्यक डेटा सेट अप करती है, जैसे अनुशंसाओं और वैयक्तिकरण के लिए ईवेंट और अनुशंसा मॉडल उत्पन्न करना।

एक बार आपके पास एक ई-कॉमर्स स्टोर स्थानीय रूप से चल रहा है जो आपके उत्पादों को सफलतापूर्वक प्रदर्शित कर रहा है, चैटबॉट चला रहा है, और आपके उत्पाद विवरण पृष्ठ पर ट्रेंडिंग आइटम अनुशंसाओं को सामने ला रहा है, तो आप अगले चरण पर जा सकते हैं!

निर्माण का समय

Algolia Personalization अपने खोज अनुभवों के लिए अधिक प्रासंगिक और व्यक्तिगत परिणाम उत्पन्न करने के लिए, घटनाओं के माध्यम से ट्रैक किए गए उपयोगकर्ता के विशिष्ट स्वाद का उपयोग करता है। चूंकि विभिन्न प्रकार के लोगों के लिए खोजों का अर्थ अलग-अलग हो सकता है, वैयक्तिकरण यह सुनिश्चित करेगा कि उपयोगकर्ता उन परिणामों को देखेंगे जो उनके लिए सबसे अधिक मायने रखते हैं। वैयक्तिकरण के जादू का लाभ उठाने के लिए, हमें पहले कुछ चरणों का पालन करना होगा।

अपने उत्पादों को वर्गीकृत करें

अपने उत्पादों के बीच संबंधों के बारे में गहन जानकारी प्रदान करने के लिए, आपको Commerce.js में अपने उत्पादों की श्रेणियां बनानी होंगी और उनमें श्रेणियां जोड़नी होंगी. श्रेणियाँ कोई भी सामान्य समूह हो सकती हैं कि उत्पाद एक दूसरे से कैसे संबंधित हैं - हमारे पुराने माल स्टोर के उदाहरण में, यह कपड़े के प्रकार (टॉप, एक्सेसरीज़, जूते), ब्रांड (विवियन वेस्टवुड, डायर, चैनल) और यहां तक कि हो सकते हैं। उन श्रेणियों के भीतर उप-श्रेणियाँ (जूतों के भीतर, स्नीकर्स, हील्स और बूट्स हैं)।

Commerce.js में श्रेणियां जोड़ें और उन्हें उत्पादों को असाइन करें

सबसे पहले, हम Commerce.js में अपने उत्पादों में श्रेणियां जोड़ेंगे। अपने चेक डैशबोर्ड के साइडबार में श्रेणियाँ पृष्ठ पर नेविगेट करें और नई श्रेणियां जोड़ने के लिए ऊपर दाईं ओर "जोड़ें" बटन पर क्लिक करें। श्रेणियों में माता-पिता और उप-श्रेणियाँ हो सकती हैं।

एक बार जब आप अपनी सभी वांछित श्रेणियां बना लेते हैं, तो Commerce.js के भीतर अपने उत्पादों पर नेविगेट करें और उन्हें ये श्रेणियां असाइन करें। प्रत्येक उत्पाद में आप जितनी चाहें उतनी श्रेणियां जोड़ें — जितनी अधिक श्रेणियां जोड़ी जाएंगी, आइटमों के बीच संबंध बनाने के उतने ही अधिक अवसर होंगे!

आपके द्वारा Commerce.js में सेट अप किए गए वेबहुक की बदौलत अपडेट की गई उत्पाद प्रविष्टियां Algolia के साथ स्वचालित रूप से सिंक हो जाएंगी, जो नए उत्पादों को products.create और products.update ईवेंट के लिए Algolia पर भेजती हैं। यदि आपके पास यह कॉन्फ़िगर नहीं है, तो इसे जोड़ने के लिए प्रोजेक्ट के रीडमे में दिए गए निर्देशों को पढ़ें।

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

अल्गोलिया में पहलुओं के लिए विशेषताओं को परिभाषित करें

आपकी इन्वेंट्री में वर्गीकृत प्रत्येक उत्पाद के साथ, हम इन श्रेणियों को फ़ेसिंग के माध्यम से महत्व प्रदान कर सकते हैं। पहलू फ़िल्टर करने योग्य श्रेणियों का एक समूह है जो उपयोगकर्ताओं को एक साथ कई श्रेणियों के माध्यम से परिणामों को परिशोधित करने की अनुमति देता है। अल्गोलिया में "एट्रिब्यूट्स" कहलाने वाली इन श्रेणियों में वे श्रेणियां शामिल होंगी जिन्हें हमने Commerce.js में अपने उत्पादों के लिए निर्दिष्ट किया है।

फ़ेसटिंग के लिए विशेषताओं की घोषणा करने के लिए, अपने अल्गोलिया डैशबोर्ड में अपने ऐप के इंडेक्स पर नेविगेट करें। फिर, "कॉन्फ़िगरेशन" पर क्लिक करें और "फ़िल्टरिंग और फ़ैसेटिंग" शीर्षक के अंतर्गत "पहलू" लिंक ढूंढें। "एट्रिब्यूट्स फॉर फ़ेसेटिंग" शीर्षक के तहत, "एक विशेषता जोड़ें" पर क्लिक करें - यह उन गुणों की एक श्रृंखला को प्रदर्शित करेगा जो आपके इंडेक्स में प्रत्येक आइटम के पास हैं। categories.name विशेषता खोजें। यदि आपको इसे खोजने में परेशानी हो रही है, तो यह सुनिश्चित करने के लिए अपने अनुक्रमणिका डेटा को दोबारा जांचें कि categories फ़ील्ड उन वस्तुओं से आबाद है जिनमें एक name गुण है।

• 💡 यदि आप और अधिक वैयक्तिकृत परिणामों के लिए एक अतिरिक्त पहलू चाहते हैं, तो हम एक विशेषता के रूप में आइटम खोज ( seo.description ) के लिए हमारे द्वारा बनाए गए SEO टैग भी जोड़ सकते हैं।

प्रत्येक विशेषता के साथ, आप उन्हें इस आधार पर भी वर्गीकृत कर सकते हैं कि क्या उन्हें "केवल फ़िल्टर", "खोज योग्य" या "खोज योग्य" होना चाहिए। आप यहां इन समूहों के बारे में अधिक जान सकते हैं।

एक बार पूरा हो जाने पर, आपकी अनुक्रमणिका का "फ़ेसेटिंग के लिए विशेषताएँ" अनुभाग कुछ इस तरह दिखना चाहिए:

वैयक्तिकरण सेट करें

अब, हम डैशबोर्ड के माध्यम से वैयक्तिकरण सेट करने के लिए तैयार हैं!

💡 *निजीकरण एक प्रीमियम अल्गोलिया विशेषता है जो प्री-प्रोडक्शन डेवलपमेंट के लिए फ्री बिल्ड प्लान में उपलब्ध है।*

अपने खाते में वैयक्तिकरण अनुभाग पर नेविगेट करके प्रारंभ करें। यदि आप पहली बार वैयक्तिकरण का उपयोग कर रहे हैं, तो आपको यह स्क्रीन दिखाई देगी:

"निजीकरण सक्षम करें" पर क्लिक करें और नियमों और शर्तों को स्वीकार करने के लिए प्रवाह का पालन करें।

एक बार जब आप प्रवाह पूरा कर लेते हैं, तो आपको ऐसा दिखने वाला डैशबोर्ड दिखाई देगा:

इस डैशबोर्ड के भीतर, आप यह सुनिश्चित करने के लिए एक वैयक्तिकरण रणनीति सेट अप कर सकते हैं कि उपयोगकर्ता आपके पास मौजूद डेटा के लिए सबसे अधिक प्रासंगिक परिणाम देखें। इस रणनीति को प्रभावित करने वाले दो अलग-अलग तत्व हैं:

• घटनाएँ : उपयोगकर्ता समानता सीखने के लिए प्राथमिक तंत्र। इन्हें Insights API के ज़रिए इकट्ठा किया जाता है. हमारे आवेदन में, हम वर्तमान में उत्पादों पर क्लिक करने वाले उपयोगकर्ताओं द्वारा ट्रिगर किए गए रूपांतरण ईवेंट एकत्र कर रहे हैं।
• पहलू : ये इस आलेख में पहले आपकी अनुक्रमणिका के लिए कॉन्फ़िगर किए गए थे। पहलुओं में श्रेणियों, समूहों और उत्पाद के अतिरिक्त विवरण शामिल होते हैं जो किसी घटना में इंटरैक्ट किए गए आइटम में अधिक अंतर्दृष्टि प्रदान करते हैं और उपयोगकर्ता को उस उत्पाद के बारे में वास्तव में क्या पसंद है (इसके उदाहरण ब्रांड, उत्पाद का प्रकार या रंग हैं)।

वजन घटनाओं और पहलुओं

डैशबोर्ड में, आप अपनी रणनीति को प्रभावित करने के लिए घटनाओं और पहलुओं दोनों के महत्व का मूल्यांकन करने में सक्षम होंगे। वजन आपको महत्व के विभिन्न स्तरों को रखने और कुछ घटनाओं और पहलुओं के लिए अधिक या कम अर्थ जोड़ने की अनुमति देता है, सभी भारों को एक सामान्य रणनीति में जोड़ता है जो वैयक्तिकरण को प्रभावित करेगा।

तौलने के साथ आरंभ करने के लिए, आपको अपनी कार्यनीति में उन घटनाओं और पहलुओं को जोड़ना होगा जिन्हें आप शामिल करना चाहते हैं। आपकी अनुक्रमणिका के लिए कोई भी उपलब्ध ईवेंट स्वचालित रूप से डैशबोर्ड पर "उपलब्ध ईवेंट" श्रेणी के अंतर्गत दिखाई देगा। यदि आपको कोई ईवेंट दिखाई नहीं देता है, तो अपने स्टोर में विभिन्न उत्पादों पर क्लिक करके नए जोड़े गए पहलुओं के साथ कुछ रूपांतरण ईवेंट फिर से उत्पन्न करने का प्रयास करें। "उपलब्ध ईवेंट" के अंतर्गत दिखाई देने के बाद अपनी रणनीति में ईवेंट जोड़ने के लिए, "रणनीति में जोड़ें" बटन पर क्लिक करें।

पहलुओं के लिए, आप उन्हें डैशबोर्ड के दाईं ओर "एक पहलू जोड़ें" बटन पर क्लिक करके जोड़ सकते हैं। वहाँ से, आप फ़ेसटिंग के लिए कोई भी विशेषता चुन सकते हैं जिसे आपने पहले जोड़ा था, जैसे कि categories.name और seo.description :

इन घटनाओं और पहलुओं को जोड़ने पर, आप अपनी रणनीति में जोड़े गए विभिन्न पहलुओं और घटनाओं के लिए वजन का प्रतिशत समायोजित करने में सक्षम होंगे। वजन जितना अधिक होगा, आपकी रणनीति में उस घटना या पहलू को उतना ही अधिक प्राथमिकता दी जाएगी।

इस लेख में वजन घटनाओं और वजन पहलुओं के बारे में अधिक विशिष्ट जानें।

वैयक्तिकरण प्रभाव को परिभाषित करें

तौलने के अलावा, आप वैयक्तिकरण रणनीति के प्रभाव को परिभाषित कर सकते हैं ताकि सापेक्ष स्थिति को प्रभावित किया जा सके जो कि खोज रैंकिंग पर उपयोगकर्ता की समानता है। इस ट्यूटोरियल के लिए, हमने प्रभाव को डिफ़ॉल्ट 50% पर छोड़ दिया है।

यहां वैयक्तिकरण प्रभाव पर गहन रणनीति का अन्वेषण करें।

अपनी रणनीति का अनुकरण करें

घटना, पहलू और प्रभाव सेटिंग्स के विभिन्न परिवर्तनों का परीक्षण करने के लिए, आप अपनी वैयक्तिकरण रणनीति का अनुकरण कर सकते हैं और पूर्वानुमानित रणनीति परिणामों को देखने के लिए उपयोगकर्ता आईडी द्वारा खोज कर सकते हैं।

चूंकि हमने अपने ऐप के लिए केवल एक उपयोगकर्ता को हार्ड-कोड किया है, इसलिए हम यह देखने के लिए user-1 खोज सकते हैं कि हमारी वर्तमान रणनीति के साथ क्या हो सकता है:

वैयक्तिकरण रणनीतियों के अनुकरण के बारे में अधिक जानकारी प्राप्त करने के लिए, आप यहां मार्गदर्शिका देख सकते हैं।

सेटिंग्स सेव करें

अंत में, एक बार जब आप अपनी रणनीति के अनुकरण के परिणामों से संतुष्ट हो जाते हैं, तो "परिवर्तन सहेजें" बटन दबाना सुनिश्चित करें। यदि आप संतुष्ट नहीं हैं, तो आप "छोड़ें" पर क्लिक कर सकते हैं।

SearchBar घटक में जोड़ें

खोज करने के लिए, उपयोगकर्ताओं को इनपुट खोज परिणामों के लिए एक स्थान की आवश्यकता होती है जो आपके अल्गोलिया इंडेक्स और परिणामों के लिए प्रश्नों से लिंक करता है।

आरंभ करने के लिए, client/src/components में एक फ़ाइल, SearchBar.js बनाएँ:

 // client/src/components/SearchBar.js import React from "react"; import { SearchBox } from "react-instantsearch-dom"; function SearchBar() { return ( <div className="search__bar"> <SearchBox showLoadingIndicator={true} /> </div> ); } export default SearchBar;

यह अल्गोलिया इंस्टेंटसर्च लाइब्रेरी से <SearchBox> विजेट का उपयोग करके एक बहुत ही सरल खोज बार बनाता है।

सर्चबॉक्स उपयोगकर्ताओं को खोज इनपुट करने की अनुमति देता है। सबमिट करने पर, Algolia अनुक्रमणिका (इस मामले में, यह उत्पाद है ) को खोजने के लिए एक क्वेरी बनाई जाती है, जो client/src/App.js में हमारे तत्काल खोज घटकों में निर्दिष्ट है, जिसके साथ हमारे सभी विचार लिपटे हुए हैं। इन दृश्यों को झटपट खोज टैग में लपेटने से हमें सभी झटपट खोज क्षमताओं और टैग के भीतर सभी घटकों के घटकों तक पहुंच प्राप्त होती है।

SearchBar घटक को एक बार जोड़ने के बाद देखने के लिए, आपको स्टाइल जोड़ने की आवश्यकता होगी। client/src/components में एक SearchBar.css फ़ाइल बनाएँ और इस उदाहरण फ़ाइल से सामग्री पेस्ट करें। अंत में, निम्न पंक्ति जोड़कर CSS को अपनी SearchBar.js फ़ाइल में आयात करना न भूलें:

 import "./SearchBar.css";

SearchHits में भूतल खोज परिणाम

अब जबकि हमारे पास उपयोगकर्ताओं के लिए खोज इनपुट करने का एक तरीका है, तो हम परिणामों को कैसे दिखा सकते हैं?

यह एक और नए घटक की आवश्यकता को बढ़ाता है जिसे हम खोजों को पुनर्निर्देशित कर सकते हैं, जो क्वेरी के आधार पर विभिन्न उत्पादों को प्रदर्शित करेगा। अल्गोलिया से खोज के परिणाम प्राप्त करने के लिए, हम फिर से इंस्टेंटसर्च लाइब्रेरी का लाभ उठा सकते हैं - विशेष रूप से, हम इस लाइब्रेरी में <हिट्स> नामक एक घटक का उपयोग कर सकते हैं, जो हमारे लिए इन वस्तुओं को प्रदर्शित करेगा।

client/src/components/SearchHits.js पर एक फ़ाइल बनाएं, जिसमें हमारा SearchHits घटक होगा। फिर, निम्नलिखित कोड में जोड़ें:

 // client/src/components/SearchHits.js import React from "react"; import { Hits } from "react-instantsearch-dom"; import ProductItem from "./ProductItem"; import aa from "search-insights"; import { Link } from "react-router-dom"; function Hit({ hit }) { return ( <div className="hit"> <Link to={`/products/${hit.id}`} state={{ selectedProduct: hit }} key={hit.id} onClick={() => { aa("convertedObjectIDs", { userToken: "user-1", index: "products", eventName: "Product conversion", objectIDs: [hit.id], }); }} > <ProductItem product={hit} /> </Link> </div> ); } function SearchHits() { return ( <> <Hits hitComponent={Hit} /> </> ); } export default SearchHits;

प्राथमिक SearchHits कार्यात्मक घटक के भीतर, हम अपने Hits घटक को InstantSearch< लाइब्रेरी से वापस कर रहे हैं। हिट परिणामों की एक सूची प्रदर्शित करेगा, या एक ही तत्काल खोज टैग के भीतर सर्चबॉक्स के भीतर क्या इनपुट किया गया है, इसके आधार पर खोज हिट - इस मामले में, यह सर्चबॉक्स है जिसे हमने अभी-अभी SearchBar.js में लागू किया है।

हिट्स घटक के साथ, आप कस्टम घटक का उपयोग करके प्रत्येक खोज हिट को प्रस्तुत कर सकते हैं। हमारे कोड में, हमने ProductItem घटक का पुन: उपयोग किया है जिसका उपयोग हमारे मुख्य पृष्ठ पर सतही उत्पादों के लिए भी किया जाता है।

अंत में, हमारे मुख्य पृष्ठ के ProductList घटक के समान, प्रत्येक ProductItem एक Link घटक में लपेटा जाता है जो उत्पाद के व्यक्तिगत विवरण पृष्ठ पर ले जाता है। यह उपयोगकर्ताओं को खोज परिणामों की सूची से आइटम को अधिक गहराई से देखने की अनुमति देता है और search-insights पुस्तकालय का उपयोग करके रूपांतरण क्लिकों को भी ट्रैक करता है, जैसा कि हम अपनी वेबसाइट पर सभी उत्पाद क्लिकों के लिए कर रहे हैं।

App.js में मार्ग जोड़ें

एक बार जब आपके पास SearchBar और SearchHits घटक तैयार हो जाते हैं, तो इन घटकों को हमारे ऐप में आधिकारिक रूप से जोड़ने और हमारे SearchHits पृष्ठ के लिए एक मार्ग इंगित करने का समय आ गया है!

अपने client/src/App.js फ़ाइल पर जाएं और फ़ाइल के शीर्ष पर नए घटकों को आयात करें:

 import SearchBar from "./components/SearchBar"; import SearchHits from "./components/SearchHits";

अब, होम पेज पर सर्च बार को प्रदर्शित करते हैं। ऐसा करने के लिए, / पथ के लिए अपने रूट कॉन्फ़िगरेशन में ProductsList घटक के ऊपर अपने SearchBar घटक में जोड़ें:

 <Route exact path="/" element={ <InstantSearch searchClient={searchClient} indexName="products"> <Configure clickAnalytics /> <SearchBar /> // just added this in <ProductsList products={products} /> <Bot /> </InstantSearch> />

अंत में, हम एक नया मार्ग जोड़ेंगे जो क्वेरी के आधार पर गतिशील रूप से खोज परिणामों को प्रदर्शित करेगा। ऐसा करने के लिए, हमें एक गतिशील मार्ग की आवश्यकता होगी जो खोज क्वेरी में ले। अपने App.js में <Routes> टैग में निम्नलिखित जोड़ें:

 <Route exact path="/results/:query" element={ <InstantSearch searchClient={searchClient} indexName="products"> <Configure clickAnalytics /> <SearchBar /> <SearchHits /> <Bot /> </InstantSearch> } />

उपरोक्त एक SearchBar , पिछली खोज से SearchHits की एक सूची और हमारे स्टोर के चैटबॉट के लिए मौजूदा Bot घटक को प्रदर्शित करेगा। जैसा कि हम अपने अन्य मार्गों के लिए दृश्यों के साथ कर रहे हैं, हम पृष्ठ की सामग्री को एक त्वरित खोज उदाहरण के साथ रैप कर रहे हैं ताकि उपयोगकर्ता पृष्ठ के भीतर लाइब्रेरी और इसकी खोज क्षमताओं का उपयोग कर सकें।

इस बिंदु पर, आपको होम पेज पर अपना सर्च बार देखने में सक्षम होना चाहिए:

मार्गों के आधार पर SearchHits या घर पर पुनर्निर्देशित करने के लिए SearchBar को अपडेट करें

अंत में, हमने अपना SearchBar सेट अप कर लिया है। हमारे पास एक पृष्ठ, SearchHits भी है, जो क्वेरी सबमिट किए जाने पर खोज परिणामों को प्रदर्शित करेगा।

हालाँकि, आप देख सकते हैं कि आपके SearchBar में खोज बटन पर क्लिक करने पर कोई परिणाम दिखाई नहीं दे रहे हैं (और वास्तव में, कुछ भी नहीं बदल रहा है)। ऐसा इसलिए है क्योंकि हमने अभी तक इस तत्व के लिए एक onSubmit ईवेंट नहीं बनाया है।

आइए SearchBar.js में वापस जाएं और काम पर लग जाएं!

हमारे SearchBar के लिए, जब हम अपना खोज परिणाम सबमिट करते हैं तो हमारा वांछित व्यवहार App.js में कॉन्फ़िगर किए गए /results/:query रूट पर रीडायरेक्ट करना होता है। हालाँकि, चूंकि हम इसे एक ईवेंट श्रोता में लागू कर रहे हैं, इसलिए हम <Link> टैग का उपयोग करके इस दृश्य पर नेविगेट नहीं कर सकते हैं, जैसा कि हम सामान्य रूप से करते हैं। सौभाग्य से, रिएक्ट एक useNavigate() हुक प्रदान करता है जिसका लाभ उठाकर हम अपने इच्छित पृष्ठ पर रीडायरेक्ट कर सकते हैं!

SearchBar के शीर्ष पर, useNavigate हुक आयात करें:

 import { useNavigate } from "react-router-dom";

फिर, SearchBar कार्यात्मक घटक के भीतर, return() :

 let navigate = useNavigate(); const routeChangeSubmit = (query) => { let queryURI = encodeURIComponent(query); let path = `/results/${queryURI}`; navigate(path); }; const routeChangeReset = () => { let path = `/`; navigate(path); };

उपरोक्त useNavigate() का एक हुक उदाहरण आरंभ करता है। फिर, हम दो अलग-अलग मार्ग परिवर्तन मार्गों की घोषणा करते हैं - एक जो onSubmit() घटना की स्थिति में होता है, और एक जो onReset() घटना की स्थिति में होता है, जो तब होता है जब कोई उपयोगकर्ता खोज करता है और "एक्स" बटन पर क्लिक करता है। खोज बटन के बगल में।

routeChangeSubmit() पाथवे के भीतर, हम क्वेरी ले रहे हैं और इसे एन्कोडिंग कर रहे हैं ताकि यह राउटर URL फॉर्मेटिंग के साथ समस्या पैदा न करे (यह उन मामलों के लिए मददगार है जहां उपयोगकर्ता की खोज क्वेरी में स्पेस या अन्य गैर-URL-अनुकूल वर्ण होते हैं)। फिर, हम एन्कोडेड क्वेरी स्ट्रिंग को :query param के रूप में उपयोग करते हुए, अपने SearchHits के लिए वांछित मार्ग के लिए पथ सेट करते हैं। अंत में, हम उपयोगकर्ता को उस मार्ग पथ पर निर्देशित करने के लिए useNavigate() हुक का उपयोग करते हैं, जिसके परिणामस्वरूप खोज परिणामों के लिए एक सहज पुनर्निर्देशन होता है। routeChangeReset() वही काम करता है, सिवाय इसके कि यह होम पेज पर रीडायरेक्ट करता है और पथ सीधा होने के बाद से किसी भी URL हेरफेर की आवश्यकता नहीं है।

अंत में, हम return() के भीतर अपने SearchBox घटक में onSubmit और onReset ईवेंट जोड़ देंगे:

 <SearchBox showLoadingIndicator={true} onSubmit={(event) => { // added event.preventDefault(); if (event.target[0].value) { routeChangeSubmit(event.target[0].value); } }} onReset={() => { // added routeChangeReset(); }} />

दोनों घटना श्रोताओं ने खोज को submitting और resetting , संबंधित कार्यों के लिए अभी-अभी जोड़े गए रास्तों को कॉल किया है। onSubmit() के भीतर, हम किसी भी अवांछित रीडायरेक्ट से बचने के लिए event.preventDefault() कॉल कर रहे हैं। फिर, हम event.target[0].value के माध्यम से खोज क्वेरी को खींचने के लिए event उपयोग करते हैं।

हालांकि, अगर event.target[0].value प्रॉपर्टी खाली है (जिसका मतलब है कि उपयोगकर्ता ने क्वेरी दर्ज किए बिना खोज बटन पर क्लिक किया है), एक अमान्य यूआरएल रीडायरेक्ट होगा, जिसके परिणामस्वरूप एक खाली पेज होगा। नतीजतन, कोड यह सुनिश्चित करने के लिए जांच करेगा कि मूल्य मौजूद है, और यदि ऐसा होता है, तो यह हमारे routeChangeSubmit() मार्ग को कॉल करता है और खोज क्वेरी में पास होता है।

इस कोड को जोड़े जाने के साथ, आपको आइटमों को मूल रूप से खोजने और संबंधित परिणाम देखने में सक्षम होना चाहिए:

कॉन्फ़िगर घटक में वैयक्तिकरण सक्षम करें

खोजना शानदार है, लेकिन वैयक्तिकरण के साथ खोजना और भी बेहतर है। सौभाग्य से, हमने अल्गोलिया का उपयोग करके आसानी से एक वैयक्तिकरण रणनीति विकसित की है, और हम इसे अपने मौजूदा खोज उदाहरण में जल्दी से शामिल कर सकते हैं!

वैयक्तिकरण में जोड़ने के लिए, हमें अपने App.js में हमारे कॉन्फिगर घटकों (InstantSearch लाइब्रेरी से) में दो पैरामीटर जोड़ने होंगे, जहां हमारी सभी खोज सेटिंग्स जुड़ी हुई हैं। हमें जिन दो मापदंडों को जोड़ने की आवश्यकता होगी वे हैं:

• enablePersonalization : एक बूलियन जो उपयोगकर्ता के तत्काल खोज उदाहरण के लिए होने वाले वैयक्तिकरण परिणामों को या तो सक्षम या अक्षम कर देगा।
• userToken : एक स्ट्रिंग जिसका उद्देश्य एक विशिष्ट उपयोगकर्ता आईडी होना है - यदि आप अपने आवेदन के लिए अलग उपयोगकर्ता खातों का उपयोग कर रहे हैं, तो आप वर्तमान उपयोगकर्ता की आईडी को पुनः प्राप्त करेंगे और इसे यहाँ भरेंगे। हमारे ऐप के परिदृश्य में, हम केवल एक उपयोगकर्ता की गतिविधि को ट्रैक कर रहे हैं, इसलिए हम इस मान को उस उपयोगकर्ता की आईडी - user-1 से पॉप्युलेट करेंगे।

client/src/App.js पर नेविगेट करें और SearchBar ( / और /results/:query ) वाले प्रत्येक मार्ग के लिए प्रत्येक <Configure> टैग में निम्नलिखित पैरामीटर जोड़ें।

यहां इसका एक उदाहरण दिया गया है कि यह होम ( / ) रूट में कैसा दिखेगा:

 <InstantSearch searchClient={searchClient} indexName="products"> <Configure clickAnalytics enablePersonalization={true} userToken="user-1" /> <SearchBar /> <ProductsList products={products} /> <Bot /> </InstantSearch>

प्रत्येक मार्ग के Configure घटक के लिए इसे जोड़े जाने के साथ, अब आप प्रत्येक खोज पर वैयक्तिकृत परिणाम देख पाएंगे!

उत्पादन में वैयक्तिकरण को सक्षम करने और अन्य विधियों के बारे में अधिक जानने के लिए जिनका उपयोग आप वैयक्तिकरण को सक्षम करने के लिए कर सकते हैं (जैसे कि इसे कुछ सूचकांकों के लिए डैशबोर्ड में सक्षम करना), इस लेख पर जाएँ।

निष्कर्ष

अतुल्य कार्य, और साथ चलने के लिए धन्यवाद! 🎉 इस गाइड के साथ, आप अपने ई-कॉमर्स अनुभव में वैयक्तिकृत खोज को जोड़ना सीख गए हैं। यदि आप इस ट्यूटोरियल के लिए प्रोजेक्ट का पूरा कोड देखना चाहते हैं, तो आप algolia-commercejs-personalizations-app रिपॉजिटरी पर जा सकते हैं।

अल्गोलिया की वैयक्तिकरण सुविधाओं ने हमारे लिए सभी भारी भारोत्तोलन किया - वैयक्तिकरण डैशबोर्ड के माध्यम से, आप कस्टम उपयोगकर्ता खोज अनुभवों के लिए आसानी से एक रणनीति बनाने में सक्षम थे। इसके अतिरिक्त, इंस्टेंटसर्च लाइब्रेरी से अल्गोलिया के पूर्व-निर्मित घटकों ने आपके लिए जमीन पर काम करने और अपनी साइट पर एक आसान खोज समाधान लागू करने के लिए न्यूनतम कॉन्फ़िगरेशन की आवश्यकता के साथ एक सीधा तरीका प्रदान किया।

हम आशा करते हैं कि आपने इस ट्यूटोरियल से वैयक्तिकरण की शक्ति के बारे में बहुत कुछ सीखा है! 💪 यदि आप आज हमारे द्वारा बनाए गए ऐप पर और अधिक हैक करना चाहते हैं, तो आप कुछ अपडेट करने पर विचार कर सकते हैं जैसे:

• यह सुनिश्चित करने के लिए कि आपकी साइट हमेशा सुचारू रूप से चल रही है, फ्रंट-एंड और बैक-एंड परीक्षण जोड़ना

• उपयोगकर्ता खातों का परिचय - उपयोगकर्ताओं को आपकी साइट पर साइन अप करने, लॉग इन करने और खातों से लॉग आउट करने की अनुमति दें। आप पसंदीदा जैसी नई उपयोगकर्ता-विशिष्ट सुविधाओं में भी जोड़ सकते हैं

• अधिक प्रकार की घटनाओं को उत्पन्न करना और विभिन्न अनुशंसा मॉडल और वैयक्तिकरण रणनीतियों के साथ प्रयोग करना

• कार्ट में आइटम जोड़ने और चेक आउट करने का अनुभव बनाना

  
  

संभावनाएं अनंत हैं! ✨ आपके भविष्य की हैकिंग के लिए शुभकामनाएं!