Javascript Rendering in Conductor Monitoring

Product

MonitoringWhat is Conductor Monitoring?

Conductor Platform

Plan

What is my plan?

Essentials

Growth

Enterprise

+ Add-on Required

As search engines are nowadays able to render JavaScript websites such as those built in AngularJS, Backbone or React, Conductor Monitoring is also able to execute JavaScript when monitoring websites.

This article describes how to enable and manage JavaScript Rendering in Conductor Monitoring.

This is a highlight box. The borders that appear in the editor and this explainer will not appear in the published article. Use the Title and Body below for examples, best practices, or other information you'd like to call out.

Important

Although Google is able to understand websites relying on JavaScript, it's still a best practice to avoid requiring JavaScript rendering if possible. You can read more about this here.

End of Highlight box

JavaScript Rendering in Conductor Monitoring

By default, Conductor Monitoring picks up all on-page elements from the HTML source code of the website.

However, you can enable JavaScript Rendering which will allow Conductor Monitoring to pick up elements from both the HTML source code as well as the full rendered DOM.

With this feature enabled, all tracked changes, issue auditing, and alerts in Conductor Monitoring will be based on the rendered DOM.

Only for verified websites

Executing JavaScript assets on websites increases the data traffic of Conductor Monitoring’s monitoring and – if configured incorrectly – can also lead to analytics data inflation.

To prevent abuse of this feature and protect our users’ websites, the JavaScript Rendering feature in Conductor Monitoring is only available for verified websites. More about this here.

To verify a website in Conductor Monitoring, you need to enable the Google Search Console integration or install the Cloudflare Worker.

If connecting Google Search Console or installing the Cloudflare Worker isn’t possible for you, please contact us for manual website verification.

Once you have one of the integrations set up, you can enable JavaScript Rendering.

Enabling JavaScript Rendering

To enable JavaScript Rendering for a website in Conductor Monitoring, follow these steps:

Go to Settings and then to the Monitoring tab.
Click Edit* in the top-right corner of the JavaScript Rendering section.
Enable JavaScript Rendering using the toggle.
After you enable the toggle, configure custom request blocking if needed (more about this below).
Click Save.

Once you enable the JavaScript Rendering feature, Conductor Monitoring will start monitoring the full rendered DOM together with the HTML source code.

Effect on web analytics data

When monitoring a website with JavaScript Rendering enabled, Conductor Monitoring blocks requests to the most common web analytics and ad services to ensure that your web analytics data don’t get inflated by Conductor Monitoring’s monitoring.

This means that if you’re using a common JavaScript-based web analytics solution such as Google Analytics or Adobe Analytics, Conductor Monitoring’s monitoring does not have any effect on your web analytics data.

If you’re using a non-standard web analytics solution and you want to ensure that Conductor Monitoring’s monitoring doesn’t affect your analytics data, make sure to configure custom on-page request blocking in Conductor Monitoring.

Custom on-page request blocking

To configure custom on-page request blocking, follow these steps:

Go to the Monitoring tab of Settings
In the top-right corner of the JavaScript Rendering section, click Edit, and then click change next to the On-page request blocking setting.
In the window that appears, choose whether you want to use a deny-list (Allow all except) or an allow-list (Deny all except) to configure the request blocking.
Define which requests will be allowed or denied using the Operator (more about the operators here) and the URL Pattern.
Click Apply changes.

How do I know which requests I should block?

If you’re using a non-standard or custom analytics or ads service, you may need to block requests to these services to prevent inflating statistics.

As mentioned above, Conductor Monitoring blocks all major analytics and ad services (such as Google Ads, Google Analytics, Adobe Analytics, Hotjar, Mouseflow, etc.) out of the box, so if you are using these, you don’t need to set up custom request blocking.

In case you’re using a custom analytics or ad service, make sure to configure on-page request blocking according to the steps above.

If you are not sure what requests are actually being made by search engines and clients (browsers) when visiting your website, you can easily check this using the browser console:

In your browser, go to the website for which you want to enable JavaScript Rendering.
Open the browser console (in Google Chrome: right-click, then Inspect) and go to the Network tab.
Reload the page.
In the Network tab you will see all the requests that are being made by the browser.

These requests will also be made by Conductor Monitoring when the JavaScript Rendering feature is enabled.

contentking-javascript-rendering-browser-console@2x.png

If you are experiencing inflated statistics and you see any requests related to your analytics or any other tracking solution (such as affiliate tracking), make sure to block requests to these domains as described above.

Do I need to enable JavaScript rendering in Conductor Monitoring?

With an add-on to your subscription, you can enable Conductor Monitoring to render JavaScript, allowing our crawler to see your website more like a real user and search engines like Google. This is crucial for websites that rely on JavaScript to dynamically generate content, links, and other important elements.

Learn More!

Need a crash course to understand JavaScript and its role on your website? Check out our JavaScript SEO Best Practices Guide for Beginners article on Conductor’s Academy.

End of Highlight box

Why is JavaScript Rendering important for monitoring?

Websites often use JavaScript to enhance user experience by loading content dynamically. While this can lead to faster perceived loading times for users, it can present challenges for web crawlers that analyze only the initial HTML source code of a webpage. If critical content, links, metadata, or structured data are rendered by JavaScript and not the source HTML, a crawler that doesn't also execute that JavaScript will miss this information, leading to incomplete and potentially inaccurate insight into your monitoring and performance.

Customers should consider enabling JavaScript Rendering in Conductor Monitoring if their site is JavaScript-heavy, or if key content or elements are loaded or modified through JavaScript and don’t appear in the raw HTML source. This helps ensure Conductor can actually collect the data you care about, whether that’s for reporting or just to prevent issues like missing elements that can happen when rendering isn’t enabled.

How do I know if I should enable JavaScript rendering?

Here are several methods for investigating whether pages on your site would require JavaScript rendering. After reviewing these instructions you find that significant content, links, or metadata are present only after JavaScript execution, then it is recommended that you enable JavaScript rendering in Conductor Monitoring. This will ensure that our crawler sees your website as intended, leading to more comprehensive and accurate monitoring data.

Don’t have JavaScript Rendering included in your Conductor subscription?
Contact Support to learn how to have it added to your account.

End of Highlight box

Use Google Search Console's URL Inspection Tool

This is the most direct way to see how Google (and by extension, a sophisticated crawler with JavaScript rendering enabled) perceives your pages.

Sign into your Google Search Console account.
In the top search bar, enter the URL of a representative page on your website. It's best to test a few different page types (homepage, product page, blog post, etc.).
After the inspection, click View crawled page in the results.
Go to the Screenshot tab and click Test Live URL.
Compare the source HTML in the HTML tab to the image in the Screenshot tab.
- HTML: This shows the initial HTML source code of the page before any JavaScript is executed.
- Screenshot: This shows how Googlebot sees the page after executing the JavaScript.
  
  Analyze the differences:
  - Are there significant differences?
    If the Screenshot contains important content (text, links, images, structured data) that is missing or significantly different in the initial HTML tab, then you likely need to enable JavaScript rendering in Conductor. Without it, Conductor Monitoring might not detect this crucial information on the page.
  - Are there minor differences?
    Small differences in layout or non-essential elements might not necessitate JavaScript rendering for basic monitoring. However, if these elements are part of what you want to track (for example, specific UI elements), rendering might still be beneficial.
  - Are there no differences?
    If the HTML and screenshot are virtually identical in terms of important content, your core information is likely present in the initial HTML, and JavaScript rendering might be less critical for content discovery. However, it might still be needed for link discovery or other dynamic elements you wish to monitor.

Disable JavaScript in Your Web Browser

Disabling JavaScript in your browser provides a visual representation of what your website looks like without JavaScript execution.

Open your preferred web browser.
Disable JavaScript. The method varies slightly depending on your browser:
- Chrome:
  1. Open Chrome’s Developer Tools by right-clicking on the page and selecting Inspect.
  2. Press CMD + Shift + P.
  3. Enter Disable JavaScript.
  4. Refresh the page.
- Firefox: Type "about:config" in the address bar, search for the javascript.enabled setting and set the toggle to "false".
- Safari: Go to Safari > Preferences > Security and clear the Enable JavaScript check box.
Navigate through key pages of your website with JavaScript disabled and observe the Impact:
- Is there missing content or functionality?
  If essential text, images, navigation menus, internal links, or interactive elements disappear, your site relies heavily on JavaScript for rendering these elements. Conductor Monitoring will need to render JavaScript to see them.
- Is the site’s layout broken?
  While some layout disruption is expected, a completely unusable site indicates a strong dependency on JavaScript for the user experience and potentially for content delivery.
- Is the core content present?
  If the main textual content and crucial links are still visible (albeit potentially unstyled), JavaScript rendering might be less critical for basic content discovery. However, dynamic elements you want to monitor will still be missed.

Analyze Your Website's HTML Source Code and Compare the Rendered JavaScript

Directly examining the source code can reveal whether your key content is present in the initial load.

Open a page on your website in your browser.
Right-click anywhere on the page and select View Page Source (or a similar option depending on your browser). Usually this will open another tab in your browser with the source HTML:
- What you see: The raw HTML code of the page. It’s the structure of the page as it was originally sent from the server to your browser. You’ll see the entire HTML document, including all the elements like headings, paragraphs, links, images, etc., as well as embedded CSS and JavaScript (if they are included directly within the HTML).
- What you don’t see: You can’t see the changes that happen after the page has loaded, like dynamic content that is added by JavaScript, or the way elements are styled after the page loads.
Right-click on the page again and select Inspect (or a similar option) to open the browsers Developer Tools. The Inspect tool shows you the HTML, CSS styles, and any JavaScript that’s running on the page. It also lets you interact with the page in real time.
Review the HTML source code and inspect the rendered page for your main textual content, important internal and external links (within <a> tags), meta descriptions, and structured data markup.
- Is key content missing?
  If the core text and important links are not present in the initial HTML but appear when you inspect the rendered page, they are likely being injected by JavaScript. You will need to enable JavaScript rendering for Conductor to monitor this content.
- Do <noscript> tags appear in the source HTML?
  If you see significant content within <noscript> tags, it indicates you are providing fallback content for non-JavaScript environments. While helpful, Conductor Monitoring with JavaScript rendering enabled will see the JavaScript-rendered version.
- Does the source code include empty containers that are not empty when you inspect the rendered page?
  Look for empty <div> or other container elements that contain content on the live site. These are often populated dynamically by JavaScript.