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

Storeganise does not offer support for GTM use or guarantee that any custom GTM code will work within Storeganise. Additionally, periodic updates to the Storeganise API could impact or even break how custom GTM code works. Please note also that many users may not see changes made via GTM due to the widespread use of ad-blockers.

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 WaitlistAdd 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 selectorResult:

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>

Jump to

How to set up Google Tag Manager custom styles

Setting up Google Tag Manager (GTM)