Google Tag Manager example: Add alternative call to actions (waitlist / reserve)

Using Google Tag Manager you may add different call to action buttons such as a "Add to waitlist" or "Reserve" button to your Customer Portal.

Add to Waitlist

Add a Reserve button

Add to waitlist

By default the customer portal unit type list shows "Not available" when a unit type has no more units available for the unit type. With this GTM code, you can add Custom HTML code to show a "Add to waitlist" button if a unit type is not available. The waitlist option needs to send the customer to a page hosted on your own website or an external form.

<script>
var siteMatch = location.pathname.match(/^\/sites\/([\w-]+)$/);
if (siteMatch) {
  document.querySelectorAll('h1 + ul [data-unit-type]').forEach(function (na) {
    // na.previousElementSibling.style.visibility = 'hidden'; // hide price
    var wl = document.createElement('a');
    wl.className = 'btn btn-gray-light px-2 px-md-4 fw-500';
    wl.href = 'https://www.spaceup.me?waitlist-for=' + siteMatch[1] + '_' + na.dataset.unitType; // link to your own external form with site and unit type as reference
    wl.textContent = 'Add to waitlist';
    na.replaceWith(wl); // replace all "Non available" buttons by a waitlist link
  });
}
</script>

Now add an Element Visibility trigger, triggered when an element matches [data-unit-type] (select Observe DOM Changes)

In GTM dashboard:

As a result, the unit types list will now show:

Similarly you could customize the sites list as well, when a site has no units available:

<script>
if (location.pathname === '/sites') {
  document.querySelectorAll('.sgc-main > div:last-child').forEach(function (s) { // 1st child is the availability count, 2nd child the button
    if (!/\d/.test(s.children[0].textContent)) { // no units avail
      s.children[0].innerHTML = '';

      var wl = document.createElement('a');
      var siteCode = new URL(s.children[1].href).pathname.slice(1).split('/')[1];
      wl.className = 'btn btn-gray-light px-2 px-md-4 fw-500';
      wl.href = 'https://www.spaceup.me?waitlist-for=' + siteCode;
      wl.textContent = 'Join waitlist';
      s.children[1].replaceWith(wl);
    } else {
      s.children[1].children[0].textContent = 'Book now'; // a > span
    }
  });
}
</script>

with an Element Visibility trigger, with [href^="/sites/"] as CSS selector

Result:

Add a "Reserve" button

An alternative is to show 2 buttons in the Customer Portal. An example would be if you want to show an option for customers to reserve units as well as book directly. You would follow the same approach as mentioned above, but use code such as below instead.

<script>
document.querySelectorAll('h1 + ul li a[href], h1 + ul li [data-unit-type]')
  .forEach(function (view_button) {
    var res_button = document.createElement('a');
    res_button.className = 'btn btn-gray-light px-2 px-md-4 fw-500';
    res_button.textContent = 'Reserve';
  
    if (view_button.dataset.unitType) {
      res_button.href = 'https://www.spaceup.me/reserve/' + view_button.dataset.unitType;
      view_button.after(res_button);
    } else {
      res_button.href = 'https://www.spaceup.me/reserve/' + view_button.href.split('/').slice(-1)[0];
      view_button.before(res_button);
    }
  });
</script>