You are probably as sick of GDPR advice as I am. Well, this is just a simple solution to load external sources like Google Maps, Disqus, Gists from GitHub or anything like that depending on given consent transparently. I’ve tested this solution with Divi, Elementor and Gutenberg even and it is expected to work with any Page Builder sporting a HTML Element or similar. Let me know if it does not and we will try to fix that.
I would not recommend anything to you I’ve not been using enthusiastically myself. Bold links are affiliate links. I recommend what you’ll find there and If you make a purchase, I will get a commission without additional costs to you.
What we first want to do is grab that free but awesome plugin called GDPR. You have most likely seen it in action on this site asking for your consent to this and that. Install it via the repository with Plugins > Add New. You then need to configure Consent Management with a consent representing the external resource you would like your visitors to load. Let’s go with Gists from GitHub for this tutorial.
We then need a HTML or similar Element/Modul provided by the Page Builder of our choice to enter unformatted html snippets into our site. Place it where the Gist should appear when consented.
If you have consented this site to load from GitHub, and you really should, you can see the script to put into the html-element we just created. You obviously want to exchange the parameter in the getJSON function to match the Gist you want loaded.
Here, I’ve put a plugin provided shortcode below the loaded (or not) Gist that creates a button to turn GitHub consent on and off quickly, for you to easily experience different results.
If you see any errors, this is most likely caused by a plugin caching or concatenating CSS and/or JavaScript. Try adding gdpr-public.js to Exclude Scripts in Autoptimize or gdpr* to Exclude Cookie in WP Fastest Cache.
WTF Rundown
The GDPR plugin’s consent management writes every consent given to a Cookie . When the has_consent function provided finds github in this Cookie, we know that we are allowed to load Gists.
We use injected jQuery to load the Gist’s JSON wiht a JSONP call (the ?callback? part) because just loading the script from GitHub with getScript would not work here due to document.write restrictions, and simple JSON would violate cross-domain-policy. When the JSON has arrived, we replace the parent elements HTML with the DIV from the JSON and load the respective stylesheet to display the Gist properly.
Note that while it is perfectly ok to give an id to a script in HTML5, it will not validate as proper HTML4. We want to do that though because sometimes we might need to load multiple Gists on one page. You’ll never know 😉
