Javascript in Shopify - when does it run?

Solved
Highlighted
New Member
4 0 0

Hi team

I've had a lot of trouble installing Google Ads remarketing tags and conversion tracking. I've tried this every which way and now finally think I have it correct (I hope!)

For my understanding though....a lot of the guides talk about implementing Javascript in the "additional Google Analytics scripts" section. Many of them have this sort of code:

<!-- Event snippet for Sales conversion page -->

gtag('event', 'conversion', {
'send_to': 'REDACTED',
'value': {{ checkout.subtotal_price | money_without_currency | remove: ',' }},
'currency': '{{ order.currency }}',
'transaction_id': '{{ order.order_number }}'
});

---

Wouldn't we only want this to fire when someone purchases, not all over the site? Sure, it's wrapped in "if first time accessed", but still, this confuses me. I figure it should be in the Checkout scripts, not both there and in the Google Analytics scripts section. Or is it that since you only have values populated in these checkout attributes once someone checks out, it doesn't matter that it's in the Analytics section too, since they would all be set to blank for all other pages?

Thanks, just trying to enhance my understanding.

0 Likes
Highlighted
Explorer
57 3 10

There are two main ways within Shopify to insert JS scripts, without editing the theme or injecting via GTM or similar.

1)  Shopify Admin > Online Store > Preferences > Additional Google Analytics JavaScript
 > runs on every page load

2) Shopify Admin > Settings > Checkout > Additional Scripts
> runs on the order status page aka the "thank you" page

If you're adding conversion scripts like that, a common approach is to add them in (2) wrapped in the {% if first_time_accessed %} tag you mentioned, this way only firing on first status page access following a successful transaction.

There are other approaches like setting up a full GTM datalayer and creating tags/triggers that only fire the conversion script on the thank you page but that's a bit more advanced. The built in functionality is fine most of the time.

 

If my comment helped you, feel free to help me: sharesies promo, shopify referral, g suite referral
0 Likes
Highlighted
New Member
4 0 0

Thanks Kieran!

What you have said makes sense. I suppose I'm second-guessing it because I've been having trouble with it.

To elaborate further, here is my current setup. 

theme.liquid: Here I'm loading up a snippet which is called "dynamic remarketing", which looks like this. It's firing the dynamic remarketing tags for Google Ads if a page falls into a particular category.

<!-- START Google Ads dynamic remarketing by DigitalDarts.com.au v1.5 -->
{% assign UA-ID = "(redacted)" -%}{%- comment -%}Google Analytics tracking ID.{%- endcomment -%}
{%- assign AW-ID = "(redacted)" -%}{%- comment -%}Google Ads conversion ID.{%- endcomment -%}
{%- assign product-id = "product-id_variant-id" -%}{%- comment -%}The format of the product IDs in the feed. 3 accepted values "sku" (SKU of the variant e.g. aga-012), "variant-id" (variant ID e.g. 21283160948841), or "product-id_variant-id" (product ID underscore then variant ID e.g. 28541777444969_21283160948841).{%- endcomment -%}
{%- assign product-id-prefix = "shopify_AU_" -%}{%- comment -%}Prefix to product-id. Leave blank if there's no prefix. This is likely needed if product-id_variant-id is selected so 123456_789012 becomes shopify_AU_28541777444969_21283160948841.{%- endcomment -%}
{%- assign price-decimal-fs = true -%}{%- comment -%}If the decimal separator is a full stop like in USD and AUD currencies, set to true. If it is a comma like in some European countries, set to false.{%- endcomment -%}
{%- comment -%}Change dimension1, dimension2, and dimension3 on line 16 to match your custom dimension number in Google Analytics.{%- endcomment -%}

{%- if template contains 'collection' or template contains 'search' or template contains 'product' or template contains 'cart' -%}
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ UA-ID }}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '{{ UA-ID }}', { 'send_page_view': false, 'custom_map': {'dimension1': 'ecomm_prodid', 'dimension2': 'ecomm_pagetype', 'dimension3': 'ecomm_totalvalue'} });
  gtag('config', '{{ AW-ID }}');
</script>

<script>
  gtag('event', 'Dynamic Remarketing', { 'ecomm_pagetype': '{% if template contains 'collection' %}category{% elsif template contains 'search' %}searchresults{% elsif template contains 'product' %}product{% elsif template contains 'cart' %}cart{% endif %}'
  {%- if product-id == "product-id_variant-id" -%}
  , 'ecomm_prodid': {% if template contains 'product' -%}
    '{{ product-id-prefix }}{{ product.id }}_{{ product.selected_or_first_available_variant.id }}'
    {%- elsif template contains 'collection' -%}
    [{% for item in collection.products limit:3 %}'{{ product-id-prefix }}{{ item.id }}_{{ item.selected_or_first_available_variant.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}]
    {%- elsif template contains 'search' -%}
    [{% for item in search.results limit:3 %}'{{ product-id-prefix }}{{ item.id }}_{{ item.selected_or_first_available_variant.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}]
    {%- elsif template contains 'cart' -%}
    [{%- for item in cart.items limit:3 -%}'{{ product-id-prefix }}{{ item.product_id }}_{{ item.variant_id }}'
      {%- unless forloop.last -%}, {%- endunless -%}
    {%- endfor -%}]
  {%- endif -%}
  {%- elsif product-id == 'variant-id' -%}
  , 'ecomm_prodid': {% if template contains 'product' -%}
    '{{ product-id-prefix }}{{ product.selected_or_first_available_variant.id }}'
    {%- elsif template contains 'collection' -%}
    [{% for item in collection.products limit:4 %}'{{ product-id-prefix }}{{ item.variants.first.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}]
    {%- elsif template contains 'search' -%}
    [{% for item in search.results limit:4 %}'{{ product-id-prefix }}{{ item.variants.first.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}]
    {%- elsif template contains 'cart' -%}
    [{%- for item in cart.items limit:4 -%}'{{ product-id-prefix }}{{ item.variant_id }}'
      {%- unless forloop.last -%}, {%- endunless -%}
    {%- endfor -%}]
  {%- endif -%}
  {%- elsif product-id == 'sku' -%}
  , 'ecomm_prodid': {% if template contains 'product' -%}
    '{{ product-id-prefix }}{{ product.selected_or_first_available_variant.sku }}'
    {%- elsif template contains 'collection' -%}
    [{% for item in collection.products limit:4 %}'{{ product-id-prefix }}{{ item.selected_or_first_available_variant.sku }}'{% unless forloop.last %}, {% endunless %}{% endfor %}]
    {%- elsif template contains 'search' -%}
    [{% for item in search.results limit:4 %}'{{ product-id-prefix }}{{ item.selected_or_first_available_variant.sku }}'{% unless forloop.last %}, {% endunless %}{% endfor %}]
    {%- elsif template contains 'cart' -%}
    [{%- for item in cart.items limit:4 -%}'{{ product-id-prefix }}{{ item.sku }}'
      {%- unless forloop.last -%}, {%- endunless -%}
    {%- endfor -%}]
  {%- endif -%}
  {%- endif -%}
  {%- if price-decimal-fs == true -%}
    {%- if template contains 'product' -%}
      {%- assign product-price = product.price_min | money_without_currency | remove: ',' -%}
    {%- elsif template contains 'cart' -%}
      {%- assign product-price = cart.total_price | money_without_currency | remove: ',' -%}
    {%- endif -%}
  {%- else -%}
    {%- if template contains 'product' -%}
      {%- assign product-price = product.price_min | money_without_currency | remove: '.' | replace: ',', '.' -%}
    {%- elsif template contains 'cart' -%}
      {%- assign product-price = cart.total_price | money_without_currency | remove: '.' | replace: ',', '.' -%}
    {%- endif -%}
  {%- endif -%}
  {%- if template contains 'product' or template contains 'cart' -%}
  , 'ecomm_totalvalue': {% if template contains 'product' -%}
    {{ product-price -}}
  {%- elsif template contains 'cart' -%}
    {{ product-price -}}
  {%- endif -%}
  {%- endif -%}, 'non_interaction': true });
</script>
{%- endif %}
<!-- END Google Ads dynamic remarketing by DigitalDarts.com.au -->

 

Google Analytics extra JS: Basically I'm sending the purchase event to Google Ads here. 

<!-- Global site tag (gtag.js) - Google Analytics -->

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '(redacted)', { 'send_page_view': false });
gtag('config', '(redacted));

{% if first_time_accessed %}
<!-- Event snippet for Sales conversion page -->

gtag('event', 'conversion', {
'send_to': '(redacted)',
'value': {{ checkout.subtotal_price | money_without_currency | remove: ',' }},
'currency': '{{ order.currency }}',
'transaction_id': '{{ order.order_number }}'
});

{% endif %}

Checkout extra scripts:Basically, this is running two things: the purchase conversion event and the dynamic remarketing tags for Google Ads. Although now I look at it, am I sending the event before I've assigned the variables?

<!-- START Google Ads dynamic remarketing by DigitalDarts.com.au v1.5 -->
{% assign UA-ID = "(redacted) -%}{%- comment -%}Google Analytics tracking ID.{%- endcomment -%}
{%- assign AW-ID = "(redacted" -%}{%- comment -%}Google Ads conversion ID.{%- endcomment -%}
{%- assign product-id = "product-id_variant-id" -%}{%- comment -%}The format of the product IDs in the feed. 3 accepted values "sku" (SKU of the variant e.g. aga-012), "variant-id" (variant ID e.g. 21283160948841), or "product-id_variant-id" (product ID underscore then variant ID e.g. 28541777444969_21283160948841).{%- endcomment -%}
{%- assign product-id-prefix = "shopify_AU_" -%}{%- comment -%}Prefix to product-id. Leave blank if there's no prefix. This is likely needed if product-id_variant-id is selected so 123456_789012 becomes shopify_AU_28541777444969_21283160948841.{%- endcomment -%}
{%- assign price-decimal-fs = true -%}{%- comment -%}If the decimal separator is a full stop like in USD and AUD currencies, set to true. If it is a comma like in some European countries, set to false.{%- endcomment -%}
{%- comment -%}Change dimension1, dimension2, and dimension3 on line 15 to match your custom dimension number in Google Analytics.{%- endcomment -%}

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ UA-ID }}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '{{ UA-ID }}', { 'send_page_view': false, 'custom_map': {'dimension1': 'ecomm_prodid', 'dimension2': 'ecomm_pagetype', 'dimension3': 'ecomm_totalvalue'} });
  gtag('config', '{{ AW-ID }}');
</script>

<script>
  gtag('event', 'Dynamic Remarketing', { 'ecomm_pagetype': 'purchase'
  {%- if product-id == "product-id_variant-id" -%}
  , 'ecomm_prodid': [{% for item in checkout.line_items limit:3 %}'{{ product-id-prefix }}{{ item.product_id }}_{{ item.variant_id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}]
  {%- elsif product-id == 'variant-id' -%}
  , 'ecomm_prodid': [{% for item in checkout.line_items %}'{{ product-id-prefix }}{{ item.variant_id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}]
  {%- elsif product-id == 'sku' -%}
  , 'ecomm_prodid': [{% for item in checkout.line_items %}'{{ product-id-prefix }}{{ item.sku }}'{% unless forloop.last %}, {% endunless %}{% endfor %}]
  {%- endif -%}
  , 'ecomm_totalvalue': {% if price-decimal-fs == true -%}{{ checkout.total_price | money_without_currency | remove: ',' }}{% else %}{{ checkout.total_price | money_without_currency | remove: '.' | replace: ',', '.' }}{%- endif -%}
  , 'non_interaction': true });
</script>
<!-- END Google Ads dynamic remarketing by DigitalDarts.com.au -->

<!-- Event snippet for Google Ads purchase -->
<script>
  gtag('event', 'conversion', {
    'send_to': '(redacted)',
    'value': {{ checkout.subtotal_price | money_without_currency | remove: ',' }},
    'currency': '{{ order.currency }}',
    'transaction_id': '{{ order.order_number }}'
  });
</script>

 

----

 

Ok so that was a lot. But I'd love another set of eyes on this to check for redundancies. I feel like I'm doing things multiple times (Google Tag Assistant is telling me this too).

From what you said - I think logically I should have:

#theme.liquid: Remarketing tags
Google Analytics extra scripts:  I don't think I need anything here, since the remarketing tags in #theme.liquid take care of that, and it's not a purchase, so I don't want the conversion tag to fire.

Checkout scripts: dynamic remarketing conversion tag to fire, and the purchase event if first time accessed.

Is this the right way to think about it? I also have a Google Tag Manager container but setup there seems much more complicated to me - and from what others have said, it's unnecessary.

Thanks in advance for your time.

 

0 Likes
Highlighted
Explorer
57 3 10

This is an accepted solution.

That setup seems to indicate the default Shopify GA config has been side stepped in favour of manually coding in GA to the theme? 

If not (and you have a UA-ID setup in preferences), then there might be some duplicate pageview events from going on based on that. 

Haven't really setup much retargeting, but that seems like an ok way to do it across those areas. Yeah personally I'm a fan of "if it can go in GTM then do it in GTM" and keeping analytics mess out of the theme where possible - more from a management and separation of concerns pov. 

But really it would take someone to look at the back/front plus the GA/GTM accounts and fire up some debugging, do some testing to build an understanding of what the current state is, and if there are any issues. It's a hard one to diagnose these kind of issues by forum... and it's a case by case thing.

If my comment helped you, feel free to help me: sharesies promo, shopify referral, g suite referral
0 Likes
Highlighted
New Member
4 0 0

Totally understand. Thanks for your help!

0 Likes