Nous recommandons l’intégration de notre solution via un Tag Manager, comme Google Tag Manager par exemple.
Pour effectuer l'intégration du player & du tracking, vous devez :
1. Créer une balise
Créer une balise : <HTML CUSTOM SCRIPT> pour la page produit, et une balise <HTML CUSTOM SCRIPT> pour votre "Thank You Page" (Order Success Page).
Exemple pour la page produit :
Exemple pour la page de confirmation de commande :
2. Insérer les scripts développés en JavaScript
Insérez les scripts développés en JavaScript en respectant la compatibilité ECMA SCRIPT 2016 afin que votre script soit correctement compilé par GTM.
(ECMA DOC : https://www.w3schools.com/js/js_2016.asp )
Voici la structure à respecter pour l'intégration de vos scripts :
Structure approprié à la Product Page :
<script src="https://sdk.teester.com/loader.js" async defer></script>
<script>
window.onTeesterReady = (window.onTeesterReady || []);
window.onTeesterReady.push(function(SDK) {
var player = SDK.init({
type: 'player',
args: {
key: 'SKEEPERS_PLAYER_KEY',
product: 'PRODUCT_REFERENCE'
}
}, document.querySelector('#player'));
var trackProduct = SDK.init({
type: 'tracking',
args: {
key: 'SKEEPERS_TRACKING_KEY',
product: 'PRODUCT_REFERENCE',
event: 'PRODUCT_PAGE_VIEW'
}
});
});
</script>
Structure approprié à la Product Page (plusieurs vidéos) :
<div class="page-width playerUGV"></div>
<script src="https://sdk.teester.com/loader.js" async defer></script>
<script>
window.onTeesterReady = window.onTeesterReady || [];
window.onTeesterReady.push(function (SDK) {
var playerKey = SKEEPERS_PLAYER_KEY;
var productSku = PRODUCT_REFERENCE;
SDK.checkVideoAvailability(playerKey, productSku, function (value) {
if (value) {
// Check Product Page
var divMain = document.createElement("div");
divMain.style.width = "100%";
divMain.style.position = "relative";
divMain.style.marginBottom = "6rem";
divMain.setAttribute("class", "divTeester");
var divTitle = document.createElement("h2");
// Set the class and style attributes
divTitle.className = "related-products__heading inline-richtext h2";
divTitle.innerHTML = "Consumer Videos";
// Get the parent element with class "divTeester"
divMain.appendChild(divTitle);
var divPlayer = document.createElement("div");
divPlayer.setAttribute("id", "playerTeester");
divTitle.appendChild(divPlayer);
var divDealt = document.querySelector(".playerUGV");
if (divDealt) {
divMain.style.marginTop = "6rem";
divDealt.prepend(divMain);
}
SDK.getVideos(playerKey, productSku).then(videos => {
for (let i = 0; i < videos.length; i++) {
var divPlayer2 = document.createElement("div");
divPlayer2.classList.add("video-container"); // Add this class for styling
SDK.init(
{
type: "player",
args: {
key: playerKey,
id: videos[i].id,
width: "100%",
height: "inherit",
},
},
divPlayer2
);
divPlayer.append(divPlayer2);
}
}).catch(error => {
console.error('Error fetching videos:', error);
});
}
});
var trackProduct = SDK.init({
type: 'tracking',
args: {
key: 'SKEEPERS_TRACKING_KEY',
product: 'PRODUCT_REFERENCE',
event: 'PRODUCT_PAGE_VIEW'
}
});
});
</script>
<style>
.skeepers_product__reviews {
margin-top: 100px;
}
#playerTeester {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 30px;
width: 100%;
}
.video-container {
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 16/9;
position: relative;
background-color: transparent;
}
@media (max-width: 768px) {
#playerTeester {
grid-template-columns: 1fr;
}
}
</style>
Structure approprié à la Page de Confirmation de Commande :
<script src="https://sdk.teester.com/loader.js" async defer></script>
<script>
window.onTeesterReady = (window.onTeesterReady || []);
window.onTeesterReady.push(function(SDK) {
var trackProduct = SDK.init({
type: 'tracking',
args: {
key: 'SKEEPERS_TRACKING_KEY',
product: 'PRODUCT_REFERENCE',
event: 'PRODUCT_SALE'
}
});
});
</script>
Key : il s'agit de votre clé SKEEPERS_TRACKING_KEY fournie par Skeepers ou bien il est possible de le retrouver dans le back-office en cliquant sur l'onglet "Documentation technique" dans le menu latéral gauche
Product : La référence du produit utilisée dans vos données commerciales, vous pouvez en définir plusieurs si vous utilisez une virgule ou un point-virgule pour délimiter les valeurs
Event : Le nom de l'événement : PRODUCT_PAGE_VIEW, PRODUCT_SALE, PRODUCT_SALE_INTENT ou SUBSCRIPTION_SALE
3. Associez votre balise à des déclencheurs
L'association de votre balise à des déclencheurs, aussi appelée Tracking, vous permet de collecter des informations sur les ventes et les conversions. Grâce à ces informations, Skeepers pourra générer des rapports sur votre taux de conversion et vous indiquer l'impact des vidéos sur votre activité.
Pour la Product Page, associez votre balise au déclencheur redirigeant vers l'affichage de votre page produit. Cela peut être un PATH URL si vos pages produits respectent la même structure d’url sur votre site (Exemple : www.monsite.com/product/), ou tout autre trigger de déclenchement associé à l’affichage de votre page produit (PAGE_VIEW).
- Insérez votre tracking dans votre product page en respectant la structure présenté ci-dessus avec l’event «PRODUCT_PAGE_VIEW».
- Répétez la même opération sur votre page de confirmation de commande. (www.monsite.com/ordersuccess) en insérant le tracking avec l’event «PRODUCT_SALE».
- Pour l'intention d'achat comme l'ajout au panier, répétez la même opération et ajoutez l'event «PRODUCT_SALE_INTENT».
Exemple de déclencheur pour la product page :
Exemple de déclencheur pour la page de confirmation de commande :
Lorsque vos scripts sont intégrés et que l'enregistrement est effectué, vous pouvez prévisualiser vos intégrations avant la mise en production en utilisant l'outil "Prévisualiser" de votre GTM.