Adding tracking code to the <body> html

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

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.

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

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

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

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:

image

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

Hello @Luc_Zentar

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

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

@Luc_Zentar

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

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:

image

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

@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)
}

Perfect, thank you!

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?

@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)
}

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

@Luc_Zentar

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