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

Being able to monitor user behavior lets you know why something works (or doesn’t) in your dashboard. It helps build your user adoption strategy with user behavior analytics. So what’s the best tool for the job? It’s Hotjar for R Shiny. And 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 heatmaps 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.

Looking for an alternative way to monitor user adoption in R Shiny? Try out these three options.

Table of contents:

• Introduction to Hotjar
• Let’s Code and Deploy an R Shiny App
• How to Connect R Shiny and Hotjar
• Monitor Shiny App User Behavior in Hotjar
• Summary of R Shiny Hotjar

Introduction to Hotjar

In the simplest words, Hotjar allows you to understand how users behave on your site, where they click, scroll, and generally how they respond to your content.

Image 1 – Hotjar homepage

Hotjar Features

The two most interesting options are Heatmaps and Recordings. 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.

Hotjar Pricing

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 pricing charts. 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.

Monitor Shiny app usage like a pro with RStudio Connect. Explore how in this RStudio Connect API setup guide.

That addresses the basics of Hotjar, but how on Earth can you connect it with R Shiny? That’s where the Hotjar installation code comes in. More on that in a bit.

First, we have to write an R Shiny application.

Let’s Code and Deploy an R Shiny App

To keep things simple, we’ll reuse an R Shiny application from our Tools for Monitoring User Adoption article.

We also recommend you to read our How to Share R Shiny Apps article, because Hotjar will only work on apps that are live on the Internet. So no, localhost won’t work.

Create enterprise-grade Shiny apps like a full-stack software engineer with Rhino – an opinionated framework focusing on best practices and development tools.

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:

library(shiny)

ui <- 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")
        )
    )
)

server <- function(input, output, session) {
    selectedData <- reactive({
        iris[, c(input$xcol, input$ycol)]
    })
    clusters <- reactive({
        kmeans(selectedData(), input$clusters)
    })
    output$plot1 <- renderPlot({
        palette(c(
            "#E41A1C", "#377EB8", "#4DAF4A", "#984EA3",
            "#FF7F00", "#FFFF33", "#A65628", "#F781BF", "#999999"
        ))

        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)
    })
}

shinyApp(ui = ui, server = server)

For deployment, we’ll use shinyapps.io. Once you have your account configured, run the following command in the R console to deploy the application:

rsconnect::deployApp("<path-to-a-folder-where-your-shiny-app-is-stored>")

After a couple of seconds, a new browser tab will open with a live version of your Shiny app:

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.

How to Connect R Shiny and Hotjar

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:

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:

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 www folder in the app root directory, and a hotjar.js file inside it. Once done, copy only the JavaScript portion of the snippet.

For reference, you should end up with something like this:

Image 5 – Contents of the hotjar.js file

Almost there. You’ll also need to include this hotjar.js file in the head of the R Shiny app. Open app.R and paste the following line inside the ui:

ui <- fluidPage(
    # This line
    tags$head(includeScript(paste0(getwd(), "/www/hotjar.js"))),
    headerPanel("Iris k-means clustering"),
    ...

The only thing left to do is to re-deploy the R Shiny app:

rsconnect::deployApp("<path-to-a-folder-where-your-shiny-app-is-stored>")

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:

Image 7 – Hotjar home page success message

Monitor Shiny App User Behavior Analytics in Hotjar

And now to monitor user behavior. Choose the Heatmap option on the left side menu. Create a new Heatmap, and paste your application’s URL in the popup window:

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. Let’s wrap things up next.

Summary of Hotjar for R Shiny User Analytics

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

Is your UX design a little rough around the edges? Cover these 7 steps to design dashboards people will love.

If you don’t want to pay a monthly (or yearly) fee to use Hotjar, you should consider using logs to monitor user behavior. 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 – @appsilon. We’d love to hear your input.

Considering a carreer as an R Shiny developer? Our complete guide for beginners has answers to your questions.

The post R Shiny Hotjar – How To Monitor User Behavior in R Shiny Apps appeared first on Appsilon | Enterprise R Shiny Dashboards.