We recommend integrating our solution via a Tag Manager, such as Google Tag Manager for example.
To integrate the player & tracking, you need to:
1. Create a tag
Create a tag: <HTML CUSTOM SCRIPT> for the product page, and a tag <HTML CUSTOM SCRIPT> for your "Thank You Page" (Order Success Page).
Example for the product page:
Example for the order confirmation page:
2. Insert the scripts developed in JavaScript
Insert the scripts developed in JavaScript ensuring ECMA SCRIPT 2016 compatibility so that your script is correctly compiled by GTM.
(ECMA DOC: https://www.w3schools.com/js/js_2016.asp )
Here is the structure to follow for integrating your scripts:
Appropriate structure for the 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>
Appropriate structure for the Product Page (multiple videos):
<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>
Appropriate structure for the Order Confirmation Page:
<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: This is your SKEEPERS_TRACKING_KEY provided by Skeepers or it can be found in the back office by clicking on the "Technical Documentation" tab in the left sidebar menu.
Product: The product reference used in your commercial data, you can define multiple if you use a comma or semicolon to delimit the values.
Event: The name of the event: PRODUCT_PAGE_VIEW, PRODUCT_SALE, PRODUCT_SALE_INTENT, or SUBSCRIPTION_SALE.
3. Associate your tag with triggers
Associating your tag with triggers, also called Tracking, allows you to collect information on sales and conversions. With this information, Skeepers can generate reports on your conversion rate and indicate the impact of videos on your activity.
For the Product Page, associate your tag with the trigger redirecting to the display of your product page. This can be a PATH URL if your product pages follow the same URL structure on your site (Example: www.mysite.com/product/), or any other trigger associated with the display of your product page (PAGE_VIEW).
- Insert your tracking in your product page following the structure presented above with the event "PRODUCT_PAGE_VIEW."
- Repeat the same operation on your order confirmation page. (www.mysite.com/ordersuccess) by inserting the tracking with the event "PRODUCT_SALE."
- For purchase intention such as adding to cart, repeat the same operation and add the event "PRODUCT_SALE_INTENT."
Example of a trigger for the product page:
Example of a trigger for the order confirmation page:
When your scripts are integrated and saved, you can preview your integrations before production using the "Preview" tool in your GTM.