JavaScript rendering

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

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

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.

JavaScript Rendering in ContentKing

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

However, you can enable JavaScript Rendering which will allow ContentKing 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 ContentKing will be based on the rendered DOM.

Only for verified websites

Executing JavaScript assets on websites increases the data traffic of ContentKing’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 ContentKing is only available for verified websites. More about this here

To verify a website in ContentKing, 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 ContentKing, follow these steps:

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

Once you enable the JavaScript Rendering feature, ContentKing 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, ContentKing blocks requests to the most common web analytics and ad services to ensure that your web analytics data don’t get inflated by ContentKing’s monitoring.

This means that if you’re using a common JavaScript-based web analytics solution such as Google Analytics or Adobe Analytics, ContentKing’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 ContentKing’s monitoring doesn’t affect your analytics data, make sure to configure custom on-page request blocking in ContentKing.

Custom on-page request blocking

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

1. Go to the Monitoring tab of the Settings
2. In the top-right corner of the JavaScript Rendering section click Edit and then click change next to the On-page request blocking setting.
3. 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.
4. Define which requests will be allowed/denied using the Operator (more about the operators here) and the URL Pattern.
5. 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, ContentKing 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:

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

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

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.

Need help?

If you have any questions about the JavaScript Rendering feature or you need a hand setting up the on-page request blocking, don’t hesitate to contact us and we will be happy to help!

Useful resources

• JavaScript SEO Beginner's Guide