HTML and CSS Reference
In-Depth Information
Timely and relevant ads go a long way; for example, if you're from Chicago and notice an ad giving you
information about products and directions in London, England, that would be pretty wasteful and useless to both
the advertiser and, more importantly you, the end user. Advertisers spend millions and millions of dollars a year
targeting audiences by a various number of inputs. Using location as an input into the creative, advertisers are able to
deliver specific and dynamic information to a user, which effectively is intended to create a much more personalized
interaction with potential consumers. Brands and advertisers love this relationship because it creates repeat
customers and because users end up trusting the brand.
OK, enough about the strategy. Let's take a look at an example of geolocation where you supply a specific
location based on the user's location and leverage the WatchPosition API to navigate the user to the store with the
offer (see Listing 11-12).
Listing 11-12.
Geolocation Ad Example
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<header>
<h1>Find The Product!</h1>
<div id="coords"></div>
</header>
<script>
var MAGIC_LOCATION = "40.068134,-75.318797"//Don't be creepy
var location = document.getElementById('coords');
var watch;
function success(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
location.innerHTML = "<p><strong>lat: </strong>" + lat + " <br><strong>long:
</strong>" + long + "";
//start watching the users location
watch = navigator.geolocation.watchPosition(updatePosition, error);
}
function error(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("user did not share geolocation data");
break;
case error.POSITION_UNAVAILABLE:
alert("could not detect current position");
break;
case error.TIMEOUT:
alert("retrieving position timed out");
break;
default:
