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>

@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