but the thing is my canva sites has an
but the thing is my canva sites has an explicit CSP which blocks external scripts.. ive tried everything including server side loading, subdomain cloudflare worker, but the only thing that happened is that my analytics did show data, but it was the worker webpage ðŸ˜
32 Replies
Can you provide more details into how you've got it setup now?
okay give me a minute
okay so currently im trying to use Zaraz to load analytic scripts into my website hosted on Canva built using Canva Sites
since Canva doesn't allow direct html into their website, i tried using a cloudflare worker to modify the html file of the website to include the scripts
ill just screenshot the code
code for the cloudflare worker
Okay, I'm not super familiar with Canva's sites, so if I'm missing something lmk. This guide offers suggestions for how to instal GA4 via GTM. They're suggesting that you embed the tag script into the site and make the embed 1x1 pixel so that it is super tiny. https://www.blobr.io/how-to-guides/how-can-you-add-google-analytics-to-your-canva-website
You can then include Zaraz like this (assuming your canva site is "grey clouded" :greycloud: DNS: https://developers.cloudflare.com/zaraz/advanced/domains-not-proxied/
Basically the same style setup as the article suggests you do with GTM, but using Zaraz.
Would that work with the limitations you've ran into? It wouldn't require you using a worker.
okay so the problem is Canva Sites does NOT allow ANY single script to be embedded into it
soo thats that
https://www.blobr.io/how-to-guides/how-can-you-add-google-analytics-to-your-canva-website
Go to the "Embed" element in Canva.
but the Embed does not exist
How Can You Add Google Analytics to Your Canva Website?
Learn how to seamlessly integrate Google Analytics with your Canva website for valuable insights and tracking capabilities. Step-by-step guide included.
heres a screenshot of the embed feature of canva
if u need the CSP for Canva Sites:
content-security-policy:
frame-ancestors 'self' *.canva.com canva.com;
report-uri https://csp.canva.com/_cspreport?app=websites;
base-uri 'self';
object-src 'none';
script-src 'report-sample' 'strict-dynamic' 'nonce-XXXXXX' https://www.google.com/recaptcha/api.js;
i found this from digging into the console
Got it. That's very limiting
Here's another article on adding GTM/GA4 that would be the same process for Zaraz (but these articles could just be wrong)
https://www.asclique.com/blog/how-to-embed-google-analytics-in-canva-website/
ive contacted Canva about this, here was their reply:
We understand you're looking to add custom HTML to your Canva sites. Let me check it for you.
Currently, adding custom HTML to Canva websites is not supported as Canva aims to provide a no-code platform for easy website creation without the need for HTML coding, allowing anyone to effortlessly create beautiful websites without the need to write or modify HTML. However, we’re happy to hear your feedback and will make sure to forward it to our product team for consideration.
We appreciate your feedback and understand how important this feature might be for your projects.
We are always open to product improvement and appreciate your thoughts on how we can continuously improve our features based on your feedback.
We appreciate your understanding as we continue working on improving Canva. If you have any other questions or concerns, don’t hesitate to let us know.
Go to the Custom Code Section:
Though Canva offers few customizations on websites, you can insert custom code here. Using the website publishing settings option, look for an option to insert the custom code.
Paste in your Canva site IF Canva supports limited embedding of HTML
soo i guess
its not going to work for my case scenario
the thing is my MS Clarity is indeed working
but its picking up from the worker page
Ah, okay, well I guess that article is probably AI or something.
so i guess my setup is correct, but its not injecting into the website?
Yeah, if you're loading Zaraz on a zone, if you have a Worker on that Zone it should be loading Zaraz and the tools you have setup in Zaraz.
Unfortunantly it seems like you're going to be pretty limited with using Canva pages in what you can do. I know that isn't great news
like its kinda at the wrong page.. since i want the analytics to be on my intended website, not the worker website
haha i mean, ive been on this for a few days soo dont worry about the great/bad news
but im just wondering whether there is a way to do this?
like what i want to do..
This is becasue your Worker is proxied by Cloudflare which lets Cloudflare add Zaraz to it. Canva sites requires you to "grey cloud" or DNS only your DNS record to them. This mean that Cloudflare, for that DNS record, acts like a "dumb" DNS provider and isn't providing all of the perf and security features that it can do on sites it proxies. As such, Zaraz isn't automatically loaded and must be manually load by adding a script tag (but it seems that Canva doesn't allow for this).
https://www.canva.com/help/dns-settings/#:~:text=Cloudflare%20proxied%20records
Re: A way to do it.
Since Canva requires the sites to be grey clouded you're more limited in what you can do. Ultimately unless there's some sort of trick for doing it in Canva, you're probably going to have to leave Canva for another tool.
oh the thing is, my dns is orange cloud
this is what you mean by orange cloud right?
the grey cloud is for the status page, should have nothing to do with my current needs
Oh interesting. Idk the answer to that. It seems like canva wants you to grey cloud for sites with them but if it is working, idk.
Yes, DNS Only = Grey Cloud
oh haha they want us to turn it off i guess
shouldnt be a big issue?
i mean if i turn it to DNS theres no security protection?
could i just wrap my cloudflare around the canva sites..
If you turn it off there's no security protection coming from your cloudflare account, but Canva's security protections will still work. Can't say wheather leaving it on will help or hurt the site overall. Often places that want you to grey cloud do not work if it isn't done, but if it is working, it might be fine, but who knows.
proxy the entire thing through cloudflare
Can you expand on that? Based on screenshots it seems that you're proxying it right now
take the html from the canva site
pull the html into cloudflare
rewrite the header with the analytics
resend it to the user
would that be possible..
Probably. Can't say for sure, but if I had to use Canva and Clarity, that's what I think I'd do too. But does the increased complexity still make sense vs. using another way to build the site?
sorry for the late reply haha
wait lemme try it out
hey
that way turned out to work
Awesome!