सामग्री पर जाएं
उपयोगकर्ता गाइड कैसे करें गाइड सहायता डेमो अनुरोध करें साइन इन करें
Pushwoosh.com

ऑन-साइट प्रोडक्ट रिकमेंडेशन

Web SDK आपकी वेबसाइट पर प्रोडक्ट रिकमेंडेशन दिखा सकता है: प्रोडक्ट पेज पर, कार्ट में, कैटलॉग पेज पर, या 404 पेज पर। प्रोडक्ट एप्लिकेशन के प्रोडक्ट कैटलॉग से आते हैं। इन्हें दिखाने के दो तरीके हैं:

  • विजेट: data-pw-recommendations एट्रिब्यूट वाला एक एलिमेंट जोड़ें, और SDK उसे प्रोडक्ट के ग्रिड से भर देता है।
  • Headless API: Pushwoosh.recommendations.fetch को कॉल करें और प्रोडक्ट को अपने स्वयं के मार्कअप के साथ रेंडर करें।

एक लाइव उदाहरण pushon.pushwoosh.com पर Pushwoosh डेमो शॉप है। इसमें 404 पेज पर एक विजेट ब्लॉक है और प्रोडक्ट पेज तथा कार्ट में headless ब्लॉक हैं।

पूर्वापेक्षाएँ

Anchor link to

ऑन-साइट रिकमेंडेशन चालू करें

Anchor link to

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

कंट्रोल पैनल में ऑन-साइट रिकमेंडेशन चालू करने के लिए:

  1. एप्लिकेशन के लिए कंटेंट → प्रोडक्ट कैटलॉग पर जाएं।
  2. On-site recommendations पर क्लिक करें।
  3. Show recommendations on my website चालू करें।
  4. Website domains में, उन वेबसाइटों के डोमेन दर्ज करें जो ब्लॉक दिखाएंगी, प्रति पंक्ति एक। उदाहरण के लिए, shop.example.com।
  5. सहेजें पर क्लिक करें।
On-site recommendations पैनल, जिसमें Show recommendations on my website स्विच चालू है, Website domains में एक डोमेन है, और Save बटन है

सहेजने के बाद:

  • Website domains डोमेन को वैसे ही दिखाता है जैसे Pushwoosh ने उन्हें संग्रहीत किया है: https:// जोड़कर, लोअरकेस में, और बिना डुप्लिकेट के। सूची में टाइपो की जांच करें।
  • ब्लॉक केवल सूचीबद्ध वेबसाइटों पर लोड होते हैं। यदि आप Website domains को खाली छोड़ देते हैं, तो ब्लॉक किसी भी वेबसाइट पर लोड होते हैं।
  • परिवर्तन एक मिनट के भीतर प्रभावी हो जाता है।

यदि आप कंट्रोल पैनल तक नहीं पहुंच सकते, तो Pushwoosh सपोर्ट या अपने Customer Success Manager से एप्लिकेशन के लिए ऑन-साइट रिकमेंडेशन चालू करने के लिए कहें। एप्लिकेशन कोड और अपनी वेबसाइटों के डोमेन शामिल करें।

रिकमेंडेशन रणनीतियाँ

Anchor link to
रणनीतियह क्या दिखाती हैआवश्यकता
viewedवे प्रोडक्ट जो इस विज़िटर ने हाल ही में देखे। साइन-इन किए हुए विज़िटर के लिए, उनकी user ID के तहत देखे गए प्रोडक्ट पहले आते हैं।trackProductView के साथ भेजे गए प्रोडक्ट व्यू।
bestsellers_30dपिछले 30 दिनों में एप्लिकेशन के सबसे ज़्यादा बिकने वाले प्रोडक्ट। स्टॉक में न रहे प्रोडक्ट छोड़ दिए जाते हैं।ऑर्डर के आइटम के साथ ऑर्डर इवेंट्स।
also_boughtवे प्रोडक्ट जो अक्सर किसी दिए गए प्रोडक्ट के साथ खरीदे या देखे जाते हैं। स्टॉक में न रहे प्रोडक्ट छोड़ दिए जाते हैं।trackProductView के साथ भेजे गए प्रोडक्ट व्यू, ऑर्डर इवेंट्स, या प्रोडक्ट ID वाले कोई अन्य इवेंट्स। देखें प्रोडक्ट गतिविधि को ट्रैक करें। अनुरोध में प्रोडक्ट ID आवश्यक है।

जब किसी रणनीति के पास दिखाने के लिए कुछ नहीं होता, तो फ़ीड उसके बजाय फ़ॉलबैक रणनीति देता है। फ़ॉलबैक डिफ़ॉल्ट रूप से bestsellers_30d है। इसके बजाय खाली जवाब पाने के लिए इसे none पर सेट करें। जवाब हमेशा बताता है कि वास्तव में कौन सी रणनीति दी गई, ताकि आप ब्लॉक का शीर्षक बदल सकें।

प्रोडक्ट व्यू ट्रैक करें

Anchor link to

viewed और also_bought रणनीतियाँ प्रोडक्ट व्यू का उपयोग करती हैं। हर प्रोडक्ट पेज पर, SDK तैयार होने के बाद trackProductView को कॉल करें:

Pushwoosh.push(() => {
  Pushwoosh.trackProductView({
    id: 'SKU-123',
    name: 'Linen shirt',
    price: 49.9,
    currency: 'USD',
    category: 'Shirts',
    url: 'https://shop.example.com/linen-shirt',
    imageUrl: 'https://shop.example.com/img/linen-shirt.jpg',
  });
});

केवल id आवश्यक है। वही प्रोडक्ट ID उपयोग करें जो आपके प्रोडक्ट कैटलॉग में है। SDK एक PW_ProductView इवेंट भेजता है और 30 सेकंड के भीतर उसी प्रोडक्ट के दोहराए गए व्यू को छोड़ देता है, इसलिए पेज रीलोड को दूसरे व्यू के रूप में नहीं गिना जाता।

ऑर्डर इवेंट्स भेजें

Anchor link to

bestsellers_30d रणनीति केवल ऑर्डर इवेंट्स से हुई बिक्री गिनती है, और यह हर ब्लॉक के लिए डिफ़ॉल्ट फ़ॉलबैक है। जब कोई विज़िटर ऑर्डर देता है, तो PW_OrderCreated भेजें:

Pushwoosh.push((api) => {
  api.postEvent('PW_OrderCreated', {
    orderId: 'ORDER-10293',
    items: [
      { productId: 'SKU-123', quantity: 1 },
      { productId: 'SKU-456', quantity: 2 },
    ],
  });
});

orderId आवश्यक है, क्योंकि इसके बिना ऑर्डर नहीं गिना जाता। items में, वही प्रोडक्ट ID उपयोग करें जो आपके प्रोडक्ट कैटलॉग में हैं। जब कोई ऑर्डर बदलता है, तो उसी orderId और items के साथ PW_OrderUpdated भेजें। इसके बजाय अपने सर्वर से ऑर्डर इवेंट्स भेजने के लिए, देखें बेस्टसेलर: अपने ऑर्डर इवेंट्स में आइटम जोड़ें।

विजेट ब्लॉक जोड़ें

Anchor link to

जहां ब्लॉक दिखना चाहिए, वहां data-pw-recommendations एट्रिब्यूट वाला एक एलिमेंट जोड़ें। SDK विजेट को केवल उन पेजों पर लोड करता है जिनमें ऐसा एलिमेंट होता है।

<div
  data-pw-recommendations
  data-pw-strategy="also_bought"
  data-pw-product-id="SKU-123"
  data-pw-fallback="bestsellers_30d"
  data-pw-limit="4"
  data-pw-title="Bought together"
  data-pw-fallback-title="Popular right now"
  data-pw-block="pdp-also-bought"
  data-pw-min-height="260"
></div>
एट्रिब्यूटविवरण
data-pw-recommendationsएलिमेंट को रिकमेंडेशन ब्लॉक के रूप में चिह्नित करता है। आवश्यक।
data-pw-strategyviewed, bestsellers_30d, या also_bought। डिफ़ॉल्ट bestsellers_30d है।
data-pw-fallbackमुख्य रणनीति के पास कुछ न होने पर दी जाने वाली रणनीति: viewed, bestsellers_30d, also_bought, या none। डिफ़ॉल्ट bestsellers_30d है।
data-pw-limitप्रोडक्ट की संख्या, 1 से 12 तक। डिफ़ॉल्ट 6 है।
data-pw-product-idस्क्रीन पर दिख रहा प्रोडक्ट। also_bought के लिए आवश्यक।
data-pw-excludeन दिखाए जाने वाले प्रोडक्ट की कॉमा से अलग की गई ID, उदाहरण के लिए वे प्रोडक्ट जो पहले से कार्ट में हैं। अधिकतम 50।
data-pw-blockब्लॉक का नाम। इसे प्रोडक्ट लिंक और क्लिक इवेंट्स में जोड़ा जाता है, ताकि आप एनालिटिक्स में ब्लॉक को अलग-अलग पहचान सकें।
data-pw-titleब्लॉक का शीर्षक।
data-pw-fallback-titleफ़ॉलबैक रणनीति दिए जाने पर दिखाया जाने वाला शीर्षक, उदाहरण के लिए “You viewed” के बजाय “Popular right now”।
data-pw-min-heightब्लॉक लोड होने के दौरान आरक्षित की जाने वाली जगह, ताकि लेआउट शिफ्ट से बचा जा सके। संख्या को पिक्सेल के रूप में पढ़ा जाता है। कोई भी CSS लंबाई भी काम करती है।

विजेट हर प्रोडक्ट की इमेज, नाम और कीमत दिखाता है, और प्रोडक्ट पेज से लिंक करता है। प्रोडक्ट लिंक में utm_medium=onsite होता है। किसी प्रोडक्ट पर क्लिक करने से ब्लॉक के नाम, रणनीति और प्रोडक्ट की स्थिति के साथ एक PW_RecommendationClick इवेंट भेजा जाता है।

जब आप कोई भी data-pw-* एट्रिब्यूट बदलते हैं, तो ब्लॉक फिर से लोड होता है। उदाहरण के लिए, जब पेज रीलोड किए बिना स्क्रीन पर दिख रहा प्रोडक्ट बदलता है, तो data-pw-product-id अपडेट करें।

सामान्य पेजों के लिए ब्लॉक

Anchor link to
पेजरणनीतिसेट किए जाने वाले एट्रिब्यूट
प्रोडक्ट पेजalso_boughtस्क्रीन पर दिख रहे प्रोडक्ट के साथ data-pw-product-id, उसी ID के साथ data-pw-exclude
कार्टalso_boughtकार्ट के किसी प्रोडक्ट के साथ data-pw-product-id, कार्ट के सभी प्रोडक्ट के साथ data-pw-exclude
कैटलॉग या होम पेजbestsellers_30d—
404 पेजvieweddata-pw-fallback="bestsellers_30d" और data-pw-fallback-title, ताकि पहली बार आने वाले विज़िटर लोकप्रिय प्रोडक्ट देखें

ब्लॉक की स्थितियाँ

Anchor link to

विजेट ब्लॉक एलिमेंट पर data-pw-state एट्रिब्यूट सेट करता है:

  • loading: प्रोडक्ट लोड हो रहे हैं।
  • ready: प्रोडक्ट दिखाए गए हैं।
  • empty: न तो रणनीति के पास और न ही फ़ॉलबैक के पास प्रोडक्ट हैं। ब्लॉक खाली रहता है।
  • error: प्रोडक्ट लोड नहीं हुए। ब्लॉक खाली रहता है।

खाली ब्लॉक के आसपास अपने स्वयं के फ़्रेम या हेडिंग को छिपाने के लिए स्थिति का उपयोग करें:

.recommendations-frame:has([data-pw-state="empty"], [data-pw-state="error"]) {
  display: none;
}

विजेट की स्टाइलिंग

Anchor link to

विजेट shadow DOM के अंदर रेंडर होता है, इसलिए आपकी साइट का CSS इसकी सामग्री तक नहीं पहुंचता। इसके बजाय ब्लॉक एलिमेंट पर ये कस्टम प्रॉपर्टी सेट करें:

प्रॉपर्टीविवरणडिफ़ॉल्ट
--pw-reco-fontफ़ॉन्ट फ़ैमिलीपेज से इनहेरिट
--pw-reco-accentकीमत का रंगवर्तमान टेक्स्ट रंग
--pw-reco-radiusप्रोडक्ट इमेज के कोनों की त्रिज्या8px
--pw-reco-columnsग्रिड कॉलम की संख्या। 600px तक चौड़ी स्क्रीन पर, ग्रिड में हमेशा 2 कॉलम होते हैं।जितने फ़िट हों
[data-pw-recommendations] {
  --pw-reco-columns: 4;
  --pw-reco-radius: 0;
  --pw-reco-accent: #337ab7;
}

बारीक स्टाइलिंग के लिए, शीर्षक, ग्रिड और हर प्रोडक्ट कार्ड को title, grid और card CSS parts के रूप में उपलब्ध कराया गया है, उदाहरण के लिए [data-pw-recommendations]::part(card)।

सिंगल-पेज एप्लिकेशन

Anchor link to

डिफ़ॉल्ट रूप से, SDK ब्लॉक को एक बार ढूंढता है, जब वह तैयार होता है। यदि आपकी साइट ब्लॉक को बाद में रेंडर करती है, उदाहरण के लिए सिंगल-पेज एप्लिकेशन में नेविगेशन पर, तो init कॉल में recommendations.spa को true पर सेट करें:

Pushwoosh.push(['init', {
  applicationCode: 'XXXXX-XXXXX',
  // other initialization parameters...
  recommendations: {
    spa: true,
  },
}]);

XXXXX-XXXXX को अपने एप्लिकेशन कोड से बदलें।

इसके बाद SDK पेज पर नज़र रखता रहता है और ब्लॉक दिखते ही विजेट लोड कर देता है।

किसी पेज पर data-pw-recommendations एलिमेंट होने पर भी विजेट को बंद रखने के लिए, recommendations.widget को false पर सेट करें। Headless API काम करता रहता है।

अपने स्वयं के मार्कअप के साथ ब्लॉक रेंडर करें

Anchor link to

जब विजेट का लेआउट आपके डिज़ाइन में फ़िट न हो, तो headless API का उपयोग करें। Pushwoosh.recommendations.fetch के साथ प्रोडक्ट का अनुरोध करें और Pushwoosh.recommendations.trackClick के साथ क्लिक की रिपोर्ट करें:

Pushwoosh.push(async () => {
  const request = {
    strategy: 'also_bought',
    productId: 'SKU-123',
    exclude: ['SKU-123'],
    fallback: 'bestsellers_30d',
    limit: 4,
    block: 'pdp-also-bought',
  };
  const { items, strategy } = await Pushwoosh.recommendations.fetch(request);


  const title = strategy === request.strategy ? 'Bought together' : 'Popular right now';
  renderBlock(title, items, (item, index) => {
    Pushwoosh.recommendations.trackClick({
      block: request.block,
      strategy,
      productId: item.id,
      position: index + 1,
    });
  });
});

fetch विजेट एट्रिब्यूट वाले ही पैरामीटर लेता है: strategy, fallback, limit, productId, exclude, और block। यह लौटाता है:

  • items: प्रोडक्ट। हर एक में id, title, description, image_url, url, price, price_formatted, old_price_formatted (केवल सेल पर चल रहे प्रोडक्ट के लिए), currency, category, और sku होते हैं।
  • strategy: वास्तव में दी गई रणनीति। फ़ॉलबैक दिए जाने पर यह अनुरोधित रणनीति से अलग होती है, और जवाब खाली होने पर यह none होती है।

यदि अनुरोध विफल हो जाता है, तो fetch एक त्रुटि थ्रो करता है। इसे कैच करें और ब्लॉक छिपा दें।

trackClick PW_RecommendationClick इवेंट भेजता है। क्लिक से कोई दूसरा पेज खुलने पर भी यह डिलीवर होता है। position ब्लॉक में प्रोडक्ट का स्थान है, जो 1 से शुरू होता है।

संचार की सहमति के बिना व्यवहार

Anchor link to

यदि विज़िटर के लिए Pushwoosh के साथ संचार अक्षम है, उदाहरण के लिए init कॉल में communicationEnabled: false के साथ (देखें वेब पुश नोटिफिकेशन के लिए उपयोगकर्ता की सहमति प्रबंधित करें):

  • trackProductView और trackClick कुछ भी नहीं भेजते।
  • ब्लॉक अब भी प्रोडक्ट दिखाते हैं, लेकिन अनुरोध विज़िटर की पहचान नहीं करता। viewed रणनीति के पास उपयोग करने के लिए कोई इतिहास नहीं होता, इसलिए फ़ॉलबैक रणनीति दी जाती है।

विज़िटर द्वारा संचार सक्षम करने के बाद, प्रोडक्ट व्यू और क्लिक फिर से ट्रैक किए जाते हैं।