インストール

Tealiumは現在、Shopifyサイトでタグ管理を使用できるShopifyアプリをShopifyマーケットプレイスで提供しています。詳細については、Tealium Shopifyアプリについてを参照してください。

仕組み

ShopifyでTealiumを使用するには、Tealium Shopify（レガシー）統合のTealiumコードを使用するようにShopifyテーマをカスタマイズする必要があります。Tealiumコードはユニバーサルデータオブジェクト（UDO）を提供し、サイトの各ページで必要なTealiumアセットを読み込みます。

注文状況ページ用のコードスニペットは、チェックアウトの「Thank you」ページにも表示されます。このコードスニペットは、コンバージョントラッキング用のUDOを提供します。注文後に注文状況ページが再度閲覧される可能性があるため、コンバージョンが二重にトラッキングされないよう、タグ管理でロジックを構成することをお勧めします。

チェックアウトファネル全体でutag.jsを読み込むcheckout.liquidファイルにアクセスできるのは、Shopify Plusのお客様のみです。現在、この統合はチェックアウトファネルをサポートしていません。ただし、他のページで使用されているパターンに従って、独自のcheckout.liquidを実装できます。

構成手順

Tealium統合用にShopifyテーマをカスタマイズするには、次の手順を実行します。

1. Tealium構成を有効にする。
2. utag.jsとページ上のデータレイヤーをインストールする。
3. 注文状況ページ用のスクリプトをインストールする。
4. （Shopify Plusのお客様向け）チェックアウトプロセス用のスクリプトをインストールする。

   Shopifyは、2024年8月13日にcheckout.liquidテーマファイルを廃止します。詳細については、Shopify.devドキュメント：アップグレードを参照してください。

Tealium構成を有効にする

次のJSONオブジェクトをコピーし、ShopifyテーマのConfig/settings_schema.jsonファイル内のJSON配列に貼り付けます。このJSONオブジェクトにより、テーマのTealium固有の構成が有効になります。

{
  "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"
    }
  ]
}

テーマをカスタマイズするときに、一般構成タブでTealium固有の構成を編集します。

utag.jsとページ上のデータレイヤーをインストールする

次の手順に従って、Shopifyストアにutag.jsをインストールし、ページ上のデータレイヤーを構成します。このプロセスでは、Tealium Integration for Shopify GitHubリポジトリで提供されている特定のスニペットをShopifyテーマに追加します。これらのスニペットにより、ストア内のさまざまなページタイプでのトラッキングと分析に必要なユニバーサルデータオブジェクト（UDO）の実装が有効になります。

ステップ1 - テーマのコードにアクセスする

1. Shopifyアカウントにログインします。
2. オンラインストア > テーマに移動し、現在のテーマを表示します。
3. 編集するテーマを見つけ、アクションドロップダウンメニューをクリックして、コードを編集を選択します。または、テーマのカスタマイズボタンをクリックして、コードエディターに直接アクセスできます。

ステップ2 - UDO実装スニペットを追加する

1. Tealium Integration for Shopify GitHubリポジトリにアクセスし、さまざまなページタイプでUDOを実装するために必要なコードスニペットをダウンロードします。
2. Shopifyテーマのコードエディターで、スニペットフォルダーをクリックして展開します。
3. GitHubリポジトリから適切なスニペットをドラッグし、Shopifyテーマエディターのスニペットフォルダーにドロップします。詳細については、Shopify.devドキュメント：テーマスニペットを参照してください。

ステップ3 - テンプレートでスニペットを参照する

1. スニペットを追加した後、テンプレートフォルダーをクリックして展開します。

2. 各ページタイプ（商品、ホーム、会社概要など）に対応するテンプレートについて、テンプレートファイルの先頭に関連するUDOスニペットへの参照を挿入します。これらの参照により、ページタイプごとにデータレイヤーが正しく初期化されます。

   たとえば、商品ページにデータレイヤーを統合するには、次のようにproduct.liquidテンプレートを編集します。

   • product.liquidファイルの先頭に次の行を追加し、先ほどスニペットフォルダーに追加したproduct_udoスニペットを組み込みます。

     {% include 'product_udo' %}
     

   • 他のスクリプトが実行される前にデータレイヤーが初期化されるように、この行はテンプレートファイル内の既存のコンテンツより前に配置する必要があります。product_udoスニペットを組み込んだ後のproduct.liquidテンプレートは、次のようになります。

     {% 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>
     

   • 異なるページタイプに対応する各テンプレートについて、product_udoの代わりに適切なスニペット名を使用して、このプロセスを繰り返します。通常、スニペット名と対応するテンプレート名はよく似ていますが、スニペット名には_udoサフィックスが付きます。例：

     • index.liquidテンプレート（ホームページ）には、home_udoスニペットを組み込みます。
     • 404.liquidなどの汎用テンプレートには、幅広く対応できるようにpage_udoスニペットを使用します。 詳細については、Shopify.devドキュメント：テーマアーキテクチャを参照してください。

3. テンプレートにincludeステートメントを追加した後、保存をクリックして変更を適用します。

4. 変更を確認するには、Webブラウザーで開発者コンソールを開き、utag.dataを調べます。

注文状況ページへのスクリプトのインストール

他のページとは異なり、注文状況ページからは管理構成にアクセスできないため、Tealiumアカウント情報を再構成する必要があります。次の手順に従って構成を定義します。

1. Shopify管理画面で、構成をクリックしてからチェックアウトをクリックします。

2. チェックアウト構成で、ページ下部付近にある注文状況ページまでスクロールします。

3. 追加スクリプトに、次のコードを追加します。

   <script>
     {
       "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 %}
   <!-- Configure your Tealium account information for the order confirmation page. -->
   {% endif %}
   

   詳細については、Shopifyヘルプセンター：注文状況ページを参照してください。

4. tealium_enabledをtrueに構成します。

5. tealium_account、tealium_profile、tealium_environment変数を、構成で構成した内容と一致するように構成します。

チェックアウトへのスクリプトのインストール（Shopify Plusのみ）

この手順は、checkout.liquidファイルを使用してチェックアウトファネル全体にutag.jsを統合するShopify Plusのお客様を対象としています。

checkout.liquidへのアクセス

• Shopify Plusのお客様：checkout.liquidファイルにまだアクセスできない場合は、アクセス権をリクエストできます。このファイルは、チェックアウト処理中にutag.jsを読み込みます。このファイルを以前に変更したことがない場合は、インストールを続行する前にShopifyサポートへ連絡してアクセス権を取得する必要があります。
• Shopify Plus以外のお客様：Shopifyサポートは、Shopify Plusアカウントをお持ちでないお客様にcheckout.liquidファイルへのアクセス権を付与しません。この制限により、チェックアウトページにutag.jsスクリプトをインストールすることはできません。ただし、前述の手順を完了することで、ショッピングカートや注文確認ページなど、その他の重要なページにはutag.jsがインストールされます。

インストール手順

1. checkout_udo.liquidファイルを開きます。
2. 10行目のプレースホルダーを、Tag Managementのアカウント情報とプロファイル情報に置き換えます。
3. 変更した内容をコピーし、ShopifyのチェックアウトLiquidファイルに貼り付けます。
4. 変更を保存し、統合が想定どおりに機能することをテストで確認します。

このチェックアウトコードは、基本テンプレートとして機能します。最適なパフォーマンスを実現するために、Shopifyサイト固有の要件や構成に応じたカスタマイズが必要になる場合があります。

リリースノート

1.0.2

• 統合の機能がより明確に伝わるように、READMEを更新しました。
• より多くのデータと分かりやすい変数名を含めるように、order_statusスニペットを更新しました。
• 機能をより適切に表すため、checkout.liquidの名前をorder_status.liquidに変更しました。

1.0.1

• global_udo_varsスニペット内の変数名のスペルミスを修正しました。customer_loggedinをcustomer_logged_inに置き換えました。

1.0.0 初回リリース

• Tealiumと統合するためにShopifyテーマをカスタマイズする際に必要な、すべてのスニペットと構成。
• テーマをカスタマイズするための手順。

ライセンス

本ソフトウェアの使用には、LICENSE.txtファイルに記載されているライセンス契約の条件が適用されます。このリポジトリに含まれるファイルをダウンロードまたは使用する前に、ライセンスをお読みください。これらのファイルをダウンロードまたは使用することにより、ライセンス契約に拘束され、その条件を遵守することに同意したものとみなされます。