Integrating Hotjar Tracking (JS) into the head of WHMCS

inteldigital · June 3, 2018

Hi,

How do I go about implementing Hotjar's javascript into WHMCS? I'm assuming I cannot just add it into the header.tpl of my theme (Hexa) as it breaks the theme. Here's the code:


  <!-- Hotjar Tracking Code for https://billing.inteldigital.co.uk -->
    <script>
        (function(h,o,t,j,a,r){
            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
            h._hjSettings={hjid:,hjsv:};
            a.appendChild(r);
        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
    </script>

I've tried using {literal} too, which parses the theme, but it doesn't call the JS. Assuming this is what it's purpose is, so what's the solution?

brian! · June 4, 2018

generally, to pass this into a header, I would use a hook...

<?php

/**
* Hotjar Tracking Code
* @author brian!
*/

add_hook('ClientAreaHeadOutput', 1, function($vars) {
    
	return <<<HTML
  <!-- Hotjar Tracking Code for https://billing.inteldigital.co.uk -->
    <script>
        (function(h,o,t,j,a,r){
            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
            h._hjSettings={hjid:,hjsv:};
            a.appendChild(r);
        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
    </script>
HTML;

});

if you put it into the header template directly, Smarty will have an issue with the brackets and you might need {literal} around them, not the whole code... but do it as a hook and you bypass Smarty and it should work fine on Six (I can see it in the browser source).... now whether it would work on Hexa I cannot say, but if you find it works on Six, but not Hexa, then it's probably a question for it's developer.

inteldigital · June 4, 2018

Hi @brian!

Thanks for this response. I managed to pop it into header.tpl and using literal tags it shows in the browser source, but does not get seen on the Hotjar dashboard (it's as if it doesn't exist). Why is this?

brian! · June 4, 2018

On 6/4/2018 at 11:05 AM, inteldigital said:

Thanks for this response. I managed to pop it into header.tpl and using literal tags it shows in the browser source, but does not get seen on the Hotjar dashboard (it's as if it doesn't exist). Why is this?

Expand

did you try it as a hook ?

onliner · August 28, 2018

On 6/4/2018 at 10:54 AM, brian! said:

generally, to pass this into a header, I would use a hook...

Expand

I'm using the hook as described, now the Hotjar code doesn't break the template page (raw copy of the six template), but - nothing happens with tracking. I can't get the Hotjar code verified at their admin panel. Now, wondering if this hook only fires up when the client is actually logged into client area?

onliner · August 28, 2018

+ I can actually see the Hotjar code in the page source as-well...

?

inteldigital · August 28, 2018

I didn't use the hook. There was no need in the end, it just took a while for the code to be seen by Hotjar for some reason. Works just fine now! @onliner

brian! · August 28, 2018

On 8/28/2018 at 8:55 AM, onliner said:

I'm using the hook as described, now the Hotjar code doesn't break the template page (raw copy of the six template), but - nothing happens with tracking. I can't get the Hotjar code verified at their admin panel. Now, wondering if this hook only fires up when the client is actually logged into client area?

+ I can actually see the Hotjar code in the page source as-well...

Expand

check that your Hotjar code is correct - not the hook that adds it, but the actual code that Hotjar want you to use - because when I look at the page below, their example code looks different to the code i've added in the above hook.

https://help.hotjar.com/hc/en-us/articles/115009499088-The-Hotjar-Tracking-Code

onliner · August 28, 2018

On 8/28/2018 at 9:43 AM, inteldigital said:

I didn't use the hook. There was no need in the end, it just took a while for the code to be seen by Hotjar for some reason. Works just fine now! @onliner

Expand

Whatever I do, the code break the layout of the whmcs template. Do you mind sharing the code format you've been using, please?

inteldigital · August 28, 2018

  {literal}
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:11111,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
  {/literal}

@onliner

onliner · August 28, 2018

@inteldigital

I'm using the same code, the page layout is not affected now. But I can't get Hotjar to verify it though.

onliner · August 28, 2018

On 8/28/2018 at 9:45 AM, brian! said:

check that your Hotjar code is correct

Expand

Yes, did that several times. However, can't get Hotjar to verify installation. I'll try to reach out to their support.

inteldigital · August 28, 2018

On 8/28/2018 at 10:19 AM, onliner said:

@inteldigital

I'm using the same code, the page layout is not affected now. But I can't get Hotjar to verify it though.

Expand

Yep, give it some time (24 hours). I actually contacted Hotjar when the same thing happened to me, but they said they could see it working and after a day or so I could see it in my panel too.

brian! · August 28, 2018

if you copied intel's code, did you remember to add your own hotjar ID back into it and not 11111 ?

onliner · August 28, 2018

On 8/28/2018 at 10:22 AM, brian! said:

if you copied intel's code, did you remember to add your own hotjar ID back into it and not 11111 ?

Expand

Yes, but nothing happens. Can't see in the console that something is odd. Waiting on their support to act.

onliner · August 28, 2018

On 8/28/2018 at 10:21 AM, inteldigital said:

Yep, give it some time (24 hours). I actually contacted Hotjar when the same thing happened to me, but they said they could see it working and after a day or so I could see it in my panel too.

Expand

Wonderful! Ok, let's hope so. Thanks.

onliner · August 29, 2018

Yes, it works.

If you ever want to double check if Hotjar tracking is installed properly, you can try these steps to verify manually which are outlined here:

https://help.hotjar.com/hc/en-us/articles/115009509288-Verifying-Installation

The Stratega · April 29, 2020

The hook solution worked like a charm and verified instantly!.

Thanks brian!

Danilo · March 11, 2021

Hook alternative

<script type="text/javascript">
{literal}
        (function(h,o,t,j,a,r){
            /* ... rest of hotjar tracking code ... */
        })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
{/literal}
</script>

font: https://help.hotjar.com/hc/en-us/articles/115009340387-Smarty-Templates

Integrating Hotjar Tracking (JS) into the head of WHMCS

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Similar Content

Recently Browsing 0 members

Important Information