Log
| Event | Function |
|---|---|
| impression | Adcio.onImpression(logOptions) |
| click | Adcio.onClick(logOptions) |
| purchase | Adcio.onPurchase({ productIdOnStore, orderId, amount, quantity? }) |
| add to cart | Adcio.onAddToCart({ productIdOnStore, cartId? }) |
| page view | Adcio.onPageView({ productIdOnStore? }) |
Log Options
Some of the log collecting methods require the logOptions parameter.
You can find it in the response value of the recommendations or the advertisements. Please refer here for more information.
const { suggestions } = await adcio.createRecommendationProducts({ ... });
suggestions.map((suggestion) => {
const { product, logOptions } = suggestion;
})Impression
await adcio.onImpression(logOptions);Click
await adcio.onClick(logOptions);Purchase
await adcio.onPurchase({
productIdOnStore: "1234",
orderId: "20231114010101",
amount: 29900,
quantity: 1,
});Add to cart
await adcio.onAddToCart({ productIdOnStore: "1234" });Page view
await adcio.onPageView({ productIdOnStore: "1234" });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>
);
}