Google Analytics Integration

1

We are looking to add Google Analytics Tracking codes to the header of the Jira Install, but in very specific places. Right now we have the tracking code installed in the “announcements bar” area which works fine for tracking users and other metrics. It does not however work for page load times as it is being loaded too late in the DOM.
In order to gather more accurate metrics as well as extend the metrics to give us better insights into performance benchmarking we need to load a script right after the opening and another right before the closing tag. What is the best way to do this?

Here is the code that we are trying to inject

<head>
<script>
! function() {
if ('PerformanceLongTaskTiming' in window) {
var g = window.__tti = {
e: []
};
g.o = new PerformanceObserver(function(l) {
g.e = g.e.concat(l.getEntries())
});
g.o.observe({
entryTypes: ['longtask']
})
}
}();
</script>

and before the closing 

<script type="text/javascript" src="[location-URL]/tti-polyfill.js"></script>
<script> ttiPolyfill.getFirstConsistentlyInteractive().then(console.log);
ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {
if (tti > 1) {
gtag('event', 'timing_complete', {
'name': 'TTI',
'value': tti,
'event_category': 'Page Speed'
});
}
});
</script>
</head>

Some notes:

Any thoughts on how can we achieve this?

2

Updating this case with this instruction that worked for our Customer:

We can add scripts at head sections of the pages using a [Web panel plugin module|https://developer.atlassian.com/server/framework/atlassian-sdk/web-panel-plugin-module/].

  • Basic steps would be to set up the [Atlassian Plugin SDK|https://developer.atlassian.com/server/framework/atlassian-sdk/set-up-the-atlassian-plugin-sdk-and-build-a-project/];
  • Create a plugin - You can follow the [Helloworld plugin project|https://developer.atlassian.com/server/framework/atlassian-sdk/create-a-helloworld-plugin-project/)], for instance;
  • Add a Web Panel plugin module using [atlas-create-jira-plugin-module|https://developer.atlassian.com/server/framework/atlassian-sdk/web-panel-plugin-module/];
  • Configure the web panel to inject the header elements we want.

An example Web Panel configuration would look like below:
{code:java}

The EmbeddedHeader Plugin
<![CDATA[

]]></resource>
{code} Two points to note here are: * location=“atl.header” this tells to insert the resource to the shared header to all pages; * weight=“10” this is as described at the Web Panel documentation linked above; lower weight shows up at a higher position in the header. So we can use 10 for example for the header that we want high up in the header and 2000 for the one we want at the bottom of the header; * CDATA sections hold the Google Analytics script as you may see. However, you may want to make this configurable, and may follow the Plugin SDK tutorial to see how to do that.