#GTMTips: Google Tag Manager Content Security Policy – News Couple

#GTMTips: Google Tag Manager Content Security Policy

A Content Security Policy (CSP) is something you will configure your web server with to add an extra layer of protection, especially from malicious scripts that are downloaded from third-party vendors. Once you have the CSP in place, all the resources that are loaded and executed by the web page need to pass the CSP directives. For Google Tag Manager, this is very relevant. If you have a CSP applied, you will need to modify it for Google Tag Manager to work properly.

In this short article, I’ll show you the directions you’ll need in order for the GTM to work. In addition to the instructions here, I want you to read the excellent Pontuos article on the same topic. It’s not comprehensive enough when it comes to GTM (which is why I’m writing this article), but it does have more information about CSP in general, and it has instructions on how to get Tags To comply with CSP as well.


Simmer . Newsletter

Subscribe to the Simmer newsletter to get the latest news and content from Simo Ahava right in your inbox!

Tip 81: Google Tag Manager Content Security Policy

First, here are a number of symptoms To search for it, which may help you find out that you have a problem with your CSP:

  • The debug panel does not appear even if you are in preview mode.

  • The patch panel appears, but it has no patterns (see image above).

  • Google Tag Manager won’t load, and you’ll see a Content Security Policy error in the JavaScript console.

CSP error

Google Tag Manager requires you to allow a number of things: inline scripts, inline eval() Use, inline patterns. Listed below are Adjustments You need to include it in the Content Security Policy, so that Google Tag Manager works correctly in both published containers And in preview mode.

thanks for the Wieland Lindenthal For comments that helped make the directions below more accurate.

routing Suspension
script-src 'unsafe-eval' 'unsafe-inline' https://tagmanager.google.com/ https://www.googletagmanager.com/ You need to enable the two domains listed in script-src along with 'unsafe-inline' And 'unsafe-eval' Resources. GTM requires both inline script and eval() To run custom code added by users.
style-src 'unsafe-inline' https://tagmanager.google.com/ https://fonts.googleapis.com/ This directive enables custom styles and fonts in the GTM debug panel.
img-src 'unsafe-inline' https://ssl.gstatic.com/ This directive loads the Google Tag Manager logo image in debug mode.

The first directive is very necessary, the last two directives are useful but not important. However, I recommend including style-src directive, since it is difficult to work in debug mode without the stylesheet.


These simple instructions should help you fix your site’s CSP so that Google Tag Manager is working properly.

I know you might be wary of adding all of these directives, especially because they may introduce issues to your site by being too relaxed. However, Google Tag Manager He is The script injector, so it requires high privileges to work properly on your site. It’s part of the deal when using a tag management solution.

Source link

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button