1. カテゴリページの表示

<!--{if $arrPageLayout.is_category_page}-->
  <script>
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      'event': 'categoryView',
      'categoryName': '<!--{$tpl_title}-->',
      'categoryID': '<!--{$category_id|escape}-->',
      // ログインしている場合のみ設定
      <!--{if $tpl_login}-->'userEmail': '<!--{$tpl_email}-->' <!--{/if}-->
    });
  </script>
<!--{/if}-->

Google Tag Managerの[ワークスペース]にアクセスし、サイドバーの「変数」をクリックします。
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。

トリガーの新規作成を行います。下記のように設定し保存してください。

タグの新規作成を行います。下記のように設定し保存してください。

トリガーの追加を求められるため、作成したトリガーを選択し保存してください。

2. 商品詳細ページの表示

<!--{if $arrPageLayout.is_product_page}-->
  <script>
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      'event': 'productDetailView',
      'productID': '<!--{$arrProduct.product_id}-->',
      'productName': '<!--{$arrProduct.name}-->',
      'categoryName': '<!--{$tpl_subtitle|escape}-->',
      'price': '<!--{assign var=session_customer_id value=$smarty.session.customer|@null_coalescing:"customer_id"}--><!--{assign var=price02_min value=$arrProducts|@reduce_tax_min_price_from_product:$arrSiteInfo:$session_customer_id:$smarty.section.cnt.index}--><!--{assign var=price02_max value=$arrProducts|@reduce_tax_max_price_from_product:$arrSiteInfo:$session_customer_id:$smarty.section.cnt.index}--><!--{if $price02_min == $price02_max}--><!--{$price02_min|number_format}--><!--{else}--><!--{$price02_min|number_format}-->～<!--{$price02_max|number_format}--><!--{/if}-->',
      'quantity':1,
      // ログインしている場合のみ設定
      <!--{if $tpl_login}-->'userEmail': '<!--{$tpl_email}-->' <!--{/if}-->
    });
    document.addEventListener('DOMContentLoaded', function() {
      document.querySelector('input[name="quantity"]').addEventListener('change', function() {
        updateProductQuantity(this.value); // 数量を更新する関数を呼び出し
      });
    });
    function updateProductQuantity(quantity) {
      // データレイヤーの更新
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        'event': 'updateQuantity',
        'quantity': quantity
      });
      //console.log('updateProductQuantity: ' + quantity);
    }
  </script>
<!--{/if}-->

Google Tag Managerの[ワークスペース]にアクセスし、サイドバーの「変数」をクリックします。
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。

トリガーの新規作成を行います。下記のように設定し保存してください。

タグの新規作成を行います。下記のように設定し保存してください。

トリガーの追加を求められるため、作成したトリガーを選択し保存してください。

3. 商品のカート追加

<!--{if $arrPageLayout.is_product_page}-->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // カート追加ボタンを取得
      var addToCartButton = document.querySelector('.js-product-detail-add-to-cart-button');
      // 定期購入ボタンを取得
      var addToCartRegularSaleButton = document.querySelector('.js-product-detail-add-to-cart-button-for-regular-sale');
      // 通常購入ボタンが存在するかチェック
      if (addToCartButton) {
        // 通常購入ボタンにクリックイベントリスナーを追加
        addToCartButton.addEventListener('click', function() {
          // dataLayerに情報をプッシュ
          window.dataLayer = window.dataLayer || [];
          dataLayer.push({
            'event': 'addToCart',
            'productID': '<!--{$arrProduct.product_id}-->',
            'productName': '<!--{$arrProduct.name}-->',
            'categoryID': '<!--{$arrProduct.category_id}-->',
            'price': '<!--{assign var=price02_min value=$arrProduct|@reduce_tax_min_price_from_product:$arrSiteInfo:$session_customer_id}--><!--{$price02_min|number_format}-->',
            'quantity': 1,
            // ログインしている場合のみ設定
            <!--{if $tpl_login}-->'userEmail': '<!--{$tpl_email}-->'<!--{/if}-->
          });      
          //console.log('addToCart: Product ID: ' + '<!--{$arrProduct.product_id}-->');
        });
      }
      // 定期購入ボタンが存在するかチェック
      if (addToCartRegularSaleButton) {
        // 通常購入ボタンにクリックイベントリスナーを追加
        addToCartRegularSaleButton.addEventListener('click', function() {
          // dataLayerに情報をプッシュ
          window.dataLayer = window.dataLayer || [];
          dataLayer.push({
            'event': 'addToCartRegularSale',
            'productID': '<!--{$arrProduct.product_id}-->',
            'productName': '<!--{$arrProduct.name}-->',
            'categoryID': '<!--{$arrProduct.category_id}-->',
            'price': '<!--{assign var=price02_min value=$arrProduct|@reduce_tax_min_price_from_product:$arrSiteInfo:$session_customer_id}--><!--{$price02_min|number_format}-->',
            'quantity': 1,
            // ログインしている場合のみ設定
            <!--{if $tpl_login}-->'userEmail': '<!--{$tpl_email}-->'<!--{/if}-->
          });      
          // console.log('addToCart: Product ID: ' + '<!--{$arrProduct.product_id}-->');
        });
      }
    });
  </script>
<!--{/if}-->

Google Tag Managerの[ワークスペース]にアクセスし、サイドバーの「変数」をクリックします。
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。

トリガーの新規作成を行いま。下記のように設定し保存してください。

タグの新規作成を行います。下記のように設定し保存してください。

トリガーの追加を求められるため、作成したトリガーを選択し保存してください。

4. カートページ表示

<!--{if $smarty.Server.SCRIPT_NAME|strpos:'/cart/' !==FALSE}-->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        // list-item要素の数をカウント
        var itemCount = document.querySelectorAll('.list-item').length;
        // dataLayerに情報をプッシュ
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({
          'event': 'cartView',
          'cartTotal': '<!--{$arrData.total|number_format}-->', // カートの合計金額
          'itemCount': itemCount, // カート内の商品点数
          // ログインしている場合のみ設定
          <!--{if $tpl_login}-->'userEmail': '<!--{$tpl_email}-->'<!--{/if}-->
        });
        //console.log('cartView: Cart Total: ' + '<!--{$arrData.total|number_format}-->' + ', Item Count: ' + itemCount );
      });
    </script>
<!--{/if}-->

Google Tag Managerの[ワークスペース]にアクセスし、サイドバーの「変数」をクリックします。
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。

トリガーの新規作成を行います。下記のように設定し保存してください。

タグの新規作成を行います。下記のように設定し保存してください。

トリガーの追加を求められるため、作成したトリガーを選択し保存してください。

5. 購入手続きの開始（Step 1）

<!--{if $smarty.Server.SCRIPT_NAME|strpos:'/shopping/deliv_payment.php' !== FALSE || $smarty.Server.SCRIPT_NAME|strpos:'/shopping/input_day.php' !== FALSE}-->
<script>    
    // dataLayerに情報をプッシュ
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      'event': 'checkoutBegin',
      'TraceID': '<!--{$smarty.cookies._ut}-->',
      'step': 1,
      // ログインしている場合のみ設定
      <!--{if $tpl_login}-->'userEmail': '<!--{$tpl_email}-->'<!--{/if}-->
    });
    // console.log('checkoutBegin: TraceID: ' + '<!--{$smarty.cookies._ut}-->');
  </script>
<!--{/if}-->

Google Tag Managerの[ワークスペース]にアクセスし、サイドバーの「変数」をクリックします。
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。

トリガーの新規作成を行います。下記のように設定し保存してください。

タグの新規作成を行います。下記のように設定し保存してください。

トリガーの追加を求められるため、作成したトリガーを選択し保存してください。

6. 6. 注文確認（Step 2）

<!--{if $smarty.Server.SCRIPT_NAME|strpos:'/shopping/confirm.php' !==FALSE}-->
  <script>
    // dataLayerに情報をプッシュ
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      'event': 'orderReview',
      'TraceID': '<!--{$smarty.cookies._ut}-->',
      'step': 2,
      // ログインしている場合のみ設定
      <!--{if $tpl_login}-->'userEmail': '<!--{$tpl_email}-->'<!--{/if}-->
    });
    //console.log('orderReview: TraceID: ' + '<!--{$smarty.cookies._ut}-->');
  </script>
<!--{/if}-->

Google Tag Managerの[ワークスペース]にアクセスし、サイドバーの「変数」をクリックします。
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。

トリガーの新規作成を行います。下記のように設定し保存してください。

タグの新規作成を行います。下記のように設定し保存してください。

トリガーの追加を求められるため、作成したトリガーを選択し保存してください。

7. 注文完了（Step 3）

<!--{if $smarty.Server.SCRIPT_NAME|strpos:'/shopping/complete.php' !==FALSE}-->
  <script>
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      'event': 'purchaseComplete',
      'TraceID': '<!--{$smarty.cookies._ut}-->',
      'step': 3,
      'revenue': '<!--{$arrGAOrder.payment_total|number_format}-->', // 購入金額
      // ログインしている場合のみ設定
      <!--{if $tpl_login}-->'userEmail': '<!--{$tpl_email}-->'<!--{/if}-->
    });
    //console.log('purchaseComplete: Revenue: ' + '<!--{$arrGAOrder.payment_total|number_format}-->' + ', TraceID: ' + '<!--{$smarty.cookies._ut}-->');
  </script>
<!--{/if}-->

Google Tag Managerの[ワークスペース]にアクセスし、サイドバーの「変数」をクリックします。
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。

トリガーの新規作成を行います。下記のように設定し保存してください。

タグの新規作成を行います。下記のように設定し保存してください。

トリガーの追加を求められるため、作成したトリガーを選択し保存してください。

8. 会員登録の完了

<!--{if $smarty.Server.SCRIPT_NAME|strpos:'entry/complete.php' !==FALSE}-->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        'event': 'registrationComplete',
        'userType': 'new',
       'userEmail': '<!--{$tpl_email}-->' // テンプレートのユーザーメール
      });
      console.log('Event pushed to dataLayer on entry/complete: registrationComplete');
    });
  </script>
<!--{/if}-->

Google Tag Managerの[ワークスペース]にアクセスし、サイドバーの「変数」をクリックします。
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。

トリガーの新規作成を行います。下記のように設定し保存してください。

タグの新規作成を行います。下記のように設定し保存してください。

トリガーの追加を求められるため、作成したトリガーを選択し保存してください。

9. LPページ表示

window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      'event': 'lpView',
      'lpID': '<!--{$smarty.get.p}-->', 
      // ログインしている場合のみ設定
      <!--{if $tpl_login}-->'userEmail': '<!--{$tpl_email}-->' <!--{/if}-->
    });

Google Tag Managerの[ワークスペース]にアクセスし、サイドバーの「変数」をクリックします。
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。

トリガーの新規作成を行います。下記のように設定し保存してください。

タグの新規作成を行います。下記のように設定し保存してください。

トリガーの追加を求められるため、作成したトリガーを選択し保存してください。

9-2. 商品選択の値変更

<!--{if $smarty.Server.SCRIPT_NAME|strpos:'shopping/lp.php' !==FALSE}-->
<script>
   window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      'event': 'lpView',
      'lpID': '<!--{$smarty.get.p}-->', 
      // ログインしている場合のみ設定
      <!--{if $tpl_login}-->'userEmail': '<!--{$tpl_email}-->' <!--{/if}-->
    });
    // 複数商品登録されているLPの場合に、商品選択が変更された時（変更毎にイベントを送る）
    document.addEventListener('DOMContentLoaded', function() {
    // クラス名 'product_id' のセレクトボックスを取得
    const selectBox = document.querySelector('select.product_id');
    // セレクトボックスが正しく取得されているか確認
    if (selectBox) {
      selectBox.addEventListener('change', function(event) {
        // 選択された商品IDを取得
        const productId = event.target.value;
        // dataLayerにイベントを送信
        dataLayer.push({
          'event': 'lpProductSelection',
          'productID': productId,
        });
      });
    } else {
      console.error('Select box with class "product_id" not found.');
    }
  });
  </script>
<!--{/if}-->

Google Tag Managerの[ワークスペース]にアクセスし、サイドバーの「変数」をクリックします。
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。

トリガーの新規作成を行います。下記のように設定し保存してください。

タグの新規作成を行います。下記のように設定し保存してください。

トリガーの追加を求められるため、作成したトリガーを選択し保存してください。

10. LP 注文確認

<!--{if $smarty.Server.SCRIPT_NAME|strpos:'shopping/lp.php' !==FALSE}-->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
    // 対象のボタンを取得
    const button = document.getElementById('confirm_submit_image');
    // MutationObserverのコールバック関数を定義
    const observerCallback = (mutationsList) => {
      // console.log('ok');
      for (const mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'disabled') {
          if (!button.disabled) {
            // ボタンのdisabledが解除された場合の処理
            // console.log('Button is enabled now!');
            // 必要な処理をここに追加
            dataLayer.push({
              'event': 'orderReview',
              'TraceID': '<!--{$smarty.cookies._ut}-->',
              'step': 2,
              'referrer':'<!--{$lp_post.p}-->',
              'userEmail': '<!--{$tpl_email}-->' // ログインしている場合のみ設定
            });
          }
        }
      }
    };
    // MutationObserverのインスタンスを作成
    const observer = new MutationObserver(observerCallback);
    // ボタンの属性変更を監視
    observer.observe(button, {
        attributes: true  // 属性の変化を監視
    });
    });
  </script>
<!--{/if}-->

Google Tag Managerの[ワークスペース]にアクセスし、サイドバーの「変数」をクリックします。
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。

トリガーの新規作成を行います。下記のように設定し保存してください。

タグの新規作成を行います。下記のように設定し保存してください。

トリガーの追加を求められるため、作成したトリガーを選択し保存してください。

11. LP 注文完了

データレイヤーのイベント例
7. 注文完了（Step 3）と同一のため、省略。

変数定義のタイミング
7. 注文完了（Step 3）と同一のため、省略。