インストール

仕組み

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

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

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

構成手順

構成

以下のJSONオブジェクトを、ShopifyテーマのConfig/settings_schema.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"
    }
  ]
}

テーマをカスタマイズする際に、General SettingsタブでTealium固有の構成を編集します。

スニペット

このGitHubリポジトリのSnippetsフォルダからファイルを取り出し、ShopifyテーマのSnippetsフォルダにドロップします。これらのファイルには、各種ページタイプのUDO実装が含まれています。

詳細については、Shopifyのテーマスニペットのドキュメンテーションを参照してください。

テンプレート

各ページで、そのページのデータレイヤーに対応する正しいスニペットを含めます。ページのテンプレートに移動するか、インデックス（ホーム）ページなどの特定のページのセクションに移動し、関連するスニペットを挿入します。例えば、Shopifyが提供するデフォルトのDebutテーマのproduct.liquidテンプレートファイルは、以下のようになります。ここでは、product_udoスニペットがファイルの最初に追加されています。

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

注文ステータス

他のページとは異なり、注文ステータスページは管理構成にアクセスできないため、Tealiumアカウント情報を再構成する必要があります。Order processingセクションのAdditional scriptsボックスに構成を定義します。これは、Shopifyのドキュメンテーションで説明されています：

1. Shopify管理画面から、Settingsをクリックし、次にCheckoutをクリックします。
2. Order processingセクションの下部近くで、Additional content & scriptsを見つけます。
3. 以下のコードを追加します。

    "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 %}

4. tealium_enabledをtrueに構成します。
5. tealium_account、tealium_profile、tealium_environment変数を構成で構成したものと一致するように構成します。

リリースノート

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というタイトルのファイルに含まれるライセンス契約の条項と条件に従います。このリポジトリに含まれるファイルをダウンロードまたは使用する前に、ライセンスをお読みください。これらのファイルをダウンロードまたは使用することにより、ライセンス契約の遵守に同意したことになります。