Install

How it works

The Tealium Cartridge lets marketers manage tagging requirements by themselves via a single line of code and an intuitive web interface, and no IT resources required. Unlike other solutions that favor a code-centric approach, Tealium delivers easy-to-use templates that require no JavaScript knowledge. This makes it easy to add, edit or remove any digital marketing vendor tag within seconds. Tealium is designed from the ground up to help marketers be more agile and efficient.

With the basic installation of the Tealium Cartridge, Tealium automatically gathers a rich set of visitor event data, including content navigation, search tracking, product viewing, checkout and order tracking, all without any further customization.

The Tealium Cartridge unlocks the full potential of a marketer’s vendor tag suite by shifting much of the effort from server-side Commerce Cloud implementations to the simple Tealium client-side console.

The Tealium Cartridge requires a Tealium subscription.

Use Cases

With the basic installation of the Tealium Cartridge, Tealium automatically gathers a rich set of visitor event data, including content navigation, search tracking, product viewing, checkout and order tracking, all without any further customization.

Then, Tealium iQ unlocks the potential of the marketer by providing seamless and complete vendor tag integration without the need for IT resources, or Commerce Cloud Storefront changes.

Setup

Follow these directions to integrate the Tealium Cartridge into your Commerce Cloud Storefront. These steps are based on a standard Site Genesis storefront.

1. Import the Tealium Cartridge into the Commerce Cloud Studio Workspace:
   • Open Commerce Cloud Studio.
   • Navigate to File > Import > General > Existing Projects Into Workspace.
   • Browse to the int_tealium directory.
   • Click Finish.
   • Click OK when prompted to link the cartridge to the sandbox.
2. Import Custom Site Preferences into the Commerce Cloud Business Manager.
   • Log in to the Commerce Cloud Business Manager.
   • Navigate to Administration > Site Development > Import & Export.
   • Click Upload.
   • Browse for the ./int_tealium/metadata/Tealium_Meta.xml file.
   • Click « Back on the bottom of the page.
   • Click Import.
   • Select the Tealium_Meta.xml file.
   • Click Next.
   • Click Import.
3. Configure Tealium Custom Preferences using the Commerce Cloud Business Manager
   • Log in to the Commerce Cloud Business Manager for each site onto which Tealium is to be configured:
   • Select the correct site from the tabs across the top of the page.
   • Navigate to Merchant Tools > Site Preferences > Custom Preferences > Tealium.
   • During implementation, Tealium will provde you values to enter in the Site Preferences fields.
   • For the Tealium Environment field, enter dev, qa, or prod (for instance, use dev for sandbox/development instances).
   • Check the box to enable this integration and click Apply near the bottom of the page.

     

4. Append the Tealium Cartridge to the Effective Cartridge Path.
   • Log in to the Commerce Cloud Business Manager on the Staging Server.
   • Navigate to Administration > Sites > Manage Site for each listed site and the Business Manager Site:
     • Select the site from the list.
     • Click the Settings tab.
     • Append :int_tealium to the Cartridges: field.
     • Click Apply.
5. Include the Tealium footer code in footer.isml
   • Open Commerce Cloud Studio.
   • Open the /cartridge/templates/default/components/footer/pageFooter.isml storefront footer file and add the following text to the file:

  <isinclude url="${URLUtils.url('Tealium_utag-RenderTealium',
'title', request.pageMetaData.title,
'pagecontexttype', ('pageContext' in this && !empty(pageContext)) ? ''+pageContext.type : null,
'pagecontexttitle', ('pageContext' in this && !empty(pageContext)) ? ''+pageContext.title : null,
'searchterm', request.httpParameterMap.q.stringValue,
'searchresultscount', (!empty(pdict.productSearch) ? ''+pdict.productSearch.count : null),
'productid', (!empty(pdict.product) && !empty(pdict.product.id) ? ''+pdict.product.id : null),
'pagecgid', request.httpParameterMap.cgid.stringValue,
'orderno', (!empty(pdict.order) ? pdict.order.orderNumber : null)
)}"/>

6. Update the following Commerce Cloud templates (.isml files) to include the pageContext object:
   • Open Commerce Cloud Studio.
   • Open the /cartridge/templates/default/cart/cart.isml storefront file and dd the following line near the top of the template:

   <isscript>var pageContext={title:'Cart', type:'cart', ns:'cart'};</isscript>
   

   • Open the /cartridge/templates/default/checkout/checkout.isml storefront file and add the following line near the top of the template:

   <isscript>var pageContext={title:'Checkout',type:'checkout',ns:'checkout'};</isscript>
   

   • Open the /cartridge/templates/default/account/order/history.isml storefront file and add the following line near the top of the template:

   <isscript>var pageContext={title:'OrderHistory',type:'orderhistory',ns:'orderhistory'};</isscript>
   

Configuration

Be sure to configure the proper Tealium account and Tealium profile in the Tealium settings, as specified in steps 3 from the Setup section above.

No other Commerce Cloud configuration required.

Discuss with your Tealium Account Manager on how to customize your marketing tags using Tealium iQ.

Custom Code

For the basic integration, no custom code beyond the setup steps defined above are required.

Compatibility

For legacy installations before the latest SFRA updates, see Tealium’s Demandware Releases on GitHub.

External Interfaces

The Tealium iQ console can now be used to manage your marketing tags, without requiring IT intervention. Please see your Tealium Account Manager for more details.

Privacy, Payment

The Tealium Cartridge is designed to collect the same level of user behavior as that of traditional web analytics vendors. The Tealium Cartridge can be customized to increase or decrease the level of data collected in order to fully respect the privacy policy of the Commerce Cloud client.

Support

Please contact your Tealium Account Manager for any needed support.

Testing

After you deploy the cartridge, the most effective test to ensure a proper deployment is to view the page source of your storefront from within your browser. Your footer should now contain a JSON structure set to a variable named utag_data. Simply search for this variable for confirmation. There is an additional script to include the utag.js file just below this.

The script block on every page resembles the following example. The Tealium ACCOUNT, PROFILE and ENVIRONMENT values should match what was configured in Setup - Step 3.

<script type="text/javascript">
(function(a,b,c,d){
a='//tags.tiqcdn.com/utag/ACCOUNT/PROFILE/ENVIRONMENT/utag.js';
b=document;c='script';d=b.createElement(c);
d.src=a;d.type='text/java'+c;d.async=1;
a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a);
})();
</script>

Home Page

On the Home page, the data layer is minimal.

<script type="text/javascript">
var utag_data = {
  "page_name": "SiteGenesis Online Store",
  "page_type": "content",
  "page_context_type": "storefront",
  "page_context_title": "storefront",
  "user_anonymous": "true",
  "user_authenticated": "false",
  "user_registered": "false",
  "customer_id": "abZAaNVUFZJNZz7PUAZrRjr1E5"
};
</script>

Search Results Page

This page adds new data points search_results (count) and search_term (keyword) used.

<script type="text/javascript">
var utag_data = {
  "page_name": "Sites-SiteGenesis-Site",
  "page_type": "search",
  "page_context_type": "search",
  "page_context_title": "product search results",
  "user_anonymous": "true",
  "user_authenticated": "false",
  "user_registered": "false",
  "customer_id": "abZAaNVUFZJNZz7PUAZrRjr1E5",
  "search_results": "7",
  "search_term": "suit"
};
</script>

Product Detail Page

On this page the page_type variable equals product. The product_XX array values all contain a single string value.

A null string value may indicate product catalog database is incomplete in Commerce Cloud. These values below are sample values. Only ‘page_type’ and ‘page_context_type’ will probably be the same for your site.

<script type="text/javascript">
var utag_data = {
  "page_name": "Platinum Blue Stripes Easy Care Fitted Shirt ",
  "page_type": "product",
  "page_context_type": "product",
  "page_context_title": "platinum blue stripes easy care fitted shirt",
  "user_anonymous": "true",
  "user_authenticated": "false",
  "user_registered": "false",
  "customer_id": "abZAaNVUFZJNZz7PUAZrRjr1E5",
  "product_id": [
    "008884303989"
  ],
  "product_sku": [
    "null"
  ],
  "product_name": [
    "Platinum Blue Stripes Easy Care Fitted Shirt "
  ],
  "product_brand": [
    "null"
  ],
  "product_category": [
    "womens-clothing-tops"
  ],
  "product_unit_price": [
    "75.00"
  ]
};
</script>

View Cart Page

This page shows multiple product-specific coupons applied to both items in the cart. Discount represents the total discounted amount for all items of same product id.

<script type="text/javascript">
var utag_data = {
  "page_name": "Sites-SiteGenesis-Site",
  "page_type": "checkout",
  "page_context_type": "cart",
  "page_context_title": "cart",
  "user_anonymous": "true",
  "user_authenticated": "false",
  "user_registered": "false",
  "customer_id": "abZAaNVUFZJNZz7PUAZrRjr1E5",
  "coupon_codes": ["FIVEOFF"],
  "product_id": [
    "750518894553",
    "sanyo-dp50747"
  ],
  "product_sku": [
    "null",
    "null"
  ],
  "product_name": [
    "Charcoal Single Pleat Wool Suit",
    "Sanyo 50\" LCD High Definition Television"
  ],
  "product_brand": [
    "null",
    "Sanyo"
  ],
  "product_category": [
    "mens-clothing-suits",
    "electronics-televisions-flat-screen"
  ],
  "product_unit_price": [
    "299.99",
    "2996.25"
  ],
  "product_quantity": [
    "1",
    "5"
  ],
  "product_coupon_discount": [
    "-5",
    "-25"
  ],
  "product_coupon_promo": [
    "FIVEOFF",
    "FIVEOFF"
  ]
};

Order “Thank You” Page

This page shows the details about the order and adds all values beginning with order_. This data layer also includes all of the items that were purchased. The product_ arrays should have the same number of items in each array and each item corresponds to the item in the same position in the other arrays.

<script type="text/javascript">
var utag_data = {
  "page_name": "confirmation",
  "page_type": "checkout",
  "page_context_type": "orderconfirmation",
  "page_context_title": "order confirmation",
  "user_anonymous": "true",
  "user_authenticated": "false",
  "user_registered": "false",
  "customer_id": "abZAaNVUFZJNZz7PUAZrRjr1E5",
  "order_id": "00000451",
  "order_discount": "0.00",
  "order_subtotal": "75.00",
  "order_tax": "4.05",
  "order_shipping": "5.99",
  "order_payment_type": "BML",
  "order_total": "85.04",
  "order_currency": "USD",
  "order_postal_code": "92868",
  "product_name": [
    "Platinum Blue Stripes Easy Care Fitted Shirt "
  ],
  "product_brand": [
    "null"
  ],
  "product_unit_price": [
    "75" ],
  "product_sku": [
    "null"
  ],
  "product_id": [
    "008884304023"
  ],
  "product_category": [
    "womens-clothing-tops"
  ],
  "product_quantity": [
    "1" ],
  "product_coupon_discount": [
    "0"
  ],
  "product_coupon_promo": [
    ""
  ]
};
</script>

Order History Page

Order History shows the details about previous or outstanding orders. This data layer should not include all of the items that were previously purchased.

<script type="text/javascript">
var utag_data = {
  "page_name": "Sites-SiteGenesis-Site",
  "page_type": "content",
  "page_context_type": "orderhistory",
  "page_context_title": "order history",
  "user_anonymous": "false",
  "user_authenticated": "true",
  "user_registered": "true",
  "customer_id": "adtkksWZjpbo9fdawQex7njjMb",
  "customer_email": "xxxxxxxxxx@yahoo.com"
}; </script>