Install

How it works

To use Tealium with Shopify, you must customize your Shopify theme to use Tealium code with the Tealium Shopify integration. The Tealium code provides a Universal Data Object (UDO) and loads the necessary Tealium assets on each page of your site.

The code snippet for the order status page also appears on the “Thank you” page of the checkout. The code snippet provides the UDO for conversion tracking. Since the order status page may be revisited after the order is placed, it is recommended to configure logic in Tealium iQ Tag Management in order not to track conversions twice.

Only Shopify Plus customers have access to the checkout.liquid file, which loads utag.js throughout the checkout funnel. This integration does not currently support the checkout funnel. However you may implement your own checkout.liquid following the patterns used on other pages.

Setup Instructions

Settings

Copy the following JSON object into the JSON array contained in the Config/settings_schema.json file of your Shopify theme. This enables the Tealium-specific settings for your theme.

{
  "name": "Tealium",
  "settings": [
    {
      "type": "text",
      "id": "tealium_account",
      "label": "Account",
      "info": "Name of your acount"
    },
    {
      "type": "text",
      "id": "tealium_profile",
      "label": "Profile",
      "default": "main",
      "info": "Which profile to load your tags from",
      "placeholder": "main"
    },
    {
      "type": "text",
      "id": "tealium_environment",
      "label": "Environment",
      "default": "prod",
      "info": "Which environment to load your tags from",
      "placeholder": "prod"
    },
    {
      "type": "checkbox",
      "id": "tealium_enabled",
      "label": "Enable",
      "default": false,
      "info": "Check to enable Tealium"
    }
  ]
}

Edit your Tealium-specific settings in the General Settings tab when customizing your theme.

Snippets

Drop the files from the Snippets folder of this GitHub repository into the Snippets folder of your Shopify theme. These files contain the UDO implementations for the various page types.

For more information, see Shopify’s theme snippets documentation.

Templates

On each page, include the correct snippet corresponding to the data layer of that page. Go to the page’s template, or the section for specific pages such as the index (home) page, and insert the relevant snippet. For example, the product.liquid template file in the default Debut theme that Shopify provides looks like the following, where the product_udo snippet has been added at the beginning of the file.

{% include 'product_udo' %}

{% comment %}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template' %}

<script>
  // Override default values of shop.strings for each template.
  // Alternate product templates can change values of
  // add to cart button, sold out, and unavailable states here.
  theme.productStrings = {
    addToCart: {{ 'products.product.add_to_cart' | t | json }},
    soldOut: {{ 'products.product.sold_out' | t | json }},
    unavailable: {{ 'products.product.unavailable' | t | json }}
  }
</script>

Order Status

Unlike other pages, the order status page doesn’t have access to the admin Settings, so you must reconfigure your Tealium account information. Define the settings in the Additional scripts box of the Order processing section, as described in the Shopify documentation:

1. From your Shopify admin, click Settings and then click Checkout.
2. Near the bottom of the Order processing section, find Additional content & scripts.
3. Add the following code.

    "product_price": [
    {% for line_item in checkout.line_items %}
      "{{ line_item.price | money_without_currency }}"{% unless forloop.last %},{% endunless %}
    {% endfor %}
    ],
    "product_name": [
    {% for line_item in checkout.line_items %}
      "{{ line_item.title }}"{% unless forloop.last %},{% endunless %}
    {% endfor %}
    ],
    "product_sku": [
    {% for line_item in checkout.line_items %}
      "{{ line_item.sku }}"{% unless forloop.last %},{% endunless %}
    {% endfor %}
    ],

    "page_name": "{{ page_title }}",
    "language_code": "{{ shop.locale }}",

    {% if customer %}
      "customer_logged_in": "true",
      "customer_id": "{{ customer.id }}",
      "customer_email": "{{ customer.email }}",
      "customer_first_name": "{{ customer.first_name }}",
      "customer_last_name": "{{ customer.last_name }}",

      {% if customer.default_address %}
        "country_code": "{{ customer.default_address.country_code }}",
      {% endif %}

    {% else %}
      "customer_loggedin": "false",
    {% endif %}

    {% if cart %}
      "cart_total_items": "{{ cart.item_count }}",
      "cart_total_value": "{{ cart.total_price | money_without_currency }}",
    {% endif %}

    "page_type": "order"
  }
</script>

<!-- Loading script asynchronously -->
<script type="text/javascript">
    (function(a,b,c,d){
    a='//tags.tiqcdn.com/utag/{{ settings.tealium_account }}/{{ settings.tealium_profile }}/{{ settings.tealium_environment }}/utag.js';
    b=document;c='script';d=b.createElement(c);d.src=a;d.type='text/java'+c;d.async=true;
    a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a);
    })();
</script>
{% else %}
<!-- Please configure your Tealium account information for the order confirmation page. -->
{% endif %}

4. Set tealium_enabled to true.
5. Set the tealium_account, tealium_profile, and tealium_environment variables to match what you configured in the settings.

Release Notes

1.0.2

• Updated README to more clearly reflect the capabilities of the integration.
• Updated order_status snippet to include more data and better variable names.
• Renamed checkout.liquid to order_status.liquid to better reflect its functionality.

1.0.1

• Fixed misspelled variable name in the global_udo_vars snippet. customer_loggedin was replaced with customer_logged_in.

1.0.0 Initial Release

• All snippets and configuration required to customize a Shopify theme to integrate Tealium.
• Instructions for customizing a theme.

License

Use of this software is subject to the terms and conditions of the license agreement contained in the file titled LICENSE.txt. Please read the license before downloading or using any of the files contained in this repository. By downloading or using any of these files, you are agreeing to be bound by and comply with the license agreement.