• Expand/CollapseMenu
Help

Salesforce Commerce Cloud (Demandware) Cartridge Setup Guide

Summary

  • The Tealium Cartridge lets marketers manage tagging requirements by themselves via a single line of code and an intuitive web interface – 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 will unlock 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..
    • Click 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 the Custom Site Preferences into the Commerce Cloud Business Manager.
    • Log into the Commerce Cloud Business Manager.
    • Click Administration > Site Development > Import & Export.
    • Click Upload.
    • Browse for the Tealium_Meta.xml file:  ./int_tealium/metadata/Tealium_Meta.xml 
    • Click the << Back button at 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 into 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.
    • Click Merchant Tools > Site Preferences > Custom Preferences > Tealium.
    • Fill in the Site Preferences as directed by Tealium. Parameter values will be provided by Tealium during implementation.
    • For Tealium Environment use “dev”, “qa”, or “prod” (i.e. use “dev” for Sandbox/Development Instances).
    • Check the box to enable this integration and click Apply near the bottom of the page.
      commerce-cloud-instance-tealium-settings.png
  4. Append the Tealium Cartridge to the Effective Cartridge Path.
    • Log into the Commerce Cloud Business Manager on the Staging Server
    • Click Administration > Sites > Manage Site for each site listed 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 storefront "footer" file: /cartridge/templates/default/components/footer/​pageFooter.isml 
    • Place the following text in this 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. A few Commerce Cloud templates (.isml files) need to be updated to include pageContext object:
    • Open Commerce Cloud Studio.
    • Open storefront file: /cartridge/templates/default/cart/​cart.isml.
    • Add this line towards the top of the template: 
      <isscript>var pageContext={title:'Cart', type:'cart', ns:'cart'};</isscript>
    • Open storefront file: /cartridge/templates/default/checkout/​checkout.isml.
    • Add this line towards the top of the template: 
      <isscript>var pageContext={title:'Checkout',type:'checkout',ns:'checkout'};</isscript>
    • Open storefront file: /cartridge/templates/default/account/order/​history.isml.
    • Add this line towards 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, view and download the older versions in GitHub found here: ​https://github.com/Tealium/integration-demandware/releases

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

Once deployed, 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 will be as follows. 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

Search results 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 the “Product Detail” page, we expect page_type as “product.” The “product_XX” array values all have a single string value. Note that a “null” string value may indicate product catalog database is incomplete in Commerce Cloud. These values below are sample values. Most likely only page_type and page_context_type will 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 shows multiple product-specific coupons applied to both items in the cart. Discount is 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

Order Thank You page shows the details about the order and adds all values beginning “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>

 

Version history
Last update:
‎10-22-2019 04:09 PM
Updated by:

Copyright All Rights Reserved © 2008-2023

Public