Add chat button to Google Tag Manager

Google Tag Manager allows you to quickly and easily update:

  • Tags and code snippets on your website, such as those intended for traffic analysis and marketing optimization.
  • Configuration and flag values of mobile apps that you have created.

What is a tag?

A tag is a snippet of JavaScript that sends information to a third party, such as Google. If you don't use a tag management solution such as Google Tag Manager, you need to add these snippets of code directly to files on your website or mobile app. With Google Tag Manager, you no longer need to maintain each of these code snippets in your source files. Instead, you specify the tags that you want to fire, and when you want them to fire, from within the Google Tag Manager user interface.

 

How to integrate LiveAgent chat button with Google Tag Manager?

1. Add Google Tag Manager Code to your website (sample code below):

<!-- Google Tag Manager --><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-54KCJ5"
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-54KCJ5');</script><!-- End Google Tag Manager -->

 

2. Create your Custom HTML Tag in your Google Tag Manager admin panel

 

3. Copy a chat button script from your LiveAgent panel and paste it into "HTML field" of the particular Tag

Then it's necessary to modify chat button script with this line (Add it after the parameter (s,t.nextSibling) ):

s.parentNode.style.display = 'inline';s.parentNode.style.visibility = 'visible';

Sample code:

<script type="text/javascript">
(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.id='la_x2s6df8d';
  s.async=true;
  s.src=src;
  s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);s.parentNode.style.display = 'inline';s.parentNode.style.visibility = 'visible';})(document,
'//LIVEAGENT_INSTALL_URL.com/scripts/track.js',
function(e){ 
  LiveAgent.createButton('dbe061d9', e);
});

</script>

* Don't forget to change the LiveAgent installation path and the Chat button ID (in case you'll decide to use sample code from above)

 

How it should look like in your Google Tag Manager:

 

4. Don't forget to PUBLISH your tag in your Google Tag Manager panel  > Publish > Publish Now > Done

Without publishing your tag, chat button will not be displayed on the website !!!

 

Good luck

Ready to try LiveAgent?

It's free for the first 14 days! No credit card required.

Get Started
We work well with others...
Magento Joomla Wordpress Mailchimp
Contact us

support@ladesk.com

+1-800-811-6590 (Toll Free in USA & Canada)

+421 2 33 456 826 (European Union & Worldwide)

Quality Unit, LLC 616 Corporate Way, Suite 2-3278 Valley Cottage, NY 10989

Stay in touch
Blog Google+
© 2004-2015 QualityUnit.com, All rights reserved