Skip to main content

How do I test the implementation of the Usercentrics CMP with DevTools (on a staging server)?

Updated

This needs to be done up front

Implement the CMP Version 2 directly in the <head> section of the website (recommended) or via the Google Tag Manager.

How to test the implementation of the banner

In the following example, we use the Google Analytics script via a Google Tag Manager implementation. Make the appropriate adjustments for your script.

Before:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-48124418-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  
  gtag('config', 'UA-48124418-1');
</script>

After:

<script 
  type="text/plain"
  data-usercentrics="Google Analytics" 
  async 
  src="https://www.googletagmanager.com/gtag/js?id=UA-48124418-1"
></script>
<script type="text/plain" data-usercentrics="Google Analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  
  gtag('config', 'UA-48124418-1');
</script>

Important: As there are 2 separate script-tags that are responsible for Google Analytics, both tags must be “blocked” through Usercentrics. So we add a type="text/plain" and also a data-usercentrics="Google Analytics" attribute to both.

  • Open the website in a browser (e.g. Google Chrome) without interacting with the banner.
  • Open the developer tools (right click on any item > Examine).
  • Expand the <head> section by clicking on the arrow on its left.

In the <head> area, look for the script you customized

  • In the developer tools, switch to the network column
  • Examine the network calls. In our case we are looking for a call from the domain googletagmanager.com. Remember: this should not occur because you have not yet interacted with the CMP.
  • (If you do not see the "Domain" column, you can add it by right-clicking on the top line to open a menu where you can "Choose Domain").

After making sure that no network call went to googletagmanager.com, click on "Accept" in the banner.

  • Under the Elements column, the indicator of the Google Analytics script should have changed from type="text/plain" to type="text/javascript".
  • Now, switch back to the network column. A network call should now have gone to a domain that contains googletagmanager.com.

Can I test the Usercentrics JavaScript on a staging server that's on a different domain?

Yes, you can test the Usercentrics JavaScript on a separate staging server, even it if’s running on a different domain. Please implement the script on that server using one of our manuals: