Opentracker Homepage
All

Code samples

Using PHP to retrieve and show a single value via json

<?php
// setup variables
$admin = 	"login=demo@opentracker.net";
$pwd = 		"password=demo123";
$site = 	"site=www.opentracker.net";
$period = 	"period=4w";

// get the data from the api
$json = file_get_contents("http://api.opentracker.net/api/trends/trends_summary.jsp?$admin&$pwd&$site&$period");  

// transform to object
$obj = json_decode($json, true);
?>
Then you can echo a specific value 
<?php echo $obj["resultsList"][1]["selected period"] ?>
see a working example here

Using PHP to render an api table 

<?php

// setup variables
$admin = 	"login=demo@opentracker.net";
$pwd = 		"password=demo123";
$site = 	"site=www.opentracker.net";
$period = 	"period=4w";
$format =   "dataType=html";

// get the data from the api
$html = file_get_contents("https://api.opentracker.net/api/trends/trends.jsp?$admin&$pwd&$site&$period&$format");  
?>
Next you can echo the entire table. 
<?php echo $html; ?>
Add some nice table styles 
<style type="text/css">
#sqlresultTrends {
	border: 1px solid #DFDFDF;
	background-color: #F9F9F9;
	width: 100%;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-family: Arial,"Bitstream Vera Sans",Helvetica,Verdana,sans-serif;
	color: #333;
}
#sqlresultTrends td, #sqlresultTrends th {
	border-top-color: white;
	border-bottom: 1px solid #DFDFDF;
	color: #555;
}
#sqlresultTrends th {
	text-shadow: rgba(255, 255, 255, 0.796875) 0px 1px 0px;
	font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif;
	font-weight: normal;
	padding: 7px 7px 8px;
	text-align: left;
	line-height: 1.3em;
	font-size: 14px;
}
#sqlresultTrends td {
	font-size: 12px;
	padding: 4px 7px 2px;
	vertical-align: top;
}
</style>
You can see a working example here

Using JavaScript API Tracking Demo Page for Custom Events

On this example page, we demonstrate how you can send a custom event with javascript and how you can use counting with segmentation. Below is a snippet of javascript to send the event to Opentracker. 
// function to send the data
function countCheckout(type) {

    // create a new Opentracker map, needed to hold the data
    var map = new OTMap();

    // add the data to the map  
    map.put("item",  $(type).attr("item"));
    
    // segment based on brand by appending ! sign
    map.put("brand!", $(type).attr("brand"));
    map.put("price", $(type).attr("price"));
    map.put("item-type", $(type).attr("item-type"));

    // send the data with:
    // ti/ title: "Checkout complete: " + map.get("item") shows up in clickstream
    // data: map 
    // update cookie: false to not update cookie values
    OTLogService.sendEvent("Checkout complete: " + map.get("item"), map, false);

    // log it to window
    $("<div/>").text("Checkout complete: " + map.get("item")).appendTo("#log");

    setTimeout("document.getElementById('apiframe1').src = document.getElementById('apiframe1').src", 5000);
    setTimeout("document.getElementById('apiframe2').src = document.getElementById('apiframe2').src", 5000);
    setTimeout("document.getElementById('apiframe3').src = document.getElementById('apiframe3').src", 5000);
}
You can see a working example here and view the source using browser.

Using JavaScript API Tracking Demo Page for Custom Events

You can send a custom event with javascript and how you can use counting. Below is a snippet of javascript to send the event to Opentracker. 
function countGender(genderValue) {

    // create a new Opentracker map, needed to hold the data
    var map = new OTMap();

    // add the data to the map  
    map.put("gender", genderValue);

    // send the data with:
    // ti/ title: "Counting gender: " + genderValue
    // data: map 
    // update cookie: false to not update cookie values
    OTLogService.sendEvent("Counting gender: " + genderValue, map, false);

    // log it to window
    $("<div/>").text("Counting gender: " + genderValue).appendTo("#log");

    setTimeout("document.getElementById('apidata').src = document.getElementById('apidata').src", 2000);
}

    setTimeout("document.getElementById('apiframe1').src = document.getElementById('apiframe1').src", 5000);
    setTimeout("document.getElementById('apiframe2').src = document.getElementById('apiframe2').src", 5000);
    setTimeout("document.getElementById('apiframe3').src = document.getElementById('apiframe3').src", 5000);
}
To see a working example, click here and view the source using browser.

We would love to hear your feedback. Please use the facebook comment box below