elearningfreak Support Center

Contact Us
  1. Support
  2. General
  3. Step-by-Step Guide: How do I Embed Hotjar Script in Articulate Storyline Projects?

Step-by-Step Guide: How do I Embed Hotjar Script in Articulate Storyline Projects?

Adding a Hotjar tracking script to an Articulate Storyline project involves a few steps since Articulate Storyline exports your project as a web-compatible format, but it doesn't natively support direct insertion of JavaScript like Hotjar's tracking code into its publishing process. Here's how you can manually add the Hotjar script to your Articulate Storyline HTML file after exporting it:

  1. Export Your Project from Storyline:

    • Complete your project in Articulate Storyline.
    • Publish your project for Web or xAPI.

  2. Locate Your Project Files:

    • Find the output folder of your published project. It usually contains several files and folders, including index.html, which is the main file that loads your Storyline content in a web browser.

  3. Edit the HTML File:

    • Open the index.html file (or story.html in some versions) in a text editor of your choice. Notepad++, Sublime Text, or Visual Studio Code are good options that provide syntax highlighting and make the code easier to read.

  4. Insert the Hotjar Script:

    • Locate the Hotjar tracking script you want to insert. You can find this script in your Hotjar account under the Tracking Code section.
    • Insert the Hotjar script just before the closing </head> tag in the HTML file. If you can't find a </head> tag (some versions might structure their output differently), placing the script just before the closing </body> tag (near the end of the file) is also acceptable, though less common for tracking scripts.

  5. Save Your Changes:

    • After inserting the script, save the HTML file. Make sure not to change its name or extension unless you're familiar with how to update links in the project files accordingly.

  6. Test Your Implementation:

    • ZIP the content so that you can upload the modified project to your web server or a testing environment.
    • Visit your project in a web browser to ensure it loads correctly.
    • Check your Hotjar account to see if the tracking script is sending data. It may take a few minutes for data to start appearing.

  7. Troubleshooting:

    • If data isn't appearing in Hotjar, ensure that the script is correctly placed and that there are no typos.
    • Verify that your web environment allows JavaScript execution and isn't blocking scripts from running.

By following these steps, you should be able to successfully integrate Hotjar tracking into your Articulate Storyline project. Keep in mind that any updates or republishes of your project from Storyline will require you to reinsert the tracking code, as the export process will overwrite your previous HTML file modifications.