Adding Google Tag Manager variables to intercomSettings

gtm-intercom.js

<script>
// app ID
var intercomSettings = {
	app_id: "{{IC - Dynamic app ID}}"
};

// Verifies and cleans all GTM variables
function pushGTMVariablesToIntercom(gtmKey, gtmValue) {
	if("{{User - Account - Type}}" != "Guest"){
		if(gtmValue != null && gtmValue != "" && gtmValue != "undefined") {
			if(typeof gtmValue == "string") {
				gtmValue = gtmValue.trim();
				if(gtmValue == "") {
					return false;
				}
			}
			intercomSettings[gtmKey] = gtmValue;
			return true;
		}
		return false;
	}
	return false;
}

// Default variables
pushGTMVariablesToIntercom("user_id", "{{User - Account - ID}}");
pushGTMVariablesToIntercom("user_hash", "{{User - Account - Hash}}");
pushGTMVariablesToIntercom("email", "{{User - Account - Email}}");
pushGTMVariablesToIntercom("created_at", "{{User - Account - Registration date}}");
pushGTMVariablesToIntercom("name", "{{User - Account - First name}}" + " " + "{{User - Account - Last name}}");

// Custom variables example
pushGTMVariablesToIntercom("user_services", "{{User - Account - Services}}");
</script>

<script>(function() {var w = window;var ic = w.Intercom;if (typeof ic === "function") {ic('reattach_activator');ic('update', intercomSettings);} else {var d = document;var i = function() {i.c(arguments)};i.q = [];i.c = function(args) {i.q.push(args)};w.Intercom = i;var s = d.createElement('script');s.type = 'text/javascript';s.async = true;
	s.src = 'https://widget.intercom.io/widget/{{IC - Dynamic app ID}}';
	var x = d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);}})();
</script>

Test HTML page below that should allow them to get started quickly.

1. Include gtm-intercom.js as a Tag (Type of Custom HTML), firing triggers typically will be "All Pages" unless they want it to specifically show on certain pages
   
2. Add the variables in GTM
   
3. Remember to Publish to set it live
   

<script>
var loggedIn = isCurrentSessionALoggedInUser(); // this function would need to be defined and customised based on your individual setup
var dataLayer = [];
dataLayer.push({'IC - Dynamic app ID': 'YOUR_APP_ID'});

if(loggedIn)
{
// add and remove as many attributes as needed. For users to be registered in Intercom the user_id or email values must be supplied
  dataLayer.push({'User - Account - Type': 'User'});
  dataLayer.push({'User - Account - Email' : 'EMAIL'}); // email
  dataLayer.push({'User - Account - ID' : 'USER_ID'}); // user_id. Remove if not using user_id / IDs
  dataLayer.push({'User - Account - First name' : 'FIRST_NAME'});
  dataLayer.push({'User - Account - Last name' : 'LAST_NAME'});
  dataLayer.push({'User - Account - Registration date' : 'SIGNED_UP_DATE'}); // created_at
  dataLayer.push({'User - Account - Hash' : 'USER_HASH'}); // user_hash used for secure mode. Remove if not needed

  // custom attributes
  dataLayer.push({'User - Account - Services' : 'CUSTOM_ATTRIBUTE_VALUE'});
}
else{
  dataLayer.push({'User - Account - Type': 'Guest'});
}
</script>


<!-- Edit GTM-XXXX with your specific container ID. If it doesn't work, see https://developers.google.com/tag-manager/quickstart for any updated snippet to replace the "Google Tag Manager" section below -->

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

<ol>
<li>Add the gtm-intercom.js as a Tag (Type = Custom HTML)</li>
<li>Add the following User-Defined Variables (Type = Data Layer Variable)
<pre>
  IC - Dynamic app ID
  User - Account - Email
  User - Account - First name
  User - Account - Last name
  User - Account - Hash
  User - Account - ID
  User - Account - Registration date
  User - Account - Type
</pre>
Add as many extra custom user attributes like the following
<pre>
  User - Account - Services
</pre>
</li>
<li>Publish your Changes</li>
</ol>

If a GTM user wants to only show Intercom on certain pages then change the 'All Pages' firing to 'Some Pages' instead and set up a filter, for instance:

For Aquire only Visitor / Non logged in user installs see https://gist.github.com/edkellena/1bd0f6088b40150e2682

How can I integrate it in our Android app? What function call should be written?

For problems with the JS snippet not validating, see: https://productforums.google.com/forum/#!msg/tag-manager/_QPjuOpv0lI/8CgakcgJAQAJ

Adding support for company object (haven't had the time to debug why the original code won't work yet)

<script>
// app ID
var intercomSettings = {
	app_id: "{{IC - Dynamic app ID}}"
};

// Verifies and cleans all GTM variables
function pushGTMVariablesToIntercom(gtmKey, gtmValue) {
	if("{{User - Account - Type}}" != "Guest"){
		if(gtmValue != null && gtmValue != "" && gtmValue != "undefined") {
			if(typeof gtmValue == "string") {
				gtmValue = gtmValue.trim();
				if(gtmValue == "") {
					return false;
				}
			}
			intercomSettings[gtmKey] = gtmValue;
			return true;
		}
		return false;
	}
	return false;
}
function pushGTMObjectToIntercom(gtmKey, gtmValue) {
    if("{{User - Account - Type}}" != "Guest"){
        if(gtmValue != null && gtmValue != "undefined") {
            intercomSettings[gtmKey] = gtmValue;
            return true;
        }
        return false;
    }
    return false;
}

// Default variables
pushGTMVariablesToIntercom("user_id", "{{User - Account - ID}}");
pushGTMVariablesToIntercom("user_hash", "{{User - Account - Hash}}");
pushGTMVariablesToIntercom("email", "{{User - Account - Email}}");
pushGTMVariablesToIntercom("created_at", "{{User - Account - Registration date}}");
pushGTMVariablesToIntercom("name", "{{User - Account - First name}}" + " " + "{{User - Account - Last name}}");

// Custom variables example
pushGTMVariablesToIntercom("user_services", "{{User - Account - Services}}");
  
  
// Company data
pushGTMObjectToIntercom("company", { id: '{{User - Account - Company ID}}' , name: '{{User - Account - Company name}}' });

</script>

<script>(function() {var w = window;var ic = w.Intercom;if (typeof ic === "function") {ic('reattach_activator');ic('update', intercomSettings);} else {var d = document;var i = function() {i.c(arguments)};i.q = [];i.c = function(args) {i.q.push(args)};w.Intercom = i;var s = d.createElement('script');s.type = 'text/javascript';s.async = true;
	s.src = 'https://widget.intercom.io/widget/{{IC - Dynamic app ID}}';
	var x = d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);}})();
</script>

We're using essentially this code. Variables are populated by grabbing the InnerHTML of a div with their name, hash, company ID, company name, etc.

I've noticed though that often company name and company size come in as undefined, clearing the value in intercom resets it to the proper value. Using Chrome dev tools I can see the values are populated in our divs correctly so I suspect something in this code is causing it. I can't seem to figure it out yet though, but will let people know if I find a solution.

@matticusfinch I am not having success with this code. Currently GTM is not validating the container with this code and not recognizing the references to the unknown variable. Do you have any thoughts as to why?

@phylliswong Someone added duplicate code that was wrong and that's why ours wasn't working. I have this now working with user variables being passed, as well as company data. Is your hash output verified using the hash calculator in intercom?

@matticusfinch I was using the Page View as trigger, and the data wasn't available at that stage. I changed to Window Loaded as a trigger, when the data was available to the variables and it all works now. I'm thinking I should write up an up-to-date tutorial. Perhaps this weekend. :)

@thewheat Hello, I do have a question here,
we have included the Intercom script in GTM now we want to show the name dynamically in the chat icon (When someone logged in with their Username & Password then see it in that) so I just wanted to know that, do we have to paste the same Intercom script for dynamic users in our code? or we can directly manage it from GTM itself?

If GTM helps us to manage it from the platform itself then guide me how can we do that?

Thanks in advance!

@Abhi942 sorry for the delay as the email notification got lost in my inbox 🙈 I haven't done any GTM work recently so I'll have to answer off the top of my head but hope it gets on you on the right track 👍

I'm not sure I get what you mean by "show the name dynamically in the chat icon". I'm not aware of any Intercom feature that allows showing the end user name directly in the chat icon itself (and by "chat icon" I'm referring to the image below)

But you can use variables https://www.intercom.com/help/en/articles/248-personalizing-messages-using-variables to address the customer. You will just need to update the name attribute on the record.
The code above supports sending the name

pushGTMVariablesToIntercom("name", "{{User - Account - First name}}" + " " + "{{User - Account - Last name}}");

And you will need to customize the values based on this

  dataLayer.push({'User - Account - First name' : 'FIRST_NAME'});
  dataLayer.push({'User - Account - Last name' : 'LAST_NAME'});

do we have to paste the same Intercom script for dynamic users in our code?
The code above supports both Guests/Visitors and logged in users

or we can directly manage it from GTM itself?

I'm not too familiar with GTM to answer this but I think you could if you can specify a variable value within the GTM dashboard itself and have that be passed though the code