如何在 Google 标签管理器标签中使用 Shopify 液体变量

Question

I am fairly new to GTM. I need to put this script to our Shopify product pages. It is for an email marketing automation saas.

If I put it directly into the code of the page in Shopify, it renders well and comes back with a product id that is fished from the liquid code above. It looks like this:

<script type="text/javascript">
Targito.push( 'event', 'product_view', { 'id' : '{{ product.selected_or_first_available_variant.id }}' } );
</script>

But when I want to put it into Google Tag Manager, as custom HTML tag, and then add the variable into variables in GTM, after I publish it, on the page, in inspect tool and elements, it comes back as this:

<script type="text/javascript" id="">Targito.push("event","product_view",{id:"{{undefined}}"});</script>

I need to see a product id of the page you are currently viewing.

The thing is, Shopify liquid variables are also defined with double curly brackets, so are GTM variables. Would anyone be able to help me please? Highly appreciate your tips in advance.

Answer 1

You can't put liquid code inside your tag. The tag is rendered in Javascript that is on client side. Liquid is rendered on server side. You will need to populate a variable with liquid and use that in your tag. There are other ways but the fastest is doing something this.

You put this in your .liquid template (somewhere at the beginning of the page)

<script>
window.myVariantId = '{{ product.selected_or_first_available_variant.id }}';
</script>

And then in your tag you can put

<script type="text/javascript">
Targito.push( 'event', 'product_view', { 'id' : myVariantId } );
</script>