Hotjar.com™ feedback widget in Ionic v3 mobile apps
_Note: This solution is making use of undocumented features and inner workings of Hotjar feedback widget and is not guaranteed to work or might break if Hotjar decides to change something inside their code. I am in no way affiliated with Hotjar.com™ and can not offer any support regarding these matters._
I had a request the other day to integrate Hotjar.com™ feedback widget into our iOS and Android mobile applications which run on Ionic v3.
As of writing this post, Hotjar has the following information available regarding the frameworks supported. They state that it is not possible to use Hotjar with (native) mobile applications and it is not possible to use Hotjar tracking code with Ionic but web-based applications are compatible and it doesn’t say anything about Feedback widget inside Ionic.
And as mobile-apps built with Ionic v3 are web-based applications because Ionic uses webview (so essentially an embedded browser) I had my hopes up.
Usually integrating similar 3rd party tools is pretty straight forward, you just paste their snippet into your index.html and be done with it. At least that is how it went with our website which is running on React.
In Ionic though… Adding the snippet appeared to do nothing. Using xcode iPhone simulator and Safari for debugging console/network, I saw that the snippet successfully fetched the javascript file from Hotjar but nothing else seemed to happen. There were no apparent errors in the console and our widget was also not appearing.
As any other self respecting developer I turned to my Googling skills and ended up with a way to enabled debugging option for the snippet which I was hoping would give me answers of why the widget initialization is failing. This meant adding hjdebug:1 to the h._hjSettings object which is defined inside the snippet code you copy from their site and also has your hotjar ID.
After recompile and rerun I ran into my first problem, the debug log stated the following:
As these were the only lines of debug, I had to assume that Cookies are not enabled is a blocker and the script stopped execution after that. Our application itself uses cookies, so I know the cookies do work but for some reason Hotjar thinks otherwise. At this point I started looking into ways to manually initialize the Hotjar through the developer console and after some digging around in their snippet code, I came up with the following :
window.hj._init.reinit(window.location.href);After running it in the Safari developer console, I ran into second issue:
So apparently the widget also has a problem with the URL. If we look the output of window.location.hrefit’s not very hard to guess what the problem is. By default the Ionic loads your website with a URL of ionic://localhost or http://localhost on android and it is not possible to set localhost as URL target in Hotjar configuration on their website (as they expect a valid domain).
As we’re using cordova-plugin-ionic-webview 5.x I looked up their doc and found that you can use <preference name=”Hostname” value=”somedomain.com” /> in Ionic config.xml to change the domain used by the webview. After adding the configuration to match the domain what we used in Hotjar, it finally appeared!
At this point the Hotjar widget bootup issue still needed solving so I moved the Hotjar reinitlization code after Ionic deviceready has fired.
To recap
- Add
<preference name=”Hostname” value=”somedomain.com” />to yourconfig.xmlinside<platform name=”ios”>and<platform name=”android”> - Make sure your Hotjar feedback widget is configured to work on Mobile devices and on correct domain (you configure this on their website).
- Include the Hotjar feedback widget snippet as you regularly would into your
index.htmlwith correct ID. - Inside your
devicereadyhandling, addwindow.hj._init.reinit(window.location.href);
// Reinit the Hotjar feedback widget after deviceready
document.addEventListener('deviceready', () => {
window.hj._init.reinit(window.location.href); });
5. Enjoy all the positive feedback from your mobile application users!
