Widget Tag for Analytics

Neal Akyildirim

Hi

We have embedded a Jira Service Management which we use for our support portal. We leverage the Widget under Channels . We embedded this to our site as contact us. We want to tag the contact us button and send button once user submits a request. (Although we get a ticket everytime a user submits a request, we still want to tag these buttons via Google Tag Manager for analytics. 

 

I couldnt figure out how to install GTM to the widget. Does anyone know how i can do that

David at David Simpson Apps

The JSM widget injects an iframe into the web page that it's added to, so the JSM widget is completely isolated from the GTM tags within your web page.

In order to add GTM to the iframe, you have to somehow inject the standard GTM script (below) into the iframe.

<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Luckily, the iframe is created in the same domain as the webpage it's embedded in, so it is possible to access the iframe and inject some additional javascript.

Add the following or similar to the end of the body on your web page:

<script>
// create the `window.dataLayer` script tag & content:
const dataLayerNode = document.createElement('script');
dataLayerNode.textContent = 'window.dataLayer = window.dataLayer || [];'

// create the gtm script tag & content
const gtmNode = document.createElement('script');
gtmNode.textContent = `(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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');`;

// get the JSM iframe
const jsmIframe = document.querySelector('iframe#jsd-widget')

// append the scripts to the html head in the iframe
const jsmHead = jsmIframe.contentDocument.head
jsmHead.append(dataLayerNode);
jsmHead.append(gtmNode);
</script>

Replace the GTM-XXXXXX with your value.

This will inject the GTM scripts into the iframe for the JSM widget. If all is well, the form submits will be handled by GTM. If not, you'll simply have to add more logic within the gtmNode.textContent =`...` line.

Please note: This code is tested in the browser console, but should really be thought of as the beginning of what you need to do. 

Good luck.