ブログに戻る

ブログ

Shopify 向け SignalHost:最初のページビューから購入までのサーバーサイド計測

公開 · 読了 10 分

Shopify 向けの SignalHost はまだ Shopify App Store に掲載されていません。それまでは手動で追加できます: SignalHost を手作業で追加する

SignalHost アプリは、テーマの編集もコードも不要で、Shopify ストアにサーバーサイド Google Tag Manager を導入します。接続すると、SignalHost がストアにウェブピクセルを作成し、ページビュー、カート、チェックアウトの全ステップ、購入をあなた専用のタギングサーバーに送信します。タギングサーバーはそれを Google アナリティクス 4 と広告プラットフォームに転送します。このガイドでは、インストール、接続、テスト、任意のテーマ埋め込み、そしてうまくいかないときの対処を説明します。

始める前に

  • オンラインストアのある Shopify ストア。アプリはストアフロントと Shopify のチェックアウトで動作します。
  • SignalHost のアカウント。試すだけなら無料プランで十分です。毎月 1 万リクエスト、コンテナ 1 つ。アカウントは接続の途中でも作成できます。
  • Shopify 管理画面でアプリをインストールする権限。

1. アプリをインストールする

Shopify App Store で SignalHost: Server Tag Manager を開き、インストールします。アプリが Shopify に求める権限は 2 つだけです。ウェブピクセルの管理と、カスタマーイベントの読み取りです。テーマへのアクセスも、顧客データへのアクセスも求めません。インストールが終わると、Shopify 管理画面の「アプリ」から開けるようになります。

2. ストアをコンテナに接続する

アプリのページには「SignalHost で接続」と、初めての方向けに「無料アカウントを作成」があります。どちらを押しても新しいタブで signalhost.io が開くので、そこでログインするか会員登録してください。

次の画面には、アプリができること(ストアの全ページへのトラッキングコードの追加、カートと購入手続きのイベントのコンテナへの送信、コンテナのステータスの読み取り)と、できないこと(顧客の連絡先情報の読み取り、Google アカウントの使用、請求情報の閲覧)が表示されます。続いて、このストアで使うコンテナを尋ねられます。コンテナとは、あなた専用のタギングサーバーです。Tag Manager のウェブコンテナとサーバーコンテナで構成され、あなた自身の Google アカウントに構築されるので、ずっとあなたのものです。

コンテナを 1 つ選んで「接続」を押すか、「(ストア名)用の新しいコンテナ」を選んで「コンテナを作成」を押し、短いウィザードを進めます。Shopify に戻ると、アプリのページが自動で更新されます。「接続の確認」と表示された場合は、示されたアカウントとコンテナを確かめてから「接続を確定」を押してください。

3. 計測は自動で始まる

貼り付けるコードも、編集するテーマも、公開する作業もありません。ストアがリンクされると、SignalHost がアプリのウェブピクセルを作成し、あなたのタギングアドレスと、コンテナの Google アナリティクス 4 の測定 ID を渡します。Shopify はそれをストアフロントの全ページとチェックアウトで実行します。新しいコンテナの構築中、アプリには「もう少しで完了です」と表示され、その後「計測が稼働しています」に変わります。

4. テストする

新しいタブでストアを開き、Cookie バナーで同意して、商品を表示し、カートに入れ、チェックアウトを始めてください。アプリに戻ると、数分以内に「過去 7 日間」に「ページビュー」、「カートに追加」、「購入手続き」、「購入」の数が表示されます。「ステータスを更新」を押すと最新の状態を読み込みます。

「アクセス解析と設定を開く」を押すと signalhost.io のコンテナが開きます。Growth プラン以上では、そこの「ライブイベント監視」に、届いたイベントが国、ブラウザ、同意の状態とともに 1 件ずつ表示されます。

アプリが送信するもの

Shopify は自身のカスタマーイベントをピクセルに渡し、ピクセルはそれを Google アナリティクス 4 のイベントに変換します:

  • page_view:ストアフロントとチェックアウトのページで
  • view_item、view_item_list、search
  • add_to_cart、remove_from_cart、view_cart
  • begin_checkout、add_shipping_info、add_payment_info
  • purchase:金額、税金、送料、割引コード付き

ピクセルは訪問者の Google アナリティクスの Cookie を使うので、チェックアウトのイベントは、その前の商品ページと同じ訪問者、同じセッションに属します。すべてのリクエストは広告ブロッカーが認識できない形でブラウザから送られ、タギングサーバーがそれを Google アナリティクス 4 と、コンテナページで設定した広告プラットフォーム(Google 広告、Meta、TikTok など)に転送します。

Shopify は、訪問者のプライバシーの選択がアナリティクスを許可している場合にだけピクセルを実行します。つまり、誰が計測されるかは Shopify の Cookie バナーが決めます。広告に関する選択はすべてのイベントとともに送られるので、サーバーコンテナは広告プラットフォームへのイベントの送信を控えることができます。アプリが顧客の連絡先情報を読み取ることはありません。

任意:自分の Tag Manager コンテナを全ページで読み込む

ピクセルは自分でイベントを送信し、Tag Manager のウェブコンテナは読み込みません。ストアフロントにそのコンテナが必要なのは、ヒートマップツールや GA4 のスクロール・クリック計測など、コンテナ独自のタグがある場合だけです。その場合は、アプリで「任意:お客様自身の Tag Manager コンテナを全ページで読み込む」を開き、「テーマエディターでオンにする」を押します。SignalHost がオンになった状態で Shopify のテーマエディターが開き、そこで「保存」を押すと反映されます。

以後、ストアフロントのページでは Tag Manager コンテナがページビューを送信し、ピクセルはそこでのページビューを送らないので、二重に数えられることはありません。埋め込みの設定「Use Shopify's cookie banner for Google Consent Mode」は、タグに訪問者の回答を待たせます。オフにするのは、別のアプリがすでに Google Consent Mode を設定している場合だけにしてください。

独自のトラッキングドメイン

コンテナは signalhost.io 配下のアドレスで始まります。有料プランでは、コンテナページの「カスタムドメインを設定する」が、metrics.yourshop.com のようなストアのドメインのサブドメインの設定を、DNS レコード 1 つで案内します。ブラウザはそれをファーストパーティとして扱うので、その Cookie は自社のものとして数えられ、広告クリックの成果も失われません。ドメインが稼働すると、アプリは数分以内にストアフロントとチェックアウトを切り替えます。手作業で置き換えるものは何もありません。

SignalHost を手作業で追加する

アプリを使わずに Shopify ストアに SignalHost を入れることもできます。signalhost.io でコンテナを開き、「サイトに設置する」カードにあるスニペットを見つけて「コピー」を押します。次に Shopify で「オンラインストア › テーマ › ⋯ › コードを編集」に進み、theme.liquid を開いて、head の開始タグの直後にスニペットを貼り付けます。テーマがすでに同じアナリティクス プロパティ向けの Google Tag Manager や Google タグを読み込んでいる場合は、2 つ目を追加するのではなく、そのスニペットを置き換えてください。保存してストアを訪問し、コンテナページで「設置しました」を押します。

これでテーマのページに Tag Manager コンテナが読み込まれ、ページビューと、テーマ自身がデータレイヤーにプッシュするものが送られます。ただし、ピクセルが追加するものは失われます。Shopify のチェックアウトではテーマのコードが実行されないため、チェックアウトの各ステップと購入は theme.liquid のスニペットには決して届きません。商品とカートのイベントもピクセルから来るものです。独自ドメインが稼働したら、スニペットは自分で置き換えます。後からアプリをインストールする場合は、先にスニペットを削除してください。そうしないと、すべてのページビューが二重に数えられます。

プランとお支払い

アプリ経由で接続したストアは、SignalHost の料金を Shopify を通じて支払います。アプリのページの「プランとお支払い」を押すと、プランを選択・変更する Shopify のページが開き、料金は Shopify の請求書に記載されます。接続後は、今月のリクエスト数がプランの上限とあわせてアプリに表示されます。

1 つのアカウントの支払元は 1 つです。SignalHost アカウントがすでにカードで支払っている場合や、別の Shopify ストアが支払っている場合は、アプリがその旨を表示し、このストアのプランは使用されません。二重に支払わないよう、どちらかを解約してください。

管理と接続の解除

「接続を解除」はアプリのページの一番下にあり、もう一度押すと実行されます。SignalHost はアプリのピクセルと、テーマ埋め込みが読み取る値を削除し、数分以内にストアでの読み込みを停止します。コンテナとそのアクセス解析は残り、「SignalHost で接続」でストアを再びリンクできます。signalhost.io の「設定 › 接続済みサイト」にもストアが表示されます。

代わりに Shopify でアプリをアンインストールした場合、SignalHost はストアを接続解除済みとして扱い、Shopify 経由で支払っていたプランはアプリとともに終了します。アカウントは無料プランに戻ります。

うまくいかないとき

  • アプリが「もう少しで完了です」のまま:新しいコンテナがまだ構築中で、これには数分かかります。構築に失敗した場合は、コンテナを開いて理由を確認してください。
  • コンテナにまだ Google アナリティクスのプロパティがないとアプリに表示される:コンテナを開いてプロパティを追加してください。それまで、ピクセルにはデータの送信先がありません。
  • 「過去 7 日間」がゼロのまま:公開中のストアを開き、Cookie バナーで同意してください。Shopify は、プライバシーの選択がアナリティクスを許可している訪問者に対してのみピクセルを実行します。
  • テーマ埋め込みをオンにしたところ、トラッキングコードが 2 回入っている、または古いコピーがテーマに残っているとアプリに表示される:以前に theme.liquid に貼り付けたスニペットを削除してください。
  • プランの上限に達した:アップグレードしない限り、アプリに表示される日付まで新しいイベントは記録されません。
  • その他:ストアのアドレスを添えて hello@signalhost.io までご連絡ください。

商標について

SignalHost は Algorithmo GmbH の独立した製品であり、Shopify、Google、Meta、TikTok とは提携しておらず、これらから承認を受けたものでもありません。Google Analytics、Google Ads、Google Tag Manager は Google LLC の商標です。Meta は Meta Platforms, Inc. の商標です。TikTok は ByteDance Ltd. の商標です。Shopify は Shopify Inc. の商標です。

広告ブロッカーにデータを奪われ続けない

無料で始めましょう。最初のコンテナを数分で稼働できます。