DocumentationAPI Reference

Google Tag Manager support

Google Tag Manager support

Both Web Widget (Classic) and messaging Web Widget support Google Tag Manager (GTM). This guide uses the term "Web Widget" to refer to both Web Widget (Classic) and messaging Web Widget.

Zendesk has two versions of the Web Widget snippet. You can use either the legacy or new snippet with GTM.

If you're setting up the Web Widget with GTM for the first time, we recommend using the new snippet and following the procedure outlined below.

Adding the Web Widget via Google Tag Manager

If you're using the new snippet, follow the steps in this section to get the widget working in GTM.

The new snippet looks as follows:

<script  id="ze-snippet"  src="https://static.zdassets.com/ekr/snippet.js?key=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></script>

To get the Web Widget working in GTM:

  1. Create a new Custom HTML Tag in GTM.
  2. Sign in to your Zendesk Support account as an admin and go to Admin > Channels > Widget.
  3. Select the Setup tab and copy the snippet code.
  4. Edit the new tag and paste the copied snippet code in the HTML textbox.
  5. Configure the Fire On step to run whenever you'd like on your website.

Adding the Web Widget via Google Tag Manager (legacy snippet)

If you're using the legacy snippet, follow the steps in this section to get the widget working in GTM.

The legacy snippet looks as follows:

<script>/*<![CDATA[*/window.zEmbed||function(e,t){var n,o,d,i,s,a=[],r=document.createElement("iframe");window.zEmbed=function(){a.push(arguments)},window.zE=window.zE||window.zEmbed,r.src="javascript:false",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="display: none",d=document.getElementsByTagName("script"),d=d[d.length-1],d.parentNode.insertBefore(r,d),i=r.contentWindow,s=i.document;try{o=s}catch(e){n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}o.open()._l=function(){var e=this.createElement("script");n&&(this.domain=n),e.id="js-iframe-async",e.src="https://assets.zendesk.com/embeddable_framework/main.js",this.t=+new Date,this.zendeskHost="{{zendeskSubdomain}}",this.zEQueue=a,this.body.appendChild(e)},o.write('<body onload="document._l();">'),o.close()}();/*]]>*/</script>

Where {{zendeskSubdomain}} is your host e.g. subdomain.zendesk.com.

If you're configuring your GTM with the widget for the first time and are experiencing difficulty loading the widget, we have found that using the new snippet mentioned above may help.

To get the Web Widget working in GTM:

  1. Create a new Custom HTML Tag inside GTM.

  2. Edit the new tag and paste the following code in the HTML textbox:

    <script>  window.zEmbed ||    (function() {      var queue = [];
      window.zEmbed = function() {        queue.push(arguments);      };      window.zE = window.zE || window.zEmbed;      document.zendeskHost = '{{zendeskSubdomain}}';      document.zEQueue = queue;    })();</script><script  src="https://assets.zendesk.com/embeddable_framework/main.js"  data-ze-csp="true"  async  defer></script>

    Where {{zendeskSubdomain}} is replaced by your host e.g. subdomain.zendesk.com.

    Note: Please preserve the extra attributes as they're needed for GTM support to function correctly.

  3. Configure the Fire On step to run whenever you'd like on your website.