Hey there,
I'm afraid not, we have to go the JavaScript way. What I did:
Somewhere below the {{ content_for_header }} line in theme.liquid (or, if you don't want to meddle in your theme's code, create a "Custom Liquid" block in your header or footer section), inserted this code:
<script>
function msClarity() {
userCanBeTracked = window.Shopify.customerPrivacy.analyticsProcessingAllowed();
if(userCanBeTracked) {
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "YOURTAGID");
}
}
function bingConv() {
userCanBeTracked = window.Shopify.customerPrivacy.thirdPartyMarketingAllowed();
if(userCanBeTracked) {
(function(w,d,t,r,u)
{
var f,n,i;
w[u]=w[u]||[],f=function()
{
var o={ti:"YOURTAGID", enableAutoSpaTracking: true};
o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")
},
n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function()
{
var s=this.readyState;
s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)
},
i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)
})
(window,document,"script","//bat.bing.com/bat.js","uetq");
}
}
window.Shopify.loadFeatures([
{
name: 'consent-tracking-api',
version: '0.1',
}
],
function(error) {
if (error) {
throw error;
}
msClarity();
bingConv();
document.addEventListener('visitorConsentCollected', () => {
msClarity();
bingConv();
});
});
</script>
A few notes:
- I took MS Clarity and MS Bing Conversion tracking because they provide dynamically created <script> elements out of the box - if the tracking snippet you want to insert gives you a static <script src="..."></script> code, you'll have to convert that
- Also, those two examples show the "Analytics allowed" vs "Third Party Marketing allowed" consent options
- Since I didn't really dig deeper into Shopify's logic, I just went for "Each snippet function queries the window.Shopify.customerPrivacy.***allowed() for itself" way because I don't know if that's already set when the callback function is called. This can probably be solved in a more elegant way.
- ...and the callback+event handling could probably also be more elegant, I was just too lazy to dig deeper into the Consent API logic regarding the point in time the callback is called/visitorConsentCollected is fired exactly. But it works: This way, when the Consent API is loaded on a page view where the visitor has already made their choice in the cookie banner before, it'll just call the bingAds() and MSClarity() functions, which will check if their respective consent has been given, and do their thing; and in case there has no consent choice been made yet (i.e. the cookie banner is presented to the visitor), they'll also be called as soon as the visitor saves their choices, so it will start tracking immediately, and not just after the next page view.
Feel free to use and/or refine this - I'm no developer, so please forgive my rather messy approach here. 🙂
