インストール | Shopify用Tealium | Tealium開発者ドキュメントプレビュー

Tealium Shopifyインテグレーションは現在、Shopifyバージョン2.0をサポートしていません。代わりに、Webピクセルを使用してサーバーサイドに直接ネットワークリクエストを送信するために、Tealium HTTP APIを使用することができます。

動作原理

ShopifyでTealiumを使用するには、Shopifyテーマをカスタマイズして、Tealium Shopifyインテグレーションと共にTealiumコードを使用する必要があります。Tealiumコードは、Universal Data Object（UDO）を提供し、サイトの各ページで必要なTealiumアセットを読み込みます。

注文ステータスページのコードスニペットは、チェックアウトの「ありがとうございます」ページにも表示されます。コードスニペットは、コンバージョン追跡のためのUDOを提供します。注文ステータスページは注文後に再訪される可能性があるため、2回のコンバージョン追跡を行わないようにするために、Tealium iQタグ管理でロジックを設定することをお勧めします。

checkout.liquidファイルをロードするShopify Plusの顧客のみがcheckout.liquidファイルにアクセスできます。このインテグレーションは現在、チェックアウトフローをサポートしていません。ただし、他のページで使用されているパターンに従って独自のcheckout.liquidを実装することができます。

セットアップ手順

TealiumインテグレーションのためにShopifyテーマをカスタマイズするには、次の手順に従ってください：

Tealium設定を有効にする。
utag.jsとオンページデータレイヤーをインストールする。
注文ステータスページのスクリプトをインストールする。
（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": "アカウント",
      "info": "アカウント名"
    },
    {
      "type": "text",
      "id": "tealium_profile",
      "label": "プロファイル",
      "default": "main",
      "info": "どのプロファイルからタグを読み込むか",
      "placeholder": "main"
    },
    {
      "type": "text",
      "id": "tealium_environment",
      "label": "環境",
      "default": "prod",
      "info": "どの環境からタグを読み込むか",
      "placeholder": "prod"
    },
    {
      "type": "checkbox",
      "id": "tealium_enabled",
      "label": "有効にする",
      "default": false,
      "info": "Tealiumを有効にするにはチェックを入れます"
    }
  ]
}

テーマをカスタマイズする際に、一般設定タブでTealium固有の設定を編集します。

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

Shopifyストアにutag.jsをインストールし、オンページデータレイヤーを設定するには、次の手順に従ってください。このプロセスでは、Tealium Integration for Shopify GitHubリポジトリで提供される特定のスニペットをShopifyテーマに追加する必要があります。これらのスニペットにより、ストア内のさまざまなページタイプでのトラッキングと分析に必要なUniversal Data Object（UDO）の実装が可能になります。

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

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

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

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

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

スニペットを追加した後、テンプレートフォルダをクリックして展開します。
各テンプレートに対応するテンプレートに、関連するUDOスニペットへの参照をテンプレートファイルの先頭に挿入します。これらの参照により、各ページタイプのデータレイヤーが正しく初期化されます。

たとえば、データレイヤーを製品ページに統合するには、product.liquidテンプレートを次のように編集します：
- product.liquidファイルの先頭に、スニペットフォルダに追加したproduct_udoスニペットを含めるために、次の行を追加します：
```
{% include 'product_udo' %}
```
- この行は、テンプレートファイル内の既存のコンテンツの前に配置する必要があります。これにより、他のスクリプトが実行される前にデータレイヤーが初期化されます。product.liquidテンプレートは、product_udoスニペットを含めた後、次のようになります：
```
{% include 'product_udo' %}

{% comment %}
  product.liquidテンプレートの内容は/sections/product-template.liquidにあります
{% endcomment %}

{% section 'product-template' %}

<script>
  // 各テンプレートのshop.stringsのデフォルト値をオーバーライドします。
  // 代替製品テンプレートでは、カートに追加ボタン、売り切れ、利用できない状態の値を変更できます。
  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ドキュメント：テーマアーキテクチャを参照してください。
テンプレートにincludeステートメントを追加した後、保存をクリックして変更を適用します。
変更が正常に適用されていることを確認するために、Webブラウザで開発者コンソールを開き、utag.dataを検査します。

注文ステータスページのスクリプトをインストールする

他のページとは異なり、注文ステータスページには管理設定へのアクセス権がありませんので、Tealiumアカウント情報を再設定する必要があります。次の手順に従ってこれらの設定を定義します：

Shopify管理画面から設定をクリックし、チェックアウトをクリックします。
チェックアウト設定で、ページの一番下にある注文ステータスページまでスクロールします。

追加スクリプトに次のコードを追加します：

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

<!-- スクリプトを非同期で読み込む -->
<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 %}
<!-- 注文確認ページのTealiumアカウント情報を設定してください。 -->
{% endif %}

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

tealium_enabledをtrueに設定します。
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がインストールされることが保証されます。

インストール手順

checkout_udo.liquidファイルを開きます。
10行目のプレースホルダーをTealium iQアカウントとプロファイル情報で置き換えます。
変更したコンテンツをコピーし、Shopifyのチェックアウトリキッドファイルに貼り付けます。
変更内容を保存し、統合が正常に機能するかテストします。

このチェックアウトコードは基本的なテンプレートとして機能します。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 初版リリース

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

ライセンス

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