Dairin《簡単に成果を計測できる》
資料請求をする
お問い合せをする
お問い合わせ
資料請求
お問い合わせ

WooCommerceにDairinの計測タグ導入マニュアル

お知らせ

この記事は、生成AIが作成したDairin計測タグ設置の手引きです。何を確認し、どう調べればよいか迷ったときのヒントとしてご覧ください。内容はDairinサポートチームが検証していません。自社で検証が難しい場合や確実な導入をご希望の場合は、有料サポート（IT導入補助金の活用も可能）をご案内しております。こちらからお問い合わせください。

目次

WooCommerce の概要

WooCommerce は WordPress の管理画面から追加できるプラグイン型の EC 基盤です。オープンソースのため利用料はかからず、テーマやプラグインと同じ感覚でデザインと機能を拡張できます。2025 年の最新版では HPOS（High‑Performance Order Storage）によって注文データの処理速度が向上し、メールテンプレートのライブプレビューやホスティング版「Woo Express」の整備など、運用しやすさが高まりました。

Dairin の計測モデルとタグの種類

Dairin で成果を計測するには二段階のタグが必要です。ひとつは全ページ共通で読み込む「プロジェクトタグ」。もうひとつは購入完了時だけ呼び出す「コンバージョンタグ」です。前者で計測用 JavaScript を常時ロードし、後者で売上や顧客 ID などの具体的なコンバージョン情報を送信します。

functions.php を編集して導入する方法

プロジェクトタグ

テーマの header.php の </head> 直前に、次のスクリプトを貼り付けます。テーマアップデートで失われるのを避けるなら子テーマを作るか、スニペット管理系プラグインに登録すると安全です。

<script>
  (function(w,f){w[f]=w[f]||function(){
      w[f].q=w[f].q||[];
      w[f].q.push(arguments);
  };})(window,'dairin');
  dairin("init");
  dairin("view");
</script>
<script src="https://static.dair.in/core/project/xxxxxxxxxxx/dairin.js" async></script>

コンバージョンタグ

WooCommerce では注文完了ページが読み込まれるたびに woocommerce_thankyou というアクションが走ります。子テーマの functions.php に次のフックを追加します。注文 ID から売上金額や顧客 ID を取得し、dairin("complete") に渡しています。

add_action( 'woocommerce_thankyou', 'dairin_complete_tag', 10, 1 );
function dairin_complete_tag( $order_id ){

    if ( ! $order_id ) return;
    $order        = wc_get_order( $order_id );
    $sales_amount = $order->get_total();            // 税込合計
    $customer_uid = $order->get_customer_id() ?: 'guest';
    $campaign     = 'xxxxxxxxxxx';

    echo "<script>
      (function(w,f){w[f]=w[f]||function(){
        w[f].q=w[f].q||[];
        w[f].q.push(arguments);
      };})(window,'dairin');
      dairin('complete',{
        customer_uid:'{$customer_uid}',
        sales_amount:{$sales_amount},
        campaign_code:'{$campaign}'
      });
    </script>";
}

キャッシュ系プラグインが購入完了ページを保存しないよう除外設定を入れておくと、他の購入者へ誤ってタグが再送信されるのを防げます。

Google Tag Manager（GTM）で導入する方法

前準備

「Google Tag Manager for WordPress（GTM4WP）」をインストールし、GTM コンテナ ID を入力します。これで WordPress 側のヘッダーと <body> 冒頭に GTM スニペットが自動挿入され、WooCommerce 購入完了時には purchase という dataLayer イベントが出力される設定になります。

プロジェクトタグ

GTM 管理画面で「カスタム HTML タグ」を作成し、前述のプロジェクトタグをそのまま貼り付けます。トリガーは「すべてのページ」で問題ありません。

コンバージョンタグ

1 行目の self‑invoking 関数と dairin("complete") だけを含む「カスタム HTML タグ」を別に作り、トリガーを購入完了ページに限定します。方法は二通りあります。ひとつは URL 判定で /checkout/order-received/ または /thank-you/ を含むページパスにマッチさせる方法。もうひとつは WooCommerce が出力する purchase イベントを dataLayer で捕まえて発火させる方法です。GTM4WP の WooCommerce 設定で「Order data in dataLayer」をオンにしておくと、売上金額 {{Transaction Revenue}} や注文 ID などを変数として呼び出せます。citeturn1search1

<script>
  (function(w,f){w[f]=w[f]||function(){
      w[f].q=w[f].q||[];
      w[f].q.push(arguments);
  };})(window,'dairin');

  dairin("complete",{
    customer_uid: '{{User ID}}',
    sales_amount: {{Transaction Revenue}},
    campaign_code: 'xxxxxxxxxxx'
  });
</script>

タグの実行順序を制御するため、「このタグを発火させる前にプロジェクトタグを完了させる」にチェックを入れておくと、先に dairin.js が読み込まれることが保証されます。

テストとトラブルシューティング

テスト商品を 1 円などで準備し、購入フローを完走してブラウザ開発ツールの Network タブで https://static.dair.in/track へのリクエストを確認します。同時に Dairin 管理画面のリアルタイムログを開き、complete イベントが一度だけ到達しているかをチェックします。重複や未送信が起こる場合は、キャッシュ設定とリダイレクトの挙動を見直すとほぼ解消します。

まとめ

WooCommerce は WordPress で EC サイトを構築する際にもっとも導入しやすい選択肢です。Dairin の計測タグは

  • テーマ編集（functions.php ＋ header.php）
  • Google Tag Manager

どちらの方法でも設置できます。後者はコードの管理を WordPress から切り離せるため、非エンジニアが多い運営体制でも扱いやすいのが利点です。自社の運用フローに合わせ、最適な手順で導入してみてください。

お知らせ
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次