When a spott style has been set to Trigger JavaScript event, it will emit a signal that you can capture whenever markers or cards with that style are clicked. You can use this for many different functionalities such as an 'add to basket’ feature or a log to your own tracking system.

You can capture these signals by putting a small JavaScript snippet on your webpage. This snippet will listen to emitted signals so you can get started implementing your own feature and choose what happens next.

Watch the following video for a more in-depth understanding of this concept.

The code used in this video can be found at the bottom of this page.

Before you get started, make sure to check that the Button action of your spott style is set to Trigger JavaScript event. Check this article to learn how to do this.

You can use the following script to capture click events on both JavaScript and Iframe embeds.

<script>
    window.addEventListener('message', function (message) {
        if (message.data && message.data.event_type==='spottButtonAction'){
            /* your code here */
        }
    });
</script>

Replace /* your code here */  by your code to run it on spott click events.

Getting a spott's information in the event

There is a lot of information that you can gather from this event. You can find out more about what data you can get by logging it in your web console. You can do so by replacing /* your code here */  by console.log(message); .

If your spott style is default or doesn't have an action: Trigger JavaScript event, you can still capture these clicks as well. 

Common use cases

Some of the most common possible uses of custom JavaScript events include:

  • 'Add to cart' of 'Save in wishlist' functionality.
  • Link spott with your targeted advertising solution.
  • Keep track of events in your own user tracking system (such as Google Analytics).
  • Change (part of) your page layout.
  • Open custom page dialogs.

The code used in the video

The script that handles all Spott custom related features:

<script>

window.addEventListener('message', function (message) {
if (message.data && message.data.event_type === 'spottButtonAction'){
// Calls the pet dogg function, add the name as its parameter
petDog(message.data.event_data.asset.name);

// Send an event notice to Google Analytics
gtag('event', 'Spott',{
'event_category':'Dog pet',
'event_label':message.data.event_data.asset.name
});
}
});
</script>

Script to pet the dog

<div id="modal">
</div>

<script>
// take the dog name, open a modal and add the name
function petDog(dogname){
var modal=document.getElementById("modal");
modal.innerHTML ="Thanks for petting "+ dogname + "!";
modal.style.display = "block";
// hide it after 3 seconds
setTimeout(function() {
modal.style.display = "none";
}, 3000);
}
</script>
Did this answer your question?