How to integrate Product hits

Integrating Product Hits is a mandatory step if you want to launch campaigns using segment criteria such as Cart abandonment and Content interest.

To learn more about how to set-up these 2 criteria, please refer to the following article. 

AB Tasty lets you save the data related to what kind of product your visitors view and add to their cart during their visits on your website. This integration enables AB Tasty to offer you complementary services to improve your testing and personalization strategy. 

Every “hit” integration works the same way, you can follow the same process whether you are interested in using Cart abandonment or Content interest criteria.

Like every JS snippet, you have different ways to proceed with the integration. We will present you three options we consider the best to integrate the hits product script:

• Directly on your website: 
• In your code base 
• Through a tag manager (like GTM for instance)
• From your AB Tasty account, inside the account's global JavaScript menu

To learn more about Product hits and its principles, refer to Product hits integration principles.

How to integrate Product hits

From your website

We recommend integrating this script directly into your website codebase. You will easily be able to execute it on the right page depending on the context and type of hits you want to send to AB Tasty:

• On every product page for the ‘VIEW’ type of hit product. AB Tasty will receive a precise hit of navigation from your visitors
• As soon as a visitor adds a product to its cart for the ‘CART_ITEM’ type of hit product 
• As soon as a visitor initiates a cart for the ‘CART_TOTAL’ type of hit product 

You can encapsulate the script given above in the "what to implement" section in the right context that will match your requirements and specificities. 

From your AB Tasty account

You can integrate this script from your Account JavaScript. The main difference is that it will be executed directly by our tag. 

You can integrate the same conditions as you would do with a proper integration in your codebase, but you are not dependent on developers to plan a release as it’s our tag that will execute it on your website. 

On the Account JavaScript page, the basic “hit” integration should look like this:

From your Tag Manager System 

If you use a Tag Manager System like Google tag Manager, you can integrate the hit product as every other JS script (like AB Tasty generic tag for example) in this environment. You just need to follow the basic steps - here an example with Google tag Manager:

1. Create a new tag 
2. Choose Custom HTML as a tag type 
3. Integrate into the “HTML” field the hit product. Do not forget to pass you real variables to replace the values we passed as examples in the documentation. You may have those variables already configured in your GTM, which would make the process quick to proceed with
4. Choose the “triggering” rule to define in which context the script will be called from GTM. We advise firing it on all pages where a user can proceed with an “add to cart” action. 
5. After that, you just need to proceed with your validation process by submitting these new changes in GTM  

In context example 

Here you will find complete codes example that properly respects three essentials to fire the hit product events:

1. Incorporate the hit product JS script, to fill in the right data/variables of your website context
2. Securely wait for the tag to be executed by using a native function that the AB Tasty generic tag will interpret
3. Wait for your add-to-cart event to fire the hit product in the right context

const sendProductHit = (cartContent) => {
const hitToSend = {
pit: "CART_ITEM", // Or “VIEW” if you are integrating the content interest
pcid: cartContent.id,// This is an example. You need to replace this variable with the right one corresponding to the cart ID on your website context. Not useful for content interest
pq: cartContent.quantity, // This is an example. You need to replace this variable with the right one corresponding to the number of products on your website context. Not useful for content interest
pp: cartContent.price, // This is an example. You need to replace this variable with the right one corresponding to the product price on your website context. For both abandoned cart and content interest.
ps: cartContent.sku, // This is an example. You need to replace this variable with the right one corresponding to the product SKU on your website context. For both abandoned cart and content interest.
pn: cartContent.name // This is an example. You need to replace this variable with the right one corresponding to the product name on your website context. For both abandoned cart and content interest.
};
window.ABTasty.send('PRODUCT', hitToSend);
}
const getCartContent = () => {
const cardContent = window.dataLayer[0].cardContent; // This is an example using a datalayer event to listen to for the “add to cart” event. You need to replace this variables with the right one corresponding to the cart content object on your website context
return cardContent;
}
const waitForABTasty = () => { // This is a security to make sure we wait for ABTasty to load before firing the event. No need to keep it. If you keep, no changes expected for this function
if (
// Waiting for AB Tasty to be ready to track hits
typeof window.ABTasty !== 'undefined' &&
typeof window.ABTasty.eventState !== 'undefined' &&
!!window.ABTasty.eventState['tagContentExecuted'] &&
window.ABTasty.eventState['tagContentExecuted'].status === 'complete'
) {
sendProductHit(cartContent(getCartContent()));
} else {
window.addEventListener('abtasty_tagContentExecuted', sendProductHit(getCartContent()));
}
}
window.addEventListener('add_to_cart', waitForABTasty); // The “add to cart” is an example, you can replace it with the real add to cart event of your website context 

Good to know 💡

AB Tasty gives its customers some solutions to help them with this kind of integration. Please contact your CSM or your main AB Tasty interlocutor, they will be happy to help you with this. We have a dedicated technical team that can help you with this integration, to go further and accompany you until it’s up and running on your website!.

How to check the integration

To verify the integration, you can look into the payload of the "ariane.abtasty.com" request through the network tool:

You will find all the data in a specific index. 

Please refer to our technical information: https://developers.abtasty.com/docs/data/universal-collect/uc-hits#product