Landing page Integration & Tracking
You will need to design an email template with a play button image. It will link to a landing page containing the video for that client.
The link in the video should have the client’s unique identifier (the same one that was provided in the datafeed). It can also have other information such as the client’s name, G-A tracking code.
Once the link is clicked, the landing page will load and display the client’s unique video by using the unique identifier (client ID or email address from the link URL).
Below are examples of email templates:
The landing page integration will work as follows:
We will be using one of our landing pages as an example of the integration and implementation of the landing page code.
- Base URL of the landing page
- The unique ID (SKU) – (Mandatory)
- Client’s name
Here is how this example’s link will display:
https://treepodia.com/hny/2021/treepodia/?s=matan@treepodia&n=%D7%9E%D7%AA%D7%9FThe landing page code should use “GET” to grab the video unique identifier from the URL, in this case it will be the user ID that was provided in the client’s feed XML.
The code grabs the ID from the URL (“SKU”) and it will be used to call the unique video from our system. If the video for the provided SKU is not available, we assign a default SKU value (“general”) in order to display a default video (optional).
The below code is an example of possible implementation using JS.
Please note that you need to replace the placeholder {UUID} with your actual UUID value.
It is recommended that you add an HTML button under the video player that will have the same functionality as the overlay call to action in the videos. This is recommended so that mobile device users will be able to click the buttons, as most mobile devices don’t support Flash and display videos using their native video player. For example, if the call to action in the videos is a dynamic link to a related product page on the site, the button should have the same URL as the one used in the video. This can done by using the modified version of the code below (scroll down for a detailed explanation).
Vanilla Landing Page Integration
<script type="text/javascript">
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));}
</script>
<script type="text/javascript">
var videoSku = "general";
videoSku = getParameterByName('sku');
var fName = getParameterByName('fName');
var email = getParameterByName('first_name');
</script>
<div class="crmVideoTop">
<h3 id=title1 class="crmVideo" style="text-align:center"></h3>
<div id="video-player-location" class="crmVideo" style="text-align:center"></div>
</div>
<script type="text/javascript">
var product;
function initTreepodia ()
{
product = Treepodia.getProduct('{UUID} ',videoSku);
product.requestVideo(handleVideo);
}
</script>
<script type="text/javascript">
function handleVideo(video)
{
if (!video.hasVideos())
{
videoSku = "general";
product = Treepodia.getProduct('{UUID}',videoSku);
product.requestVideo(handleVideo);
}
video.setPlayer("BlackGreen");
video.setChromeless(true);
video.setAutoplay(true);
video.setWidth(720);
video.setHeight(407);
video.show('video-player-location');
}
</script>
<script type="text/javascript">
document.write(unescape("%3Cscript src='" + document.location.protocol + "//dxa05szpct2ws.cloudfront.net/TreepodiaAsyncLoader.js' type='text/javascript'%3E%3C/script%3E"));
</script> Modified Landing Page Integration (with dynamic URL’s support for buttons).
In order to get the dynamic URL for a button, we defile a global JS variable named “externalData”, it will later contain the URL we want to use.var externalData = "";
In the handleVideo function we use the getExternalData() function on the video object, this function will return the URL as a String.externalData = video.getExternalData();
Now that we have the URL stored in the “externalData” variable we can insert the URL and the Google tracking code to the HTML button “href” attribute after the page is loaded. Please note that you need to replace the {classNameHERE} place holder below:try {document.getElementsByClassName('{classNameHERE}')[0].href = externalData + "?utm_source=treepodia&utm_medium=Treepodia_Video&utm_campaign=Video_overlay";} catch(err) {};
<script type="text/javascript">
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));}
</script>
<script type="text/javascript">
var videoSku = "general";
videoSku = getParameterByName('sku');
var fName = getParameterByName('fName');
var email = getParameterByName('first_name');
</script>
<div class="crmVideoTop">
<h3 id=title1 class="crmVideo" style="text-align:center"></h3>
<div id="video-player-location" class="crmVideo" style="text-align:center"></div>
</div>
<script type="text/javascript">
var product;
function initTreepodia ()
{
product = Treepodia.getProduct('{UUID} ',videoSku);
product.requestVideo(handleVideo);
}
</script>
<script type="text/javascript">
var externalData = "";
function handleVideo(video)
{
if (!video.hasVideos())
{
videoSku = "general";
product = Treepodia.getProduct('{UUID}',videoSku);
product.requestVideo(handleVideo);
}
externalData = video.getExternalData();
try {document.getElementsByClassName('blue-btn left')[0].href = externalData + "?utm_source=treepodia&utm_medium=Treepodia_Video&utm_campaign=Video_overlay";} catch(err) {};
video.setPlayer("BlackGreen");
video.setChromeless(true);
video.setAutoplay(true);
video.setWidth(720);
video.setHeight(407);
video.show('video-player-location');
}
</script>
<script type="text/javascript">
document.write(unescape("%3Cscript src='" + document.location.protocol + "//dxa05szpct2ws.cloudfront.net/TreepodiaAsyncLoader.js' type='text/javascript'%3E%3C/script%3E"));
</script>