In addition to the article titled Hotjar providing basic explanations about the Hotjar application, this article will cover the setup process for the tools under the “Hotjar Analytics” section, starting from the initial setup.
After Hotjar user login, we can view the activities of the last 24 hours (heapmap, recording, funnel, poll, survey, recruiter registration counts, user actions, etc.). After this stage, we can begin configuring the installations within the Analytics section. Of course, I assume that we have already integrated our code into the site and approved the installation.
You can reach out for support regarding Hotjar.
Hotjar Analytics Installations
I will walk through sample operations using the domain ornekwebsitesi.com. Our first implementation will be setting up Heatmaps. I’ve already installed the Grav setup on ornekwebsitesi.com with the machine theme and test content1.
Heatmap Installation
For the Heatmap installation, I will include only the blog section of the website. Basic users can create three different heatmaps. For other installations, you can implement them on the homepage and contact page (or on the sales page if you have product or service sales pages that you direct users to).
Name field, assign a general name, and under Number of Pageviews, select 1,000 within the Basic package. Choose Visit one of multiple similar pages in the Page Targeting field, and set the Enter Page URL field to URL starts with with the URL value https://ornekwebsitesi.com/blog/. This enables a unified evaluation of all page interactions under the /blog/* path, even though the content varies across these otherwise identical pages. Additionally, as shown in the relevant image, I specified that the heatmap recording should exclude the div.footer element, under Advanced options > Exclude Elements From Heatmap, to ensure it is not captured in the heatmap data.
You can select the Visit a specific page option to record a single page. In the Enter Page URL section, selecting Exact URL match will ensure that only the specific page you specify (for example, https://ornekwebsitesi.com/form/contact) is recorded. When selecting Visit one of multiple similar pages, changes will also occur in the Enter starts with option. This allows you to define specific URL patterns such as the URL starts with (for example, https://ornekwebsitesi.com/blog/), URL ends with (for example, /form/contact), URL contains (for example, “blog”), or URL regular expressions (for example, /products/*), using a predefined pattern.
Recordings Setup
The Basic package allows up to 100 page visits to be recorded. By selecting Visit any page in the Page Targeting step, all pages can be recorded. To record a specific page, you must select the Visit a specific page OR a JavaScript trigger fires option. However, this option requires a Plus plan.
Recording Options allow you to filter visitor behavior. Under this heading, Only click & scroll sessions will start recording if the visitor performs actions such as clicking or scrolling on the page they visit. Another option is Only 30s+ sessions. With this setting, any session lasting over 30 seconds will be included in the recording. The final option is Record keystroke data. With this setting, keyboard actions are recorded in the form of ***. This enables you to see actions performed on forms, but you will not be able to view the actual data. For more details, refer to the Whitelisting Input Fields documentation.
Funnel Setup
Funnels define a scenario for visitors. For example, a visitor viewing products, adding an item to their cart, viewing the cart, and completing the checkout process represents a targeted workflow for product sales, and they should not drop off during this process.
Therefore, all obstacles on the user journey (elements that distract the visitor) are removed, and a seamless experience is aimed for. In such cases, we predict visitors’ behaviors and carry out actions accordingly. At this point, we can use Hotjar’s Funnels feature to evaluate whether a situation has gone unnoticed, by analyzing not only predictions but also user actions. Of course, this process is not targeted at sales. A form submission or email signup can also be evaluated through a similar process. After naming the funnel, we can proceed to the Step field. In this field, a direct match with the field name (e.g. https://ornekwebstesi.com/), an exact match with the full URL (e.g. https://ornekwebsitesi.com/blog/it-is-a-long-established-fact-that-a-reader-will-be-distracted), a startswith match (e.g. https://ornekwebsitesi.com/blog/), an endswith match (e.g. /it-is-a-long-established-fact-that-a-reader-will-be-distracted), a contains match (e.g. /blog/), or a regular expression pattern can be defined as a step.
The visual above defines the funnel as the process of reading a blog and/or a specific blog post from the Home page, followed by viewing the contact page. Within the funnel content, it enables a 5-step definition when targeting Google Analytics E-commerce, while using Hotjar to define over 50 steps. Naturally, the more steps in the funnel, the greater the drop-off rate among visitors, and the analysis process will become increasingly complex due to the growing number of influencing factors. With Forms, you can track visitor actions on forms such as registration, login, address, content comments, product and service feedback, suggestions, and similar purposes on your web page. Especially in long forms, as noted in the funnel header, visitors’ attention may disperse and/or their motivation or interest may diminish due to form length. In such cases, making adjustments on the form would be appropriate. On the other hand, unexpected issues may arise in form controls (e.g., auto-filling, field selection, invalid email addresses, etc.). Such issues must also be identified and resolved. Hotjar’s Forms feature will typically automatically detect the form located at the defined URL and will display the relevant fields (text, textarea, select, checkbox, radio button) as headings within the panel.
Basic registration allows up to 1,000 session records2.
In the Details section, simply assign a name for the relevant form action and enter the URL where the form is located in the Page URL field—this will be sufficient for the setup. In the Form fields section, you will be able to view the name definitions (if not already defined, fields will be listed as Field 1, Field 2, Field 3, etc.) for the fields (text, textarea, select, checkbox, radio button) belonging to the form specified in the Page URL field.
If multiple forms are defined on the page, each form must be specified separately and one form must be selected. Hotjar tracks only one form per page.
Issues may arise during form definition and submission. For such situations, please refer to the Troubleshooting FAQs for Forms3 and Track Form Submission With JavaScript4 pages.
Recommendations for Using Hotjar
With Hotjar’s Analytics features, you can easily access detailed insights about your website and take actions to improve the user experience. Particularly, within Analytics, you can gain detailed insights into funnel and form conversion processes, while using Heatmaps and Records, you can gain insights into content and product/ad placement. The Basic plan is sufficiently sufficient as a starting point. If you have any questions or encountered issues during the setup, simply leave a comment.