R Shiny Hotjar - How To Monitor User Behavior in R Shiny Apps

Being able to <strong>monitor user behavior</strong> lets you know why something works (or doesn't) in your dashboard. It helps build your <strong>user adoption strategy</strong> with user behavior analytics. So where should you begin? You might consider <b>Hotjar for R Shiny</b>. Today you'll learn how it works, and how to add it to your R Shiny applications. Hotjar in R Shiny will enable you to see <strong>heatmaps</strong> of areas that users interact with on your app/website, and even watch the recording of their entire session. Overall, it's a great tool to analyze user behavior, adding to your user adoption metrics. <blockquote>Looking for an alternative way to monitor user adoption in R Shiny? <a href="https://appsilon.com/monitoring-r-shiny-user-adoption/" target="_blank" rel="noopener">Try out these three options</a>.</blockquote> Table of contents: <ul><li><a href="#introduction">Introduction to Hotjar</a></li><li><a href="#shiny-app">Let's Code and Deploy an R Shiny App</a></li><li><a href="#connect">How to Connect R Shiny and Hotjar</a></li><li><a href="#monitor">Monitor Shiny App User Behavior in Hotjar</a></li><li><a href="#summary">Summary of R Shiny Hotjar</a></li></ul> <hr /> <h2 id="introduction">Introduction to Hotjar</h2> In the simplest words, <a href="https://www.hotjar.com/" target="_blank" rel="noopener">Hotjar</a> allows you to understand how users behave on your site, where they click, scroll, and generally how they respond to your content. <img class="size-full wp-image-13285" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d3d6eb35c6618a0d0eaf_d566e9ec_1-1.webp" alt="Image 1 - Hotjar homepage" width="2398" height="2006" /> Image 1 - Hotjar homepage <h3>Hotjar Features</h3> The two most interesting options are <i>Heatmaps</i> and <i>Recordings</i>. Heatmaps allow you to visually represent where users click, move, and scroll on your site, allowing you to understand and analyze their behavior. On the other hand, recordings give you access to live playback of users on your site. You can examine each recording individually, monitor clicks, scrolls, and much more. <h3>Hotjar Pricing</h3> Just like any worthy service, Hotjar isn't free. Well, there's a free tier available which we used for writing this article. If you want additional features, take a look at their <a href="https://www.hotjar.com/pricing/">pricing charts</a>. It's flexible, and will vary depending on the services you opt for, how many sessions your site has, and whether you choose to pay yearly or monthly. <blockquote>Monitor Shiny app usage like a pro with RStudio Connect. Explore how in this <a href="https://appsilon.com/how-to-pull-shiny-usage-data-from-rstudio-connect-api-setup-guide/" target="_blank" rel="noopener">RStudio Connect API setup guide</a>.</blockquote> That addresses the basics of Hotjar, but <b>how on Earth can you connect it with R Shiny?</b> That's where the Hotjar installation code comes in. More on that in a bit. First, we have to write an R Shiny application. <h2 id="shiny-app">Let's Code and Deploy an R Shiny App</h2> To keep things simple, we'll reuse an R Shiny application from our <a href="https://appsilon.com/monitoring-r-shiny-user-adoption/" target="_blank" rel="noopener">Tools for Monitoring User Adoption</a> article. We also recommend you to read our <a href="https://appsilon.com/how-to-share-r-shiny-apps/" target="_blank" rel="noopener">How to Share R Shiny Apps</a> article, because Hotjar will only work on apps that are live on the Internet. So no, localhost won't work. <blockquote>Create <strong>enterprise-grade Shiny apps</strong> like a full-stack software engineer with <a href="https://appsilon.github.io/rhino/articles/explanation/what-is-rhino.html" target="_blank" rel="noopener"><strong>Rhino</strong> - an opinionated framework focusing on best practices and development tools</a>.</blockquote> The following code snippet creates a dashboard that applies a clustering algorithm to the Iris dataset and lets you change the columns you want to see on a scatter plot: <pre><code class="language-r">library(shiny) <br>ui &lt;- fluidPage(    headerPanel("Iris k-means clustering"),    sidebarLayout(        sidebarPanel(            selectInput(                inputId = "xcol",                label = "X Variable",                choices = names(iris)            ),            selectInput(                inputId = "ycol",                label = "Y Variable",                choices = names(iris),                selected = names(iris)[[2]]            ),            numericInput(                inputId = "clusters",                label = "Cluster count",                value = 3,                min = 1,                max = 9            )        ),        mainPanel(            plotOutput("plot1")        )    ) ) <br>server &lt;- function(input, output, session) {    selectedData &lt;- reactive({        iris[, c(input$xcol, input$ycol)]    })    clusters &lt;- reactive({        kmeans(selectedData(), input$clusters)    })    output$plot1 &lt;- renderPlot({        palette(c(            "#E41A1C", "#377EB8", "#4DAF4A", "#984EA3",            "#FF7F00", "#FFFF33", "#A65628", "#F781BF", "#999999"        )) <br>        par(mar = c(5.1, 4.1, 0, 1))        plot(selectedData(),            col = clusters()$cluster,            pch = 20, cex = 3        )        points(clusters()$centers, pch = 4, cex = 4, lwd = 4)    }) } <br>shinyApp(ui = ui, server = server)</code></pre> For deployment, we'll use <a href="https://www.shinyapps.io/" target="_blank" rel="noopener">shinyapps.io</a>. Once you have your account configured, run the following command in the R console to deploy the application: <pre><code class="language-r">rsconnect::deployApp("&lt;path-to-a-folder-where-your-shiny-app-is-stored&gt;")</code></pre> After a couple of seconds, a new browser tab will open with a live version of your Shiny app: <img class="size-full wp-image-13287" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d3d72a88faf6f30d7a7e_44819c30_2-1.webp" alt="Image 2 - Deployed R Shiny application" width="2398" height="2006" /> Image 2 - Deployed R Shiny application Deployment, check! Now we have to figure out how to connect R Shiny and Hotjar. As always, there's a straightforward solution. <h2 id="connect">How to Connect R Shiny and Hotjar</h2> This is where the fun part begins. By now, you should have a Hotjar account registered and the R Shiny app deployed. Once you're in the Hotjar dashboard, click on the "Setup" button. A page like this one should appear: <img class="size-full wp-image-13289" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d3d898e589523cc3f5a1_40bbc2b8_3-1.webp" alt="Image 3 - Hotjar installation page" width="2398" height="2006" /> Image 3 - Hotjar installation page As soon as you click on the "Add code manually" button, you'll see a code snippet you can copy: <img class="size-full wp-image-13291" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d3d8dfb1b34228f9d110_165480c6_4-1.webp" alt="Image 4 - Hotjar embeddable code snippet" width="2398" height="2006" /> Image 4 - Hotjar embeddable code snippet Now, this code snippet will work out of the box for regular websites and apps. R Shiny is a bit different. You'll need to create a <code>www</code> folder in the app root directory, and a <code>hotjar.js</code> file inside it. Once done, copy only the JavaScript portion of the snippet. For reference, you should end up with something like this: <img class="size-full wp-image-13293" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d3d99202e0e026254a7d_f3a37eec_5-1.webp" alt="Image 5 - Contents of the hotjar.js file" width="2016" height="454" /> Image 5 - Contents of the hotjar.js file Almost there. You'll also need to include this <code>hotjar.js</code> file in the head of the R Shiny app. Open <code>app.R</code> and paste the following line inside the <code>ui</code>: <pre><code class="language-r">ui &lt;- fluidPage(    # This line    tags$head(includeScript(paste0(getwd(), "/www/hotjar.js"))),    headerPanel("Iris k-means clustering"),    ...</code></pre> The only thing left to do is to re-deploy the R Shiny app: <pre><code class="language-r">rsconnect::deployApp("&lt;path-to-a-folder-where-your-shiny-app-is-stored&gt;")</code></pre> <img class="size-full wp-image-13295" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d3dc9202e0e026254d76_5452a11c_6-1.webp" alt="Image 6 - Re-deploying the R Shiny application" width="2198" height="646" /> Image 6 - Re-deploying the R Shiny application That's all! On the Hotjar home page, you should now see that the Hotjar was successfully installed to your Shiny app: <img class="wp-image-13297 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d3dd4e6cc45db1fa379e_cbff489d_7.webp" alt="Image 7 - Hotjar home page success message after installing Hotjar in R Shiny app" width="2398" height="2006" /> Image 7 - Hotjar home page success message <h2 id="monitor">Monitor Shiny App User Behavior Analytics in Hotjar</h2> And now to monitor user behavior. Choose the <i>Heatmap</i> option on the left side menu. Create a new Heatmap, and paste your application's URL in the popup window: <img class="wp-image-13299 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d3de00fd9b7af1335dcd_b88a4805_8.webp" alt="Image 8 - Creating a new heatmap on Hotjar to see app user behavior" width="2398" height="2006" /> Image 8 - Creating a new heatmap on Hotjar Once done, you should see heatmaps of user sessions shortly. And that's how you can combine Hotjar with R Shiny for optimal user behavior monitoring. NOTE: Depending on the framework your using, you might run into difficulties showing valid heatmaps. Meaning, that your setup may be correct and accepted in Hotjar, but the heatmap output will show odd results. If this is the case, consider testing another framework or try out other monitoring options like <a href="https://github.com/RinteRface/shinyHeatmap" target="_blank" rel="noopener">shinyHeatmap</a> (an R package for designed specifically for Shiny app usage tracking). Let's wrap things up next. <hr /> <h2 id="summary">Summary of Hotjar for R Shiny User Analytics</h2> Being able to monitor how users interact with your data product is more or less a requirement nowadays. If you aren't optimizing for your users, they'll look for better options elsewhere. Luckily, tools like Hotjar make the entire process easy. It's important to incorporate user adoption monitoring and metrics when building your user adoption strategy. The success of your Shiny app depends on the level of adoption. And without knowing user behavior, either through <blockquote>Is your UX design a little rough around the edges? Cover these <a href="https://appsilon.com/ux-design-of-shiny-apps-7-steps-to-design-dashboards-people-love/" target="_blank" rel="noopener">7 steps to design dashboards people will love</a>.</blockquote> If you don't want to pay a monthly (or yearly) fee to use Hotjar, you should consider <a href="https://appsilon.com/monitoring-r-shiny-user-adoption/">using logs to monitor user behavior</a>. It's a free alternative but requires more involvement from your end. Which tool do you use to monitor user adoption in R Shiny apps? Please let us know in the comment section below. Also, don't hesitate to hit us on Twitter - <a href="@appsilon" target="_blank" rel="noopener">@appsilon</a>. We'd love to hear your input. <blockquote>Considering a carreer as an R Shiny developer? <a href="https://appsilon.com/how-to-start-a-career-as-an-r-shiny-developer/" target="_blank" rel="noopener">Our complete guide for beginners has answers to your questions</a>.</blockquote>