Does your website use a Content Security Policy (CSP) that stops your OptinMonster campaigns from loading or tracking? OptinMonster only needs a few of its own domains, plus 2 small settings, added to your policy to work as expected. In this article, you’ll learn how to set up your CSP for OptinMonster.
Before You Start
- A CSP is a set of rules your website sends to the browser. It lists the domains that can load scripts, styles, images, and other files on your pages. You can read more about it in Mozilla’s guide to Content Security Policy.
- Your web server, hosting company, CDN, or a security plugin usually sets your CSP. That’s why this is often a job for your developer.
- You don’t need to change any settings in OptinMonster. Instead, every change in this guide happens in your site’s CSP.
Understanding How a CSP Affects OptinMonster
First, when a page loads, the OptinMonster embed code loads our script from a.omappapi.com. Next, that script gets your campaign’s settings and design. It also loads your campaign’s images and styles. Finally, it sends a small request each time a visitor sees or converts on your campaign.
However, if your CSP doesn’t allow these domains, your visitor’s browser blocks them. Then your campaign doesn’t show up, shows up without its design, or doesn’t record its impressions and conversions in OptinMonster.
Important: Adding OptinMonster to default-src isn’t enough
Your visitor’s browser only uses default-src for file types your policy doesn’t list. If your policy has script-src, style-src, img-src, or connect-src, you’ll need to add OptinMonster to each of those directives.
Adding OptinMonster to Your CSP
To allow OptinMonster in your site’s CSP, add these values to the matching directives in your policy:
- script-src:
https://a.omappapi.comand'unsafe-inline' - style-src:
https://a.omappapi.comand'unsafe-inline' - img-src:
https://a.omappapi.comanddata: - connect-src:
https://api.omappapi.com,https://a.omappapi.com, andhttps://z.omappapi.com
Also, if your policy has script-src-elem or style-src-elem, add the same values to those directives.
The OptinMonster embed code is a small inline script. This includes the code our WordPress plugin adds to your site. That’s why script-src needs 'unsafe-inline'. However, if your policy uses a nonce, add your nonce to the embed code’s <script> tag instead. Then you can leave 'unsafe-inline' out of script-src.
OptinMonster also uses inline styles to design your campaigns. So, style-src needs 'unsafe-inline' as well. Without it, your campaign loads without its design.
Allowing Optional Features
Some campaign features load files from other domains. For example, a YouTube video loads from YouTube. If your campaigns use any of these features, add their values to your policy as well:
- Google Fonts: add
https://fonts.googleapis.comtostyle-src, andhttps://fonts.gstatic.comtofont-src. - YouTube videos: add
https://www.youtube.comtoframe-src. - Vimeo videos: add
https://player.vimeo.comtoframe-src. - Display rules that target ad blocker users: add
https://a.optinmonster.comtoscript-src. - Google reCAPTCHA: add
https://www.google.com/recaptcha/andhttps://www.gstatic.com/recaptcha/toscript-src. Next, addhttps://www.google.com/recaptcha/andhttps://recaptcha.google.com/recaptcha/toframe-src. Then, addhttps://www.google.com/recaptcha/toconnect-src. Google lists these values in its reCAPTCHA FAQ.
Location targeting uses api.omappapi.com, which is already in your connect-src list. Also, sound effects don’t need any extra domains.
If you use custom domains for OptinMonster, also add the 2 subdomains you set up to each of the directives above.
Testing Your CSP
To check that OptinMonster works with your updated policy, follow these steps:
- First, open a page on your site where your campaign is set to appear.
- Next, open your browser’s developer tools and select the Console tab.
- Then, reload the page.
- After that, look for a message that names an OptinMonster domain, like
a.omappapi.com.
If you don’t see messages like that, and your campaign appears with its design, your policy is working. Is your campaign still missing while you test? Our guide to testing your OptinMonster campaigns shows you how to clear your cookies and check your display rules.
Troubleshooting
Why isn’t my campaign showing after I updated my CSP?
Your policy most likely still blocks one of the OptinMonster domains. To find it, open your browser’s Console tab. Then, look for a message that says a file violates a Content Security Policy directive. The message names the directive, like script-src-elem or connect-src. That way, you’ll know exactly where to add the domain.
Why does my campaign appear without its design?
Your policy is blocking OptinMonster’s inline styles. To fix it, add 'unsafe-inline' to style-src, and to style-src-elem if your policy has it.
Why does OptinMonster show 0 conversions when Google Analytics shows conversions?
Your policy is most likely missing https://z.omappapi.com in connect-src. Your campaign uses that domain to record impressions and conversions in OptinMonster. Once you add it, OptinMonster records new impressions and conversions from then on.
I added OptinMonster to default-src. Why does my browser still block it?
Your browser ignores default-src for any directive your policy already sets. So, if your policy has script-src, style-src, img-src, or connect-src, add the OptinMonster values to each of those directives.
FAQs
Can I use a wildcard instead of listing each OptinMonster domain?
Yes, you can use https://*.omappapi.com in place of https://a.omappapi.com, https://api.omappapi.com, and https://z.omappapi.com in each directive. The wildcard doesn’t cover https://a.optinmonster.com. So, add that one on its own if you target ad blocker users.
Do I need different settings for mobile visitors?
No, your campaigns load the same OptinMonster domains on mobile, tablet, and desktop devices.
Do MonsterEffects or sound effects need extra domains?
No, both work with the values in the main list above.
