Overview

Scenario:

• You are using an app (e.g. Zipify, Carthook) that trigger a post-purchase upsell funnel in the native Shopify checkout.
• You followed our guide to install the Shopify Source. Some of the marketing destinations like Facebook and Universal Analytics, you are seeing data populate accurately, but in others (e.g. GA4 or Google Ads), you are not seeing data populate.
  • Shopify only allows a marketing tag as little as 500 milliseconds to fire. Universal Analytics & Facebook seem to be fine firing in that little timeframe. However GA4 and Google Ads tags don't seem to make it in that short time frame.

The Solution:

• You can setup GA4 and Google Ads to fire their tracking on the final Thank You Page while keeping Facebook and UA firing on the upsell pages!

Add a New DataLayer Code to your Order Status Page

Access Order Status Page Additional Scripts:

• Begin on your Shopify homepage and click on the "Settings" button or the gear icon in the lower left-hand corner of the page.
  • Once in the settings, use the left-hand menu to click on the "Checkout Settings" tab.
  • Navigate to the "Order Status Page" and locate the "Additional Scripts" box.
  • Add the below code into the Additional Scripts section:

{% if first_time_accessed %}

    <script>

    var elevarLineItems = []

    window.addEventListener('load', function(){

        window.dataLayer = window.dataLayer || [];

        window.dataLayer.push({

            "event": "thankyou_purchase",

            "user_properties":{

              "customer_id": "{{ customer.id | remove: "'" }}",

              "customer_email": "{{ customer.email }}",

              "customer_first_name": "{{ customer.first_name }}",

              "customer_phone": "{{ customer.default_address.phone }}",

              "customer_last_name": "{{ customer.last_name }}",

              "customer_city": "{{ customer.default_address.city }}",

              "customer_zip": "{{ customer.default_address.zip }}",

              "customer_address_1": "{{ customer.default_address.address1 }}",

              "customer_address_2": "{{ customer.default_address.address2 }}",

              "customer_country": "{{ customer.default_address.country_code }}",

              "customer_province": "{{ customer.default_address.province }}",

              "customer_order_count": "{{customer.orders_count}}",

              "customer_total_spent": "{{customer.total_spent}}"

            },

            "ecommerce": {

                "currencyCode": "{{ checkout.currency }}",

                "purchase": {

                    actionField: {

                        {%- if checkout.order_id -%}

                            id: {{- checkout.order_id | json -}},

                        {%- else -%}

                            id: {{- checkout.id | json -}},

                        {%- endif -%}

                        {%- if checkout.order_name -%}

                            order_name: {{- checkout.order_name | json -}},

                        {%- endif -%}

                        affiliation: {{- shop.name | json -}},

                        revenue: "{{- checkout.total_price | times: 0.01 | json -}}",

                        tax: "{{- checkout.tax_price | times: 0.01 | json -}}",

                        shipping: "{{- checkout.shipping_price | times: 0.01 | json -}}",

                        {% if checkout.discount_applications %}

                            coupon: {{ checkout.discount_applications[0].title | json }},

                        {% endif %}

                        {%- if order.subtotal_price -%}

                            subTotal: "{{- order.subtotal_price | times: 0.01 | json -}}",

                        {%- elsif checkout.subtotal_price -%}

                            subTotal: "{{- checkout.subtotal_price | times: 0.01 | json -}}",

                        {%- endif -%}

                        productSubTotal: "{{- checkout.line_items_subtotal_price | times: 0.01 | json -}}",

                        discountAmount: "{{- checkout.discounts_amount | times: 0.01 | json -}}"

                        },

                    "products": [

                     {%- for line_item in checkout.line_items -%}

                        {
                            "name": {{- line_item.product.title | json -}},

                            {%- if line_item.sku != blank -%}

                                "id": {{- line_item.sku | json -}},

                            {%- else -%}

                                "id": "{{- line_item.product_id | json -}}",

                            {%- endif -%}

                            "product_id": "{{- line_item.product_id | json -}}",

                            "variant_id": "{{- line_item.variant_id -}}",

                            "price": "{{- line_item.final_price | times: 0.01 | json -}}",

                            "brand": {{- line_item.vendor | json -}},

                            "category": {{- line_item.product.type | json -}},

                            "variant": {{- line_item.variant.title | json -}},

                            "quantity": "{{- line_item.quantity | json -}}",

                        },

                    {%- endfor -%}

                    ],

                }

            }

        });

    }, false);

    </script>

{% endif %}

Create a New Trigger in Google Tag Manager

Add New Trigger:

• Begin on your Google Tag Manager homepage and use the left-hand menu to click on the "Triggers" tab.
• Locate and click on the "New" button.
  • (See Figure 1)

Figure 1

Create "Event - thankyou_purchase" Trigger:

• An additional pop-up window will appear to create a new Trigger.
  • Navigate to the upper left-hand corner of the page and use the text box to title the Trigger "Event - thankyou_purchase".
  • Navigate to the section of the page titled "Trigger Type" and select "Custom Event".
  • Navigate to the section of the page titled "Event Name" and use the text box to type "thankyou_purchase".
  • Navigate to the section of the page titled "This trigger fires on" and select the "All Custom Events" option.
• After selecting all of the required information for the new Trigger, be sure to save your changes and click on the "Save" button in the upper right-hand corner of the window.
  • (See Figure 2)

Figure 2

Update Your Desired Purchase Tags

Access Purchase Tags:

• Begin on your Google Tag Manager homepage and use the left-hand menu to click on the "Tags" tab.
• Locate and click on the the Purchase Tag for the marketing destination that isn't able to fire on Shopify's Upsell Page (e.g. GA4 or Google Ads).
  • (See Figure 3)

Figure 3

Add New Trigger:

• Once in the desired Purchase Tag, navigate to the section of the page titled "Triggering".
  • Remove the "Event - purchase" Trigger by clicking on the "-" button.
  • Add the newly created "Event - thankyoupurchase" Trigger by clicking on the "+" button.
• After making the required changes, be sure to save your changes by clicking on the "Save" button in the upper right-hand corner of the page.
  • (See Figure 4)

Figure 4

(Optional): For Google Ads Only

• Google Ads will deduplicate transactions sent based on transaction_id. The same transaction_id is passed on the post_purchase page as the thank_you page. To capture the most website conversions in Google Ads, it is recommended that you add both the "Event - purchase" and "Event - thankyou_purchase" as triggers.
• Update the "Google Ads Conversion - Purchase" and the "Google Ads Remarketing - Purchase" tags.
  • (See Figure 5)

_Figure 5_

🚧

Note: This is not recommended for other marketing destinations as most use different criteria for deduplication and would lead to duplication_

Publish Changes:

• In your current workspace, click on the "Submit" button in the upper right hand corner of the page.
  • An additional confirmation page will appear. Be sure to click on the "Publish" button in the upper right-hand corner of the page.
  • (See Figure 6)

Figure 6