inteldigital Posted June 3, 2018 Share Posted 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? 1 Quote Link to comment Share on other sites More sharing options...
brian! Posted June 4, 2018 Share Posted 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. 1 Quote Link to comment Share on other sites More sharing options...
inteldigital Posted June 4, 2018 Author Share Posted 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? 1 Quote Link to comment Share on other sites More sharing options...
brian! Posted June 4, 2018 Share Posted June 4, 2018 1 minute ago, 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? did you try it as a hook ? 1 Quote Link to comment Share on other sites More sharing options...
onliner Posted August 28, 2018 Share Posted August 28, 2018 On 6/4/2018 at 12:54 PM, brian! said: generally, to pass this into a header, I would use a hook... 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? 0 Quote Link to comment Share on other sites More sharing options...
onliner Posted August 28, 2018 Share Posted August 28, 2018 + I can actually see the Hotjar code in the page source as-well... ? 0 Quote Link to comment Share on other sites More sharing options...
inteldigital Posted August 28, 2018 Author Share Posted 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 1 Quote Link to comment Share on other sites More sharing options...
brian! Posted August 28, 2018 Share Posted August 28, 2018 49 minutes ago, 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... 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 1 Quote Link to comment Share on other sites More sharing options...
onliner Posted August 28, 2018 Share Posted August 28, 2018 Just now, 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 Whatever I do, the code break the layout of the whmcs template. Do you mind sharing the code format you've been using, please? 0 Quote Link to comment Share on other sites More sharing options...
inteldigital Posted August 28, 2018 Author Share Posted 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 1 Quote Link to comment Share on other sites More sharing options...
onliner Posted August 28, 2018 Share Posted 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. 0 Quote Link to comment Share on other sites More sharing options...
onliner Posted August 28, 2018 Share Posted August 28, 2018 34 minutes ago, brian! said: check that your Hotjar code is correct Yes, did that several times. However, can't get Hotjar to verify installation. I'll try to reach out to their support. 0 Quote Link to comment Share on other sites More sharing options...
inteldigital Posted August 28, 2018 Author Share Posted August 28, 2018 1 minute ago, 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. 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. 1 Quote Link to comment Share on other sites More sharing options...
brian! Posted August 28, 2018 Share Posted August 28, 2018 if you copied intel's code, did you remember to add your own hotjar ID back into it and not 11111 ? 1 Quote Link to comment Share on other sites More sharing options...
onliner Posted August 28, 2018 Share Posted August 28, 2018 3 minutes ago, brian! said: if you copied intel's code, did you remember to add your own hotjar ID back into it and not 11111 ? Yes, but nothing happens. Can't see in the console that something is odd. Waiting on their support to act. 0 Quote Link to comment Share on other sites More sharing options...
onliner Posted August 28, 2018 Share Posted August 28, 2018 6 minutes ago, 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. Wonderful! Ok, let's hope so. Thanks. 0 Quote Link to comment Share on other sites More sharing options...
onliner Posted August 29, 2018 Share Posted 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 0 Quote Link to comment Share on other sites More sharing options...
The Stratega Posted April 29, 2020 Share Posted April 29, 2020 The hook solution worked like a charm and verified instantly!. Thanks brian! 0 Quote Link to comment Share on other sites More sharing options...
Danilo Posted March 11, 2021 Share Posted 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 0 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.