Product hits integration

Why specific hits?

 

For different purposes that we will dig into in this 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. 

A lot of our customers already have a precise segmentation strategy. They have implemented and operated it with other vendors (Tealium, Segment, Mixpanel, etc.) or through their analytics environments such as Google Analytics, or an onsite data layer. Having developed those data ecosystems is a great move and helps all types of customers to rocket their experimentation and personalization strategies. You can connect all those tools to AB Tasty through our available integrations and leverage this gold mine on our platform. 

But for those who do not have those tools, AB Tasty provides solutions. We identified key use cases where we wanted to bring value to our customers. 

We built two in-house targeting criteria to help our customers to go further in their experimentation and personalization strategy:

  • Cart abandonment: these criteria help our user to target their “abandonist” visitors 
  • Content interest: this criteria help identify and target visitors based on their specific interests detected on your website. It can either work through the page title (which it does natively) or through product hits that you can send us if you find it more accurate. The hit product integration will also allow AB Tasty to display some conversion data on content interest audiences.

To make those solutions work, we just need some data that our generic tag can not properly detect, read, and interpret. To answer that limitation, we developed a specific JS function, that we call “hit”, for you to send us the right data in the right context, which we will leverage in the ABT platform to offer you new services (inside the targeting for example). 

To send those product data to AB Tasty, you need to add a Javascript script on every product page, while your visitors are doing two types of events: viewing a product (i.e: loading any product page), and adding a product to their cart.

 

What to implement for the abandoned cart

 

We are going to see together how the hit JS event is built, with a quick overview of its key components.

window.abtasty.send("product", {
pit: "CART_ITEM",
pcid: yourCartIDVariable,
pq: yourProductQuantityVariable,
pp: yourProductPriceVariable,
ps: yourProductSKUVariable,
pn: yourProductNameVariable
});

The event uses the ‘window.abtasty.send’ function to call the global ‘abtasty’ object integrated into your website through the generic tag. This is how the collection will work. The script will pass some specific product data to our generic tag to be sent to our data pipeline. From this collection, we can build up services for you to leverage those data.

Inside the script, you will find a list of parameters that you will need to fill in to send us the appropriate data depending on your visitor's context. Some parameters are mandatory for some specific kind of hits, defined by the first parameter, the product interaction type (first line of the following table). Apart from that, to succeed in your implementation, you just need to respect the value type of each parameter and link the right data on your side to the right parameters. Let’s deep dive into each parameter:

 

Parameter

Value 

Definition

Mandatory

Example

‘pit’ (product interaction type)

Two values are possible:

  • ‘CART_ITEM’: when a new item is added to your visitor card
  • ‘CART_TOTAL’: when you want to declare an entire cart being initiated

Coincides with the type of action we want to track. 

Yes

pit:“CART_ITEM”;

‘pcid’ (product cart id)

String value. You can insert here the ID of the cart you are collecting

Coincides with the ID of the cart initiated by your visitor.

Yes

pcid: “CARTPROD0001”;

‘Pq’ (product quantity)

Integer value. This parameter accepts only numbers

Coincides with the number of products inside the visitor cart 

Yes

pq: “5”;

‘pp’ (product price)

Float value. This parameter accepts any numbers

Coincides with:

  • The product price for the ‘CART_ITEM’ scenario
  • The total cart amount for the ‘CART_TOTAL’ scenario

Yes

pp: “15.99”;

‘ps’ (product SKU)

String value.

Coincides with the ID of the product concerned with the page view or product put into the cart

Yes

ps: “ECOMPROD0001” 

‘pn’ (product name)

String value

Coincides with the name of the product. It should be an exhaustive reference to the product concerned with the visitor's action 

No

pn: “Super basket 5008” 

 

You can refer to our technical documentation just here.

 

What to implement for the content interest

 

Please refer to our specific documentation about the criteria in themselves to have a wide overview of how the criteria work. 

The hit product is not mandatory to use this segmentation criterion. It works with page titles and the generic tag can analyze and recognize some content interests based on general navigation data. 

But to go further with the analysis of your content interest audiences, we created in our targeting interface a table with both traffic and conversion data. And this is where the hit product integration comes in: to reconcile a specific product with a specific transaction, we need you to send us the right information when a visitor sees a product. With that good setup, you will be able to have precise conversion data for every content interest audience, and base your decisions on those every time you are setting up a campaign!

We are going to see together how the hit JS event is built, with a quick overview of its key components.

window.abtasty.send("product", {
pit: "VIEW",
pp: yourProductPriceVariable,
ps: yourProductSKUVariable,
pn: yourProductNameVariable
});

The event uses the ‘window.abtasty.send’ function to call the global ‘abtasty’ object integrated into your website through the generic tag. This is how the collection will work. The script will pass some specific product data to our generic tag to be sent to our data pipeline. From this collection, we can build up services for you to leverage those data.

Inside the script, you will find a list of parameters that you will need to fill in to send us the appropriate data depending on your visitor's context. Some parameters are mandatory for some specific kind of hits, defined by the first parameter, the product interaction type (first line of the following table). Apart from that, to succeed in your implementation, you just need to respect the value type of each parameter and link the right data on your side to the right parameters. Let’s deep dive into each parameter:

 

Parameter

Value 

Definition

Mandatory

‘pit’ (product interaction type)

‘VIEW’: when a product is being viewed by your visitor. The hit we are about to collect is about a visitor that is viewing a specific product during its navigation.

This is a default value that you won’t have to change. 

Yes

‘pp’ (product price)

Float value. This parameter accepts any numbers

Coincides with the product price the visitor is seeing  

No (but recommended)

‘ps’ (product SKU)

String value.

Coincides with the ID of the product being viewed

Yes

‘pn’ (product name)

String value

Coincides with the name of the product. It should be an exhaustive reference to the product concerned with the visitor's action 

No (but recommended)

 

You can refer to our technical documentation just here.

 

How to proceed with the integration? 

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

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

 

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's global Javascript menu. 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. 

You can go visit the account JavaScript AB Tasty page. To access it, you click on the platform top right profile icon, and select “Account Management”. Once you are in that section, you can click on “Account JavaScript” to access the right page.  

The basic “hit” integration should look like this:

Capture_d_e_cran_2022-08-23_a__14.08.20.png

From your GTM account 

Capture_d_e_cran_2022-08-23_a__14.18.38.png

If you use a tag manager like GTM, 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:

  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 

 

Troubles implementing it?

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 proceed with the QA and hit product integration verification

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

Capture_d_e_cran_2022-10-06_a__16.13.42.png

 

You will find all the data in a specific index. 

 

Resources 

Product hits: https://developers.abtasty.com/docs/data/uc-hits#product

Was this article helpful?

/