Adding tracking code to the <body> html

Luc_Zentar · December 9, 2021, 10:28am

Hello,

I want to add HubSpot tracking code to each page of my web app. The HubSpot guidance is:

To install the tracking code, paste the code before the closing </body> tag in the HTML code for each page of your site. Once you’ve installed the tracking code, learn how to verify installation and troubleshoot the code.

At the same time, most content management systems and your developers can install code to all pages on your site, such as a footer file that is referenced across all pages. Check with your developers on how they can help do this.

I can’t figure out how to do this. Any help much appreciated.

Thanks,
Luc

oleg-vyalyh · December 9, 2021, 3:35pm

We are working on the feature which is called “reusable component”.
It will allow to create custom component which can be used on set of pages.

P.S. i cannot give you any estimations, but definitely not earlier than in a couple of months.

viktor.liablin · December 9, 2021, 3:49pm

Hello @Luc_Zentar

In ui-builder you can use handler “on page enter”
In this handler with block “custom code” you have access to manipulations in the DOM

Regards,
Viktor

Luc_Zentar · December 9, 2021, 3:54pm

Thank you, what code would I use to add the snippet to the in html?

viktor.liablin · December 13, 2021, 3:57pm

Hi, @Luc_Zentar

const body = document.querySelector('body')
const myScriptId = 'someId'

if (!document.getElementById(myScriptId)) {
  const myScript = document.createElement('script')
  
  myScript.setAttribute('id', myScriptId)
  myScript.setAttribute('atrName', 'atrValue')
  myScript.innerHTML = 'script content'
  
  body.appendChild(myScript)
}

Regards

Luc_Zentar · December 14, 2021, 9:17am

Hi @viktor.liablin

Thank you for this. I have attempted to implement it on one page, but am not seeing the same result as you.

I have added the custom code to the on page enter logic:

The custom code is:

But it is not showing:

This may be because I have not added the HubSpot code to your code, but I am unsure of where the various elements should be placed. The HubSpot code is:

script type=“text/javascript” id=“hs-script-loader” async defer src=“//js.hs-scripts.com/20830720.js”>/script

Thank you for your help so far.

Luc

viktor.liablin · December 14, 2021, 10:15am

Hello @Luc_Zentar

Can you provide us with your appId, please? And add the page name the logic located.

Luc_Zentar · December 14, 2021, 10:28am

Hi Viktor, the appid is 8518B92E-A6AA-5589-FFA0-B863E4A63F00

The container is frontEnd, the page is dashboard and the logic is on page enter

Thank you

viktor.liablin · December 14, 2021, 11:19am

@Luc_Zentar

I’ve checked and the script is added
Look
Let me know if I shouldn’t share this link here

Luc_Zentar · December 14, 2021, 4:41pm

Hi Viktor, I see that now, sorry I was looking in the wrong place.

I am having a problem when I try to place the HubSpot code into the template you have built.

The HubSpot code should look like this:

script type=“text/javascript” id=“hs-script-loader” async defer src=“//js.hs-scripts.com/20830720.js”></script

I have tried to use this in your template like this:

const body = document.querySelector(‘body’)
const myScriptId = ‘someId’

if (!document.getElementById(myScriptId)) {
const myScript = document.createElement(‘script’)

myScript.setAttribute(‘type’, ‘text/javascript’)
myScript.setAttribute(‘id’, ‘hs-script-loader’ )
myScript.setAttribute(‘async defer src’, ‘//js.hs-scripts.com/20830720.js’ )
myScript.innerHTML = ‘’

body.appendChild(myScript)
}

But all I see when I reload the page is this:

From testing I can see that the problem is the spaces in ‘async defer src’ - if I replace this with text with no breaks the script is shown.

Thanks,
Luc

viktor.liablin · December 14, 2021, 6:44pm

@Luc_Zentar

Let’s try something like this

const body = document.querySelector('body')
const myScriptId = 'hs-script-loader'

if (!document.getElementById(myScriptId)) {
  const myScript = document.createElement('script')
  
  myScript.setAttribute("type", "text/javascript")
  myScript.setAttribute("id", myScriptId)
  myScript.setAttribute("async", "")
  myScript.setAttribute("defer", "")
  myScript.setAttribute("src", "//js.hs-scripts.com/20830720.js")

  body.appendChild(myScript)
}

Luc_Zentar · December 15, 2021, 9:33am

Perfect, thank you!

Luc_Zentar · December 15, 2021, 5:01pm

Hi Viktor,

I have found another problem. I am trying to add this code to the head:

script>(function (f, r, n, d, b, y) { b = f.createElement(r), y = f.getElementsByTagName(r)[0]; b.async = 1; b.src = n; b.id = ‘RR_DIVID’; y.parentNode.insertBefore(b, y); })(document, ‘script’, ‘//urlexample.com/webpixel/beta/universalv03.js’);</script

I have changed the body sections of the script to head, and with no other changes this adds the same script to the head.

But I’m unable to get the rest of the code to work. It seems to be a problem with the brackets and the need for a myScriptId.

Is there a way of creating some code that just adds text to the head or body without having to set attributes?

viktor.liablin · December 16, 2021, 9:05am

@Luc_Zentar

Attribute ID is required. This does not affect the operation of the script in any way, it can be left

const head = document.querySelector('head')
const myScriptId = 'someId'

if (!document.getElementById(myScriptId)) {
  const myScript = document.createElement('script')
  
  myScript.setAttribute('id', myScriptId)
  myScript.innerHTML = 'function foo () { console.log(1) }'
  
  head.appendChild(myScript)
}

Luc_Zentar · December 16, 2021, 7:25pm

Thanks Viktor, when I try to add the code to the innerHTML and try to save I get this error:

viktor.liablin · December 17, 2021, 9:30am

@Luc_Zentar

This error means that It is a syntax error. This JS code is not valid.