Gumroad Embeds not working with Cloudflare
I came across an issue I couldn’t find a fix for, so I am writing an article, so that others might see a solution if they’re coming across the same issue.
TLDR: If you use Cloudflare, it proxies javascript files through a loader — you need to disable this to allow the Gumroad widget to run.
When using Gumroad’s “embedded” widget to sell a product on a page, it uses a little javascript loader to add functionality into the page:
<script src="https://gumroad.com/js/gumroad-embed.js"></script>
<div class="gumroad-product-embed" data-gumroad-product-id="XXXX"><a href="https://gumroad.com/l/XXXX">Loading...</a></div>I implemented this on my local development environment, and it was working absolutely fine — but when deployed to the live environment, the embedded widget just didn’t load. I couldn’t see anything wrong with it — so looked into the source via Chrome’s Inspector — and saw that it was being proxied through Cloudflare’s “Rocket Loader”.
My sites are all proxied through Cloudflare: it helps reduce the load on my hosting, and offers brilliant DNS management — as well as lots of caching and performance benefits — but it sometimes gets in the way of things like inbound API calls, webhooks, etc.
Even turning on “Developer Mode” wouldn’t fix the issue, but after some digging, I found this article on disabling Rocket Loader for specific pages or specific tags.
It stated that you can add a property to a javascript tag to exclude it from being loaded via Rocket Loader:
<script data-cfasync="false" src="/javascript.js"></script>Adding the data-cfasync property seems to avoid the proxy altogether.
You can also add a page rule to switch off Rocket Loader for specific pages.
So the updated Gumroad embed would be:
<script data-cfasync="false" src="https://gumroad.com/js/gumroad-embed.js"></script>
<div class="gumroad-product-embed" data-gumroad-product-id="XXXX"><a href="https://gumroad.com/l/XXXX">Loading...</a></div>I hope that helps anyone else who finds their Gumroad Embed not loading.
