How to add the tracking code via JavaScript and use custom tracking? #646

kariem · 2021-05-01T10:51:21Z

kariem
May 1, 2021

I want to use tracker functions (e.g. trackEvent) from JavaScript. If I paste the tracking code into the document's <head>, everything works as expected. However, I seem to have problems with dynamically adding the <script> tag in an Angular component

With Google Analytics, the code looks like this

const script = document.createElement('script');
script.innerHTML = `
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', '` + environment.googleAnalyticsTrackingId + `', 'auto');
if (navigator.sendBeacon) {
    ga('set', 'transport', 'beacon');
}
`

When I try a similar approach with Umami, I cannot get a reference to umami, or umami.trackEvent (umami is undefined).

What I have tried so far:

const script = document.createElement('script');
script.setAttribute('src', 'https://{hostname}/umami.js')
script.setAttribute('data-website-id', '{website-id}')
script.setAttribute('async', '')
script.setAttribute('defer', '')

(Note: {hostname} and {website-id} are replaced with my actual parameters.)

This correctly adds a <script> and also tracks a page view, but umami is undefined and I cannot call the functions I am interested in. I also tried omitting the defer attribute, but this does not change anything.

Similarily to the GA code, I have also tried to add an additional <script> tag, which looks like this

const script = document.createElement('script');
script.innerHTML = `
(function(i,s,o,g,w,r,a,m){a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a['data-website-id']=w;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://{hostname}/umami.js','{website-id}');
`
})

Same result as above.

Any idea what I can do?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to add the tracking code via JavaScript and use custom tracking? #646

{{title}}

Replies: 0 comments

Select a reply

How to add the tracking code via JavaScript and use custom tracking? #646

kariem May 1, 2021

Replies: 0 comments

kariem
May 1, 2021