This example demonstrates the evidence->setFromWebRequest() method and client side JavaScript overrides by creating a web server, serving JavaScript created by the device detection engine This JavaScript is then used on the client side to get a more accurate reading for properties by fetching the json response using the overrides as evidence.This example is available in full on GitHub.
This example uses the 'HardwareName', 'HardwareVendor' and 'ScreenPixelsWidth' properties, which are pre-populated when creating a key using the link above.
<?php
require(__DIR__ . "/../../vendor/autoload.php");
if (isset($_ENV["RESOURCEKEY"])) {
$resourceKey = $_ENV["RESOURCEKEY"];
} else {
$resourceKey = "!!YOUR_RESOURCE_KEY!!";
}
if (substr($resourceKey, 0, 2) === "!!") {
echo "You need to create a resource key at " .
"https://configure.51degrees.com/czdCZr9S and paste it into " .
"the code, replacing !!YOUR_RESOURCE_KEY!!.";
echo "\n<br/>";
echo "Make sure to include the HardwareName, HardwareVendor and " .
"ScreenPixelsWidth properties as they are used by this example.\n<br />";
return;
}
$javascriptBuilderSettings = array(
"endpoint" => "/?json"
);
$builder = new DeviceDetectionPipelineBuilder(array(
"resourceKey" => $resourceKey,
"javascriptBuilderSettings" => $javascriptBuilderSettings
));
$serializedPipelineFile = __DIR__ . "web_integration_pipeline.pipeline";
if(!file_exists($serializedPipelineFile)){
$pipeline = $builder->build();
file_put_contents($serializedPipelineFile, serialize($pipeline));
} else {
$pipeline = unserialize(file_get_contents($serializedPipelineFile));
}
$flowData = $pipeline->createFlowData();
$flowData->evidence->setFromWebRequest();
$result = $flowData->process();
if (isset($_GET["json"])) {
header('Content-Type: application/json');
echo json_encode($flowData->jsonbundler->json);
return;
}
$properties = $pipeline->getElement("device")->getProperties();
if (!isset($properties["hardwarename"]) || !isset($properties["hardwarevendor"]) || !isset($properties["screenpixelswidth"])) {
echo "Make sure to include the HardwareName, HardwareVendor and " .
"ScreenPixelsWidth properties as they are used by this example.\n<br />";
return;
}
echo "<p>The following values are determined by sever-side device detection on the first request:</p>";
echo "<dl>";
echo "<dt>";
echo "Hardware name";
echo "</dt>";
echo "<dd>";
if ($result->device->hardwarename->hasValue) {
echo implode(",", $result->device->hardwarename->value);
} else {
echo $result->device->hardwarename->noValueMessage;
}
echo "</dd>";
echo "<dt>";
echo "Hardware vendor";
echo "</dt>";
echo "<dd>";
if ($result->device->hardwarevendor->hasValue) {
echo $result->device->hardwarevendor->value;
} else {
echo $result->device->hardwarevendor->noValueMessage;
}
echo "</dd>";
echo "<dt>";
echo "Screenpixelswidth";
echo "</dt>";
echo "<dd>";
if ($result->device->screenpixelswidth->hasValue) {
echo $result->device->screenpixelswidth->value;
} else {
echo $result->device->screenpixelswidth->noValueMessage;
}
echo "</dd>";
echo "</dl>";
echo "
<p>The information shown below is determined from JavaScript running on the client-side that is able to obtain additional evidence.<br />If no additional information appears then it may indicate an external problem such as JavaScript being disabled in your browser.<br />
<p>Note that the 'Hardware Name' field is intended to illustrate detection of Apple device models as this cannot be determined server-side. This can be tested to some extent using most emulators such as those in the 'developer tools' menu in Google Chrome. However, using real devices will result in more precise model numbers.</p>";
echo "<dl>";
echo "<dt>";
echo "Hardware name";
echo "</dt>";
echo "<dd id='hardwarenameclient'>";
echo "</dd>";
echo "<dt>";
echo "Hardware vendor";
echo "</dt>";
echo "<dd id='hardwarevendorclient'>";
echo "<dd>";
echo "<dt>";
echo "Screenpixelswidth";
echo "</dt>";
echo "<dd id='screenpixelswidthclient'>";
echo "<dd>";
echo "<script>" . $flowData->javascriptbuilder->javascript . "</script>";
?>
<!--
Now we add some additional JavaScript
that will update the client side properties above if values exist for them
in the JSON endpoint provided data
-->
<script>
window.onload = function(){
fod.complete(function (data) {
document.getElementById('hardwarenameclient').innerHTML = data.device["hardwarename"];
document.getElementById('hardwarevendorclient').innerHTML = data.device.hardwarevendor
document.getElementById('screenpixelswidthclient').innerHTML = data.device.screenpixelswidth
});
}
</script>