How to Automatically Turn Intercom On or Off During Office Hours

If you’re not overly familiar with Intercom Aquire, it’s a handy online chat system that allows you to talk directly to your customers and web visitors to help them along their sales journey. It’s a paid-for service, but worth it if you have an online business.

One of the flaws Intercom Aquire has (in my opinion) is that there is no custom setting for office hours. Having Intercom on all the time can help capture new leads, sure, but if your consumers are older in demographic, chatting with nobody in the evening can create frustration with your brand (and even more so if they’re frustrated already). Therefore, this guide was created to help turn Intercom Aquire on or off during your office hours automatically using Google Tag Manager.

Housekeeping Items

Before I get started, I want note that I’ve modified Kathleen Harvey’s code found on the article “Fire Google Analytics on your own Terms” and applied a Daylight Savings Time test thanks to Stack Overflow.

On with the guide. You’re going to need…

Setting Up Google Tag Manager

Step 1: Variables

First, we’re going to build two new variables and paste the scripts into Google Tag Manager.

  1. Log into Google Tag Manager and navigate to your Workspace
  2. Select Variables from the side menu
  3. Under User-Defined Variables select the New button
  4. Click anywhere on the Variable Configuration
  5. Select Custom JavaScript
  6. Copy and Paste the JS – Day of Week code into the Custom JavaScript box
  7. Rename the Untitled Variable to JS – Day of Week and select Save
  8. Repeat Steps 3-5
  9. Copy and Paste the JS – Hour of Day code into the Custom JavaScript box
  10. Rename the Untitled Variable to JS – Hour of Day and select Save

You should now have two new user-defined variables

Step 2: Triggers

2A: Building the Triggers

Now we’re going to build the triggers for your Intercom Office Hours. I’m going to use the example of an office with the following hours:

  • Monday = Closed
  • Tuesday to Friday = 8:30am – 6:00pm
  • Saturday = 10:00am – 5:30pm
  • Sunday = 12:00pm – 5:00pm
  1. Select Triggers from the side menu
  2. Under Triggers select the New button
  3. Click anywhere on the Trigger Configuration
  4. Select Page View from the Trigger Type menu
  5. Select the Some Page Views radio button
  6. Fill out the form by working left to right…
    1. Dropdown Click Classes and select your variable JS – Day of Week
    2. Dropdown contains and select matches RegEx
    3. Skip the form field for now and select the Grey + sign
    4. Dropdown Click Classes and select your variable JS – Hour of Day
    5. Dropdown contains and select greater than or equal to
    6. Skip the form field again and select the Grey + sign on this line
    7. Dropdown Click Classes and select your variable JS – Hour of Day
    8. Dropdown contains and select less than or equal to

You should now have a trigger that looks similar to mine below.

2B: Adding Office Hours

Now we’re going to fill out those form fields with your open office hours and days of the week. We’ll repeat this process for the number of unique days and hours your office is open.

I’m going to split my example into my three unique office hours: Weekdays, Saturday, Sunday. We do not have to worry about days the office is closed – only the days it’s open.

  1. In the first line (JS – Day of the Week), type all of the days (use full spelling) that your office with the same hours and split each day with the pipe “|” key.
    Monday to Friday: Monday|Tuesday|Wednesday|Thursday|Friday
    My Example: Tuesday|Wednesday|Thursday|Friday
  2. In the second line (JS – Hour of Day), type in the decimal time (where 15 mins = 0.25) when your office is open.
    My Example: 8:30 am = 8.500
  3. In the third line (JS – Hour of Day), type in the decimal time when your office is closed.
    My Example: 5:30 pm = 17.500

After filling out the fields, you should now have something that looks similar to mine:

2C: Finishing The Triggers
  1. Rename the Untitled Trigger to Intercom – Weekdays and select Save button
  2. Build your remaining triggers (I have two more left, Saturday and Sunday)
    1. Repeat all the steps in Step 2A: Building the Triggers
    2. Repeat all the steps in Step 2B: Adding Office Hours:
      • Day: [JS - Day of Week] [matches RegEx] [Saturday]
      • Open: [JS - Hour of Day] [greater than or equal to] [10.000]
      • Close: [JS - Hour of Day] [less than or equal to] [17.500]

When you’re done, you should have three (or four) triggers that look similar to this:

Step 3: Tags

We’re almost done. All we have left now to build are the tags to fire.

  1. Select Tags from the side menu
  2. Select the New button
  3. Click anywhere on the Tag Configuration card
  4. Select Custom HTML
  5. Copy and Paste the Intercom Basic Javascript code into the Custom HTML box
  6. Click anywhere on the Triggering card below the Custom HTML box
  7. Select the Intercom – Weekdays trigger you created
  8. Rename the Untitled Tag to Intercom – Weekdays and select the Save button
  9. Repeat Steps 2-8 with all of the triggers you created (e.g. Saturday, Sunday, etc.)

You should now have three (or four) new tags like mine:

Step 4: Preview and Debugging

    • Hit the Grey Down Arrow next to the Publish button and select the Preview button.
    • Navigate to your homepage and you should see (or not see) your Intercom button depending on your time of day and office hours.
    • Push it live!

Required Scripts

Note: Be sure to update the lines var myTimeZone = -5 and var myTimeZone = -6 with your Time Zone’s Daylight Savings Time [-5] and Standard Time [-6].

JS – Day of Week

function Day() {
  Date.prototype.stdTimezoneOffset = function() {
    var jan = new Date(this.getFullYear(), 0, 1);
    var jul = new Date(this.getFullYear(), 6, 1);
    return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
  }
  Date.prototype.dst = function() {
    return this.getTimezoneOffset() < this.stdTimezoneOffset();
  }
  var date = new Date();
  if(date.dst()){
    var myTimeZone = -5;
  }
  else {
    var myTimeZone = -6;
  }
  var userTime = new Date();
  var utc = userTime.getTime() + (userTime.getTimezoneOffset() * 60000);
  var currentDate = new Date(utc + (3600000 * myTimeZone));
  var daysOfWeek = new Array(7);
  daysOfWeek[0]=  "Sunday";
  daysOfWeek[1] = "Monday";
  daysOfWeek[2] = "Tuesday";
  daysOfWeek[3] = "Wednesday";
  daysOfWeek[4] = "Thursday";
  daysOfWeek[5] = "Friday";
  daysOfWeek[6] = "Saturday";
  return(daysOfWeek[currentDate.getDay()]);
}

JS – Hour of Day

function Hour(){
  Date.prototype.stdTimezoneOffset = function() {
    var jan = new Date(this.getFullYear(), 0, 1);
    var jul = new Date(this.getFullYear(), 6, 1);
    return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
  }
  Date.prototype.dst = function() {
    return this.getTimezoneOffset() < this.stdTimezoneOffset();
  }
  var date = new Date();
  if(date.dst()){
    var myTimeZone = -5;
  }
  else {
    var myTimeZone = -6;
  }
    var userTime = new Date();
    var currentHour = (userTime.getTime()%(24*60*60*1000))/(60*60*1000)+ myTimeZone;
    if (currentHour < 0){
        return (currentHour+24);
        // console.log(currentHour+24);
    } else {
        return (currentHour);
        // console.log(currentHour);
    }
}

Sources

Fire Google Tag Manager Tags on Your Own Terms

http://stackoverflow.com/questions/11887934/how-to-check-if-the-dst-daylight-saving-time-is-in-effect-and-if-it-is-whats

1 Comments

Leave a Comment.