In this article
Scenario
You have enabled Phone & Video Appointments and you want to encourage clients/members to book these digital appointments at a Virtual Location. Below is an example of what promoting Virtual Location might look like (notice that any location from the list that was marked as virtual is at the top of the list now):
Suggestion
Use our Google Tag Manager (GTM) integration to inject a custom HTML tag into the client view.
NOTE: Many ad blockers will prevent GTM tags from being run in your clients' browsers, so this solution may not work in all cases. As a best practice, ensure you thoroughly test the custom HTML tag prior to launching it.
Where to begin?
Configure the GTM Container ID inside Coconut
Once you have created a GTM container, configure the container ID inside the Client View Settings as per below:
Configure the GTM Tag
Navigate to your GTM container and the workspace in which you want to create the tag and click on the New Tag button. Give your tag a name.
Hover over the Tag Configuration section with your mouse and click on the pencil icon in the top right corner to edit the tag configuration. From the side panel that comes up, select the Custom HTML tag type.
In the text area that comes up insert the following HTML code:
<script>
var locations = document.getElementById('location-list');
var foundPhysicalLocation = false;
var toInsertAtTop = [];
//search for the virtual locations
for(var i=0; i<locations.children.length; i++){
var curentLocation = locations.children[i];
if (curentLocation.querySelector("div[class*=virtual] h2") != null) {
if ( foundPhysicalLocation )
toInsertAtTop.push(curentLocation);
} else {
foundPhysicalLocation = true;
}
}
//reinsert any virtual location that is not displayed at the top of the list of locations at the top of the list
for(var i=0; i<toInsertAtTop.length; i++){
locations.insertBefore(locations.removeChild(toInsertAtTop[i]),locations.firstChild);
}
</script>
Your tag should now look like this:
Configure the GTM Trigger
In order for your tag to fire at the right point in the appointment booking flow, you need to configure the trigger. Hover with your mouse over the Triggering section of your tag and click on the pencil icon in the top right corner of the section. In the panel that comes up, click on the "+" button in the top right corner to create a new trigger configuration.
Give your trigger configuration a name, hover over the Trigger Configuration section and click on the pencil icon in the top right corner of the section. From the side panel that comes up, select Element Visibility as the trigger type.
Choose CSS Selector as the Selection Method and inside Element Selector enter
#location-list div h2
Choose "Every time an element appears on screen" as the option for "When to fire this trigger" and select the checkbox beside "Observe DOM changes". Once done, your trigger configuration should look like this:
Save your trigger configuration and save your tag.
Deploy the GTM Tag
Once your container ID has been setup inside Coconut and the tag and the trigger have been configured inside your GTM container, you can preview your changes by clicking on Preview inside GTM and specifying your Coconut URL.
After you have completed your testing, publish your changes by pressing Submit.
Additional Resources
For more information on Google Tag Manager functionality, please refer to Google's documentation.