🎯

Potions Analytics Tag enables you to code your own recommendation banners relying on Potions Experience API and send automagically events to your analytics based on HTML attributes.

Setup

To start seeing analytics events flowing with Potions Analytics Tag and be able to monitor your experiences performances in the upcoming days :

Add this javascript snippet to your pages if you use GA4 with GTM (contact us for other tools) :

javascript
<script 
async="" 
type="text/javascript" 
src="https://client.get-potions.com/ga4/tagmanager/analytics.js" 
crossorigin="anonymous">
</script>

Enrich the HTML of your recommendation banners or your organized list with data attributes as explained below

Setup your Tag Manager to send Potions events

Example of enriched HTML

With the right configuration of your HTML, Potions Analytics Tag will send events automatically just by detecting attributes in your HTML

The following enriched HTML

html
<div
	data-potions-debug="true"
	data-potions-experience-id="082ecd63-84ec-4f48-90ce-12271d456020" 
>
	<div 
		data-potions-click="go_to_page"
		data-item-id="X23" 
	>
		...
		<button data-potions-click="add_to_cart_item"></button>
	</div>
	<div 
		data-potions-click="go_to_page"
		data-item-id="Y47" 
	>
		...
		<button data-potions-click="add_to_cart_item"></button>
	</div>
</div>

Will send events

When the data-potions-experience-id="082ecd63-84ec-4f48-90ce-12271d456020" element appears in the DOM

javascript
window.dataLayer.push([
    "event",
    "potions",
    { 
			action_id: "show",
			experience_id: "082ecd63-84ec-4f48-90ce-12271d456020",
			item_ids: "[\"X23\",\"Y47\"]",
			debug_mode: true // because data-potions-debug is set to true
    }
  ]);

When the buttondata-potions-click=add_to_cart_item is clicked

javascript
window.dataLayer.push([
    "event",
    "potions",
    { 
			action_id: "add_to_cart_item",
			experience_id: "082ecd63-84ec-4f48-90ce-12271d456020",
			item_id: "X23",
			item_ids: "[\"X23\",\"Y47\"]",
			debug_mode: true // because data-potions-debug is set to true
    }
  ]);

When the divdata-potions-click=go_to_page is clicked

javascript
window.dataLayer.push([
    "event",
    "potions",
    { 
			action_id: "go_to_page",
			experience_id: "082ecd63-84ec-4f48-90ce-12271d456020",
			item_id: "X23",
			item_ids: "[\"X23\",\"Y47\"]",
			debug_mode: true // because data-potions-debug is set to true
    }
  ]);

How it works

Potions Tag

captures the events of:

the appearance of any element with a

data-potions-experience-id=[EXPERIENCE_ID] attribute

where EXPERIENCE_ID is the id you can find in the top right corner of your experience configure tab

the click of any element with a

data-potions-click=[ACTION_ID] attribute

where ACTION_ID is one of the following actions

Potions Analytic Events Actions

go_to_page

when a product is clicked

add_to_cart_item

when a product is added to cart in a recommendation banner or an organized product list

add_to_cart_items

when multiple products are added to cart

when an experience is closed

convert_XXX

when a conversion button is clicked (XXX can be anything)

enriches the event with all the data contained in the attributes of the element’s surrounding :

experience_id : from the first data-potions-experience-id value detected in a parent element
item_id : from the first data-item-id value detected in a parent element
item_ids : from all the data-item-id in the children of the first parent element that has an experience-id
debug_mode : if data-potions-debug-mode attribute is set to true

pushes it to the dataLayer

Setting up Tag Manager to send Potions events

🏷️Setting up GTM Analytics Tag to send Potions Events

Setting up monitoring with Potions Analytics Tag

Setup

Example of enriched HTML

How it works

Setting up Tag Manager to send Potions events