Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Widget Tag for Analytics

Neal Akyildirim
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
March 1, 2024

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

1 answer

0 votes
David at David Simpson Apps
Marketplace Partner
Marketplace Partners provide apps and integrations available on the Atlassian Marketplace that extend the power of Atlassian products.
March 6, 2024

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.

 

 

Suggest an answer

Log in or Sign up to answer
DEPLOYMENT TYPE
CLOUD
PRODUCT PLAN
STANDARD
PERMISSIONS LEVEL
Site Admin
TAGS
AUG Leaders

Atlassian Community Events