Introduction
The SightMap® Metrics API provides third-party developers a consistent API for gathering metric data from a SightMap® IFrame which can be tightly integrated into Google Analytics or similar platforms. This functions on a similar platform to the SightMap® JavaScript API.
The web page must listen for the desired events and send these to the analytics platform of your choosing. This should be configured by a web developer familiar with JavaScript. The data does not automatically populate; one must send these events to the datalayer and configure the analytics platform to receive them.
Quick Start
A working example integrating the API with an example SightMap instance is below. You may insert following usage examples within this HTML document in order to explore the API.
Setting the origin value
Set the
originquery parameter to the origin serving the document. The example useshttp://localhost:3000, however please update the value accordingly.If you need to start a local server, the following gist provides instructions for doing so quickly on either Mac or PC: https://gist.github.com/jgravois/5e73b56fa7756fd00b89.
For security reasons, the example must be served from an origin and will not function correctly when directly opened in a Browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SightMap JavaScript IFrame API Example</title>
<style type="text/css">
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!-- The API script must be included on the page -->
<script src="https://sightmap.com/embed/api.js"></script>
<!--
Include the IFrame embed code. The embed URL must include `enable_api=1` and
provide the pages origin, the example uses `http://localhost:3000`, however
update this accordingly. Additionally, the iframe must declare an id
attribute, in this case it is set to `sightmap`.
-->
<iframe id="sightmap" src="https://sightmap.com/embed/dgow3krqp2m?enable_api=1&origin=http://localhost:3000" frameborder="0" width="100%" height="100%"></iframe>
<script type="text/javascript">
// Create a new embed instance, providing the IFrame id value:
var embed = new SightMap.Embed('sightmap');
embed.on('ready', function () {
// Usage example code goes here...
});
</script>
</body>
</html>
Usage Requirements
In order to use the SightMap JavaScript IFrame API, the page must include the following script tag prior to the embed code.
<!-- The API script must be included on the page -->
<script src="https://sightmap.com/embed/api.js"></script>
The embed url must also pass parameters to enable the API and specify the web page origin. An id must also be declared, to be referenced when initializing the Embed object.
<iframe id="sightmap" src="https://sightmap.com/embed/dgow3krqp2m?enable_api=1&origin=http://localhost:3000" frameborder="0" width="100%" height="100%"></iframe>
metrics.unitMatches.impression
Fired when the SightMap application is first rendered.
{
name: "metrics.unitMatches.impression",
data: {
units: [
{
id: "374030",
mapId: "374030",
unitNumber: "2-101",
area: 1887,
areaDisplay: "1,877 Sq. Ft.",
price: 2315, // nullable
priceDisplay: "$2,315", // nullable
availableOn: "2018-09-14", // nullable
availableOnDisplay: "Available Now", // nullable
floor: {
id: "7961",
filterLabel: "Floor 1",
filterShortLabel: "1"
},
floorPlan: {
id: "25575",
name: "A2",
bedroomCount: 1,
bathroomCount: 1
}
},
{
id: "374030",
mapId: "374030",
unitNumber: "2-101",
area: 1887,
areaDisplay: "1,877 Sq. Ft.",
price: 2315, // nullable
priceDisplay: "$2,315", // nullable
availableOn: "2018-09-14", // nullable
availableOnDisplay: "Available Now", // nullable
floor: {
id: "7961",
filterLabel: "Floor 1",
filterShortLabel: "1"
},
floorPlan: {
id: "25575",
name: "A2",
bedroomCount: 1,
bathroomCount: 1
}
}
]
}
}
embed.on('metrics.unitMatches.impression', function (event) {
console.log(event);
});
metrics.unitMatches.change
Fired when the units in the application change.
{
name: "metrics.unitMatches.change",
data: {
units: [
{
id: "374030",
mapId: "374030",
unitNumber: "2-101",
area: 1887,
areaDisplay: "1,877 Sq. Ft.",
price: 2315, // nullable
priceDisplay: "$2,315", // nullable
availableOn: "2018-09-14", // nullable
availableOnDisplay: "Available Now", // nullable
floor: {
id: "7961",
filterLabel: "Floor 1",
filterShortLabel: "1"
},
floorPlan: {
id: "25575",
name: "A2",
bedroomCount: 1,
bathroomCount: 1
}
},
{
id: "374030",
mapId: "374030",
unitNumber: "2-101",
area: 1887,
areaDisplay: "1,877 Sq. Ft.",
price: 2315, // nullable
priceDisplay: "$2,315", // nullable
availableOn: "2018-09-14", // nullable
availableOnDisplay: "Available Now", // nullable
floor: {
id: "7961",
filterLabel: "Floor 1",
filterShortLabel: "1"
},
floorPlan: {
id: "25575",
name: "A2",
bedroomCount: 1,
bathroomCount: 1
}
}
]
}
}
embed.on('metrics.unitMatches.change', function (event) {
console.log(event);
});
metrics.unitList.impression
Fired when the unit list is first rendered.
{
name: "metrics.unitList.impression",
data: {
units: [
{
id: "374030",
mapId: "374030",
unitNumber: "2-101",
area: 1887,
areaDisplay: "1,877 Sq. Ft.",
price: 2315, // nullable
priceDisplay: "$2,315", // nullable
availableOn: "2018-09-14", // nullable
availableOnDisplay: "Available Now", // nullable
floor: {
id: "7961",
filterLabel: "Floor 1",
filterShortLabel: "1"
},
floorPlan: {
id: "25575",
name: "A2",
bedroomCount: 1,
bathroomCount: 1
}
},
{
id: "374030",
mapId: "374030",
unitNumber: "2-101",
area: 1887,
areaDisplay: "1,877 Sq. Ft.",
price: 2315, // nullable
priceDisplay: "$2,315", // nullable
availableOn: "2018-09-14", // nullable
availableOnDisplay: "Available Now", // nullable
floor: {
id: "7961",
filterLabel: "Floor 1",
filterShortLabel: "1"
},
floorPlan: {
id: "25575",
name: "A2",
bedroomCount: 1,
bathroomCount: 1
}
}
]
}
}
embed.on('metrics.unitList.impression', function (event) {
console.log(event);
});
metrics.unitList.change
Fired when the units in the unit list change.
{
name: "metrics.unitList.change",
data: {
units: [
{
id: "374030",
mapId: "374030",
unitNumber: "2-101",
area: 1887,
areaDisplay: "1,877 Sq. Ft.",
price: 2315, // nullable
priceDisplay: "$2,315", // nullable
availableOn: "2018-09-14", // nullable
availableOnDisplay: "Available Now", // nullable
floor: {
id: "7961",
filterLabel: "Floor 1",
filterShortLabel: "1"
},
floorPlan: {
id: "25575",
name: "A2",
bedroomCount: 1,
bathroomCount: 1
}
},
{
id: "374030",
mapId: "374030",
unitNumber: "2-101",
area: 1887,
areaDisplay: "1,877 Sq. Ft.",
price: 2315, // nullable
priceDisplay: "$2,315", // nullable
availableOn: "2018-09-14", // nullable
availableOnDisplay: "Available Now", // nullable
floor: {
id: "7961",
filterLabel: "Floor 1",
filterShortLabel: "1"
},
floorPlan: {
id: "25575",
name: "A2",
bedroomCount: 1,
bathroomCount: 1
}
}
]
}
}
embed.on('metrics.unitList.change', function (event) {
console.log(event);
});
metrics.filters.impression
Fired when the filters first render.
{
"name": "metrics.filters.impression",
"data": {
"filters": [
{
"label": "Bedrooms",
"name": "Bedrooms",
"listSort": 2,
"previousSelectedOptions": [
{
"label": "Any"
}
],
"selectedOptions": [
{
"label": "Any"
}
]
},
{
"label": "Bathrooms",
"name": "Bathrooms",
"listSort": 3,
"previousSelectedOptions": [
{
"label": "Any"
}
],
"selectedOptions": [
{
"label": "Any"
}
]
},
{
"label": "Floor Plan",
"name": "Floor Plan",
"listSort": 4,
"previousSelectedOptions": [
{
"label": "Any"
}
],
"selectedOptions": [
{
"label": "Any"
}
]
},
{
"label": "Unit Price",
"name": "Unit Price",
"listSort": 5,
"previousSelectedOptions": [
{
"label": "Any"
}
],
"selectedOptions": [
{
"label": "Any"
}
]
},
{
"label": "Move In Date",
"name": "Unit Move In",
"listSort": 6,
"previousSelectedOptions": [
{
"label": "Any"
}
],
"selectedOptions": [
{
"label": "Any"
}
]
},
{
"label": "Unit Area",
"name": "Unit Area",
"listSort": 7,
"previousSelectedOptions": [
{
"label": "Any"
}
],
"selectedOptions": [
{
"label": "Any"
}
]
}
]
}
}
embed.on('metrics.filters.impression', function(event) {
console.log(event);
});
metrics.filters.change
Fired when the selected filter options change.
{
"name": "metrics.filters.change",
"data": {
"filters": [
{
"label": "Bedrooms",
"name": "Bedrooms",
"listSort": 2,
"previousSelectedOptions": [
{
"label": "Studio"
}
],
"selectedOptions": [
{
"label": "Studio"
}
]
},
{
"label": "Bathrooms",
"name": "Bathrooms",
"listSort": 3,
"previousSelectedOptions": [
{
"label": "Any"
}
],
"selectedOptions": [
{
"label": "Any"
}
]
},
{
"label": "Floor Plan",
"name": "Floor Plan",
"listSort": 4,
"previousSelectedOptions": [
{
"label": "Any"
}
],
"selectedOptions": [
{
"label": "1 Bed 1 Bath"
}
]
},
{
"label": "Unit Price",
"name": "Unit Price",
"listSort": 5,
"previousSelectedOptions": [
{
"label": "Any"
}
],
"selectedOptions": [
{
"label": "Any"
}
]
},
{
"label": "Move In Date",
"name": "Unit Move In",
"listSort": 6,
"previousSelectedOptions": [
{
"label": "Any"
}
],
"selectedOptions": [
{
"label": "Any"
}
]
},
{
"label": "Unit Area",
"name": "Unit Area",
"listSort": 7,
"previousSelectedOptions": [
{
"label": "Any"
}
],
"selectedOptions": [
{
"label": "Any"
}
]
}
]
}
}
embed.on('metrics.filters.change', function(event) {
console.log(event);
});
metrics.unitList.unit.click
Fired when a user selects a unit from the unit list.
{
name: "metrics.unitList.unit.click",
data: {
unit: {
id: "374030",
mapId: "374030",
unitNumber: "2-101",
area: 1887,
areaDisplay: "1,877 Sq. Ft.",
price: 2315, // nullable
priceDisplay: "$2,315", // nullable
availableOn: "2018-09-14", // nullable
availableOnDisplay: "Available Now", // nullable
floor: {
id: "7961",
filterLabel: "Floor 1",
filterShortLabel: "1"
},
floorPlan: {
id: "25575",
name: "A2",
bedroomCount: 1,
bathroomCount: 1
}
}
}
}
embed.on('metrics.unitList.unit.click', function (event) {
console.log(event);
});
metrics.unitMap.unit.click
Fired when a user selects a unit from the unit map.
{
name: "metrics.unitMap.unit.click",
data: {
unit: {
id: "374030",
mapId: "374030",
unitNumber: "2-101",
area: 1887,
areaDisplay: "1,877 Sq. Ft.",
price: 2315, // nullable
priceDisplay: "$2,315", // nullable
availableOn: "2018-09-14", // nullable
availableOnDisplay: "Available Now", // nullable
floor: {
id: "7961",
filterLabel: "Floor 1",
filterShortLabel: "1"
},
floorPlan: {
id: "25575",
name: "A2",
bedroomCount: 1,
bathroomCount: 1
}
}
}
}
embed.on('metrics.unitMap.unit.click', function (event) {
console.log(event);
});
metrics.unitDetails.outbound.click
Fired when a user selects an outbound link call-to-action within the unit details modal.
{
name: "metrics.unitDetails.outbound.click",
data: {
unit: {
id: "374030",
mapId: "374030",
unitNumber: "2-101",
area: 1887,
areaDisplay: "1,877 Sq. Ft.",
price: 2315, // nullable
priceDisplay: "$2,315", // nullable
availableOn: "2018-09-14", // nullable
availableOnDisplay: "Available Now", // nullable
floor: {
id: "7961",
filterLabel: "Floor 1",
filterShortLabel: "1"
},
floorPlan: {
id: "25575",
name: "A2",
bedroomCount: 1,
bathroomCount: 1
}
},
label: "Contact us", // nullable
destinationUrl: "https://livemarisol.com/contact" // nullable
}
}
embed.on('metrics.unitDetails.outbound.click', function (event) {
console.log(event);
});
metrics.unitDetails.apply.click
Fired when a user selects the apply call-to-action within the unit details modal.
{
name: "metrics.unitDetails.apply.click",
data: {
unit: {
id: "374030",
mapId: "374030",
unitNumber: "2-101",
area: 1887,
areaDisplay: "1,877 Sq. Ft.",
price: 2315, // nullable
priceDisplay: "$2,315", // nullable
availableOn: "2018-09-14", // nullable
availableOnDisplay: "Available Now", // nullable
floor: {
id: "7961",
filterLabel: "Floor 1",
filterShortLabel: "1"
},
floorPlan: {
id: "25575",
name: "A2",
bedroomCount: 1,
bathroomCount: 1
}
},
leaseTerm: 1, // nullable
moveInDate: "2019-04-09",
applyUrl: "https://livemarisol.com/apply/?SearchUrl=https%3A%2F%2Flivemarisol.com%2Fapply%2F&MoveInDate=2019-04-09&UnitId=278"
}
}
embed.on('metrics.unitDetails.apply.click', function (event) {
console.log(event);
});
Example
This JSFiddle demonstrates how one may listen for metrics events. In this case, the events are logged to the console. There is also a code snippet showing how one may push the event data to a Google datalayer, to be used with GTM or GA. Note, this API is compatible with any metrics platform, not just Google products.
Updated 21 days ago