Shopifyピクセル設置手順と確認

まず、Shopifyの管理画面にアクセスします。

Shopify管理画面

管理画面左側のメニューから「オンラインストア」 > 「テーマ」を選択します。

現在有効化されているテーマの「…」ボタンをクリックし、「コードを編集」を選択します。

オンラインストアを選択

オンラインストアを選択

テーマを選択

テーマを選択

コードを編集を選択

コードを編集を選択

コードエディタを開く

コードエディタを開く

左側のファイル一覧から「layout」フォルダ内の「theme.liquid」ファイルを選択します。

コードエディタ内で、`</body>` タグを探します。通常、ファイルの末尾付近にあります。

ご提示のJavaScriptコードを、この `</body>` タグの直前に貼り付けます。

<script> (function() { // ユーザーの流入元（referrer）を取得 var referrer = document.referrer || "Direct"; // 直接流入の場合は"Direct"として処理 // URLのパラメータ（例: utm_sourceやutm_mediumなど）を取得する関数 function getUrlParameter(name) { return new URLSearchParams(window.location.search).get(name); } // マーケティングチャネル（例: utm_source、utm_mediumなど） var channelSource = getUrlParameter("utm_source"); var channelMedium = getUrlParameter("utm_medium"); var channelCampaign = getUrlParameter("utm_campaign"); // イベントのタイプ（購入、カート追加など） var eventType = "purchase"; // 例えば購入イベントの場合 // 必要なデータをJSON形式でまとめる var eventData = { referrer: referrer, // 流入元 channel: { source: channelSource || "unknown", // utm_sourceなど medium: channelMedium || "unknown", // utm_mediumなど campaign: channelCampaign || "unknown" // utm_campaignなど }, eventType: eventType // イベントのタイプ（例: 購入、カート追加など） }; // ピクセルサーバーにデータを送信 fetch("https://x162-43-39-30.static.xvps.ne.jp/api/pixel", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(eventData) // JSONデータを送信 }) .then(function(response) { if (!response.ok) { throw new Error("Network response was not ok: " + response.statusText); } return response.json(); }) .then(function(data) { console.log("Pixel response:", data); }) .catch(function(error) { console.error("Pixel error:", error); }); })(); </script>
コードの設置場所

画像では、</body> タグの直前にJavaScriptコードを貼り付けています。

**`<head>` から `</body>` 直前にコードを移動する理由:** <head> 内に記述されたスクリプトは、ページのレンダリングをブロックする可能性があります。 つまり、ブラウザはスクリプトの実行が完了するまで、ページのコンテンツを表示しません。 ピクセルコードは、ページの主要なコンテンツの表示を遅らせる必要がないため、 `</body>` 直前に配置することで、ページの表示速度を向上させることができます。

コードを貼り付けたら、右上の「保存」ボタンをクリックして変更を保存します。

実際にShopifyストアにアクセスし、商品の閲覧、カートへの追加、購入などのアクションを行い、ピクセルサーバーにデータが送信されているかモニタリングしてください。

ブラウザの開発者ツールなどを利用して、ネットワークリクエストを確認し、 https://x162-43-39-30.static.xvps.ne.jp/api/pixel へのPOSTリクエストが行われているか、また、送信データの内容が正しいかを確認してください。

もし、依然として unknown のデータが出力される場合は、URLパラメータの設定、ブラウザのキャッシュ、他のShopifyアプリとの干渉なども疑ってみてください。

Shopify管理画面からも、ピクセル設定に関連するいくつかの項目を確認できます。

Shopify管理画面での操作は、慎重に行ってください。
設定を変更する前に、必ずバックアップを取っておくことをお勧めします。
不明な点があれば、Shopifyのサポートに問い合わせることも検討してください。

6.1 アプリの確認

ShopifyアプリがURLパラメータを操作していないか確認します。特に、URL短縮アプリ、リダイレクトアプリ、トラッキング・分析系のアプリが影響を与える可能性があります。

  1. Shopify管理画面で「アプリ」を選択します。 (参考: Shopifyヘルプ - アプリ)
  2. インストールされているアプリの一覧を確認します。
  3. 各アプリの設定画面を開き、URLに関する設定や、トラッキングに関する設定を確認します。
  4. もし、URLパラメータを書き換えるような設定があれば、必要に応じて変更するか、アプリを一時的に停止して動作を確認します。

6.2 Shopify Flowの確認

Shopify Flowなどの自動化アプリが、ワークフローの中でURLパラメータを操作していないか確認します。

  1. Shopify管理画面で「アプリ」から「Flow」などの自動化アプリを開きます。 (参考: Shopifyヘルプ - Shopify Flow)
  2. 有効になっているワークフローを確認し、URLに関する操作（書き換え、削除など）を行うステップがないか確認します。
  3. 該当するステップがあれば、設定を変更するか、一時的にワークフローを無効化して動作を確認します。

6.3 テーマコードの再確認

念のため、`theme.liquid` に挿入したピクセルコードが、Shopifyのテーマ更新などで変更されていないか確認します。コードの挿入位置、コードの内容に誤りがないか再確認します。

  1. Shopify管理画面の「オンラインストア」＞「テーマ」から、「コードを編集」を選択します。 (参考: Shopifyヘルプ - テーマのテンプレート)
  2. `theme.liquid` を開き、ピクセルコードを確認・修正します。

6.4 リダイレクト設定の確認

Shopify内でリダイレクト設定を行っている場合、それがURLパラメータに影響を与えていないか確認します。

  1. Shopify管理画面の「オンラインストア」＞「ナビゲーション」＞「URLリダイレクト」から、設定されているリダイレクトルールを確認します。 (参考: Shopifyヘルプ - URLリダイレクト)
  2. 意図しないリダイレクトがないか、リダイレクトによってパラメータが失われていないか確認し、必要であれば修正または削除します。

テストストアで収集できる画像は以上なので、もし不安な作業があれば管理画面の画像と調べてほしい設定などのデータをアップしてもらえれば、調査し表示できると思います。

Shopifyの管理画面の構成やヘルプドキュメントの内容は変更される場合があります。
上記URLは参考として、必要に応じてShopifyの公式ヘルプセンターで最新情報を参照してください。