SDK
JavaScript
Recommendations

Making a Recommendation

const { suggestions: productRecommendations, placement: productPlacement } =
  await adcio.createRecommendationProducts({
    placementId: "...",
  });
 
const { suggestions: bannerRecommendations, placement: bannerPlacement } =
  await adcio.createRecommendationBanners({
    placementId: "...",
  });

Parameters and Response

Please refer to the Recommendations API documentation

Example Full Code

import { Adcio } from "adcio.js";
 
const useAdcio = () => {
  const [adcio, setAdcio] = useState(null);
 
  useEffect(() => {
    const adcio = new Adcio({ clientId: "...", customerId: "..." });
    setAdcio(adcio);
  }, []);
 
  return adcio;
};
 
export function Page() {
  const adcio = useAdcio();
  const [suggestions, setSuggestions] = useState([]);
 
  useEffect(() => {
    if (adcio) {
      adcio
        .createRecommendationProducts({ placementId: "..." })
        .then(({ suggestions, placement }) => setSuggestions(suggestions));
    }
  }, [adcio]);
 
  useEffect(() => {
    suggestions.forEach(({ product, logOptions }) =>
      adcio.onDetectImpression({
        logOption: logOptions,
        selector: `#product-card-${product.id}`,
      }),
    );
  }, [suggestions]);
 
  return (
    <div>
      <div>
        {suggestions.map(({ product, logOptions }) => (
          <div
            id={`product-card-${product.id}`}
            key={product.id}
            onClick={() => adcio.onClick(logOptions)}
          >
            <div>Name: {product.name}</div>
            <div>Price: {product.price}</div>
          </div>
        ))}
      </div>
    </div>
  );
}
Log CollectionGuide