Sitefinity个性化：非Sitefinity页面内容块个性化需求

Got it, let's break down how to personalize Sitefinity content blocks embedded in non-Sitefinity sites based on user browsing history—this is a common scenario I’ve helped teams implement, and here’s a practical, step-by-step approach:

Before you can pull content, you need to set up proper API access to your Sitefinity instance:

• Enable Sitefinity’s REST API via the backend (under Administration > Settings > Advanced > WebServices > REST API)
• Generate an API key or configure OAuth 2.0 for authenticated requests (API keys are simpler for server-side calls, while OAuth works better for client-side if you need user-specific access)
• Test the API endpoint to fetch content blocks: Use the GET /api/default/contentitems endpoint, filtering by your content block type (e.g., filter=Type eq 'ContentBlock') to ensure you can retrieve the base content.

Since you’re outside Sitefinity’s ecosystem, you’ll need to handle browsing tracking yourself. Here’s a lightweight frontend approach (adjust for your backend if you have one):

• Use localStorage to store a list of page/product IDs the user has visited (avoid storing sensitive data)
• Add a function to track visits on page load, making sure to avoid duplicate entries:

  function trackUserBrowsing() {
    const currentPageSlug = window.location.pathname;
    let browsingHistory = JSON.parse(localStorage.getItem('userBrowsingHistory')) || [];
    if (!browsingHistory.includes(currentPageSlug)) {
      browsingHistory.push(currentPageSlug);
      localStorage.setItem('userBrowsingHistory', JSON.stringify(browsingHistory));
    }
  }
  

• For cross-device personalization, you’d want to tie this tracking to a user account (if your site has authentication) and store history in your own backend database.

Now map the user’s browsing history to relevant Sitefinity content blocks:

• Define a mapping: Create a lookup between your non-Sitefinity page slugs/IDs and Sitefinity content categories (e.g., /tech-laptops maps to the "Technology" category in Sitefinity)
• Generate a filter: Convert the user’s browsing history into a Sitefinity API filter. For example, if the user visited tech pages, your filter might be filter=Category/Name eq 'Technology'
• Fallback for new users: If there’s no browsing history, default to a generic, high-performing content block (e.g., filter=Name eq 'Welcome-Default-Content')

Once you have your filter, call the Sitefinity API and render the content on your page:

• Here’s a full frontend example that ties it all together:

  async function fetchPersonalizedContent() {
    const browsingHistory = JSON.parse(localStorage.getItem('userBrowsingHistory')) || [];
    const pageCategoryMap = {
      '/tech-laptops': 'Technology',
      '/home-sofas': 'Home & Living',
      '/fashion-shirts': 'Fashion'
    };
    
    // Get unique categories from user's history
    const userInterests = [...new Set(browsingHistory.map(slug => pageCategoryMap[slug]))];
    let apiFilter = '';
  
    if (userInterests.length > 0) {
      apiFilter = `filter=Category/Name in ('${userInterests.join("','")}')`;
    } else {
      apiFilter = `filter=Name eq 'Welcome-Default-Content'`;
    }
  
    try {
      const response = await fetch(`https://your-sitefinity-domain.com/api/default/contentitems?${apiFilter}&fields=Title,Content`, {
        headers: {
          'X-Sitefinity-API-Key': 'YOUR_API_KEY_HERE' // Use your API key or OAuth token
        }
      });
      const contentData = await response.json();
      return contentData.items[0];
    } catch (err) {
      console.error('Failed to fetch personalized content:', err);
      // Return fallback content on error
      return { Title: 'Welcome!', Content: 'Explore our site to get tailored recommendations.' };
    }
  }
  
  // Render content to your page
  async function renderContentBlock() {
    const content = await fetchPersonalizedContent();
    const container = document.getElementById('sitefinity-personalized-block');
    container.innerHTML = `
      <h4>${content.Title}</h4>
      <div class="content-block">${content.Content}</div>
    `;
  }
  
  // Initialize on page load
  document.addEventListener('DOMContentLoaded', () => {
    trackUserBrowsing();
    renderContentBlock();
  });
  

Don’t forget these critical details:

• Privacy compliance: If you’re tracking user behavior, make sure to align with regulations like GDPR or CCPA (add a consent prompt before storing data in localStorage)
• API errors: Always have a fallback content block to display if the Sitefinity API is down or returns no results
• Performance: Cache API responses where possible to reduce load times and avoid hitting Sitefinity’s API rate limits

内容的提问来源于stack exchange，提问作者Anshul Divakar