This article describes how to customize your Shipify theme to use Tealim with the Tealium Shopify integration.
In this article:
Table of Contents Placeholder
Summary
Customize your Shopify theme to use Tealium with the Tealium Shopify integration. This code provides a Universal Data Object (UDO) and loads the necessary Tealium assets on each page of your site. This integration takes the form of a theme customization.
The code snippet for the order status page also appears on the "Thank you" page of the checkout. It 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.
Learn more about theme snippets.
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:
From your Shopify admin, click Settings and then click Checkout.
Near the bottom of the Order processing section, find Additional content & scripts.
And then add the following code. Before you begin, set tealium_enabled to true , and to set the tealium_account , tealium_profile , and tealium_environment variables to match what you configured in the settings.
"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 %}
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.
... View more