顧客イベントは、顧客がビジネスとのさまざまな接点を通じてどのようにやり取りしているかを示す主要な行動です。これには支払いの実行、販売の開始など、重要なやり取りのポイントが含まれます。統合されたサードパーティサービスは、ピクセルによって生成された顧客イベントデータを利用することで、マーケティングオートメーションと分析を改善します。

これらの行動の理解を深めることは、販売戦略を大幅に改善することができます。データを提供することで、マーケティングオートメーション、分析、およびターゲットオーディエンスを洗練することができます。統合されたサードパーティサービスは、ピクセルによって生成された顧客イベントデータ(ログとも呼ばれます)を使用して、販売アプローチを最適化することができます。

このブログは、ブランド開発者がShopifyアカウントを介してこれらのピクセルを追加および管理する方法を理解するのに役立ちます。さあ、基礎から始めてみましょう。

ピクセルとは何ですか?

ピクセルについての説明から、B2B向けのカスタムピクセルの作成、さまざまなチャネルでのストアへの成功した実装の確保まで、このガイドでは、Shopifyコミュニティ内で顧客とのやり取りを効果的に管理するために知っておく必要のあるすべての側面を網羅しています。 Shopifyピクセルマネージャーで顧客イベントを追跡するためのピクセルを管理および追加できます。

Shopifyピクセルマネージャーを使用すると、顧客イベントの追跡のためにピクセルを追加および管理できます。顧客イベントは、お客様のブラウザで発生するアクション、つまりリンクのクリックやショッピングカートへのアイテムの追加などを指します。

Shopify管理セクションの「カスタマーイベント」では、エキスパートがピクセルを追加および管理できます。

ピクセルは2つの方法でオンラインストアに追加または移行できます。マーケティングおよびデータ収集アプリによってインストールされたアプリピクセルと、開発者がアカウント内のピクセルマネージャーを介して手動で追加できるカスタムピクセルです。

以前は、商人はオンラインストアにJavaScriptのスニペットを手作業で追加することができました。これはオンライン設定、チェックアウトスクリプト、およびアプリで行うことができました。これらのスクリプトはほとんどの場合、品質がチェックされず、それらを管理するのに多くの時間がかかりました。ピクセルマネージャーを使用すると、スクリプトは単一の管理ツールに保持され、サンドボックス環境で実行されます

開始する前に、テーマにすでに存在するトラッキングコードがないことを確認してください。このコードは、theme.liquid、product.liquid、およびcheckout.liquidなどのリキッドテンプレート、およびチェックアウト設定の追加スクリプトフィールドに通常見つかります。このステップは、競合するスクリプトの心配なく自信を持って前進できるようにするために重要です。

店舗にアプリピクセルまたはカスタムピクセルを追加する利点

  • オンラインストアでのチェックアウトイベントなど、顧客イベントのストリームにアクセスできます。
  • オンラインストアとお客様の追加保護。第三者プロバイダーと共有する顧客情報をより制御できます。
  • 非機能のJavaScriptコードの実行やオンラインストア、チェックアウトへの影響を防ぎます。
  • プライバシーの遵守に関する統合ツール

カスタムピクセルのコードを作成する

サードパーティのJavaScript SDKを作成する

ピクセルに関連付けられたコードは、使用しているサードパーティサービスから提供されます。トラッキングコードとJavaScript SDKが通常、ピクセルの2つのパーツです。ShopifyピクセルsandboxではJavaScriptしか許可されていないため、サードパーティサービスのコードからHTMLを削除する必要があります。

これはMetaピクセルの例です。サードパーティ間のposピクセルにはわずかなバリエーションがあります。

Meta Pixel Code

イメージクレジット:Shopify

スクリプトsrc=でロードされるドメインピクセルが見つかる場合があります。ShopifyピクセルはHTMLと互換性がないため、これをJavaScriptの同等物に変更する必要があります。PageViewイベントの追跡コードも削除されているため、次のステップで追加されます。

Script

 イメージクレジット:Shopify

スクリプトsrc=でロードされるピクセルが見つかる場合があります。ShopifyピクセルはHTMLと互換性がないため、これをJavaScriptの同等物に変更する必要があります。

標準イベントおよびカスタム顧客イベントの購読方法についても把握してみてください。これにより、ボタンをクリックしたときなどの追加の顧客イベントをトラッキングできます。たとえば、特定の注文の発生をトラッキングしたい場合、その目的のためにカスタムイベントを作成して購読できます。

Google Analyticsピクセルの例です:

Global Site Tag

イメージクレジット:Shopify

次のJavaScriptコードを使用して、スクリプトsrc=の部分を置き換えることができます。src属性が常にHTMLバージョンと一致していることを確認してください:

JavaScript

イメージクレジット:Shopify

標準イベントに購読する

MetaのピクセルのPageViewイベントは次のようになります。関数fbq("track")はMetaコードの一部であること、および各ビジネスには異なるバージョンがあるため、そのドキュメントを参照する必要があることに注意してください。

PageView

イメージクレジット:Shopify

メタのViewContentイベントに一部の商品情報を提供する例は以下のようになります:

View Content Theme

イメージクレジット:Shopify

カスタム顧客イベントに購読する

必要に応じて、追加の顧客イベント(たとえば、ボタンをクリックしたとき)をトラッキングする場合は、カスタム顧客イベントを追加できます。標準イベントとカスタムイベントは同じ方法で購読できます。

購読したいイベントの名前を宣言し、この情報をサードパーティサービスプロバイダーのピクセルに送信します。

これは、カスタムイベントがテーマのリキッドファイルに表示される例です:

Script

イメージクレジット:Shopify

以下は、カスタムイベントに購読するピクセルを設定する方法の一例です:

Custom event

イメージクレジット:Shopify

カスタムピクセルを追加する

カスタムピクセルを追加する前に、既存のピクセルを削除または変更して、顧客イベントの重複カウントを回避してください。ピクセルコードは、すべての場所(theme.liquid、checkout.liquid、およびチェックアウト設定の追加スクリプトを含む)から手動で削除する必要があります。

手順:
1. Shopify adminを経由して設定 > Customer eventsを開きます。

イメージクレジット:Shopify

2. ピクセルにわかりやすい名前を付けてください。既存のカスタムピクセルの名前を入力すると、新しい名前を付けるように求められます。

3. Add pixelをクリックして、イベントエディタにアクセスします。

Pixel Nameイメージクレジット:Shopify

4. Codeウィンドウに、独自のJavaScriptピクセルコードを貼り付けます。

5. Saveをクリックして、カスタムピクセルを保存します。カスタムピクセルを接続し、イベントの追跡を開始する準備ができた場合は、Connect pixelをクリックすることで接続できます。

Shopifyストアにカスタムピクセルを接続する

カスタムピクセルを追加した後、顧客イベントの追跡を開始するためにストアに接続する必要があります。

手順:

  1. Shopify adminのCustomer eventsページからCustom pixelsをクリックします。
  2. ヘッディングDisconnected pixelsの下で、現在接続されていないカスタムピクセルが表示されます。適切なカスタムピクセルの行でConnectをクリックします。

Shopifyの利用規約を読んでください。ピクセルがサービスの要件を満たしている場合は、Connectをクリックします。

カスタムピクセルを切断および削除する

追加したカスタムピクセルによるイベントの追跡を停止するには、ピクセルをオンラインストアから手動で切断する必要があります。

手順:

  1. Shopify adminのCustomer eventsページからCustom pixelsをクリックします。
  2. 現在リンクされているカスタムピクセルがリストの上部に表示されます。切断したいカスタムピクセルの行でDisconnectをクリックします。ピクセルが切断されると、削除されるわけではありません。

不要なカスタムピクセルを削除することもできます。

手順:

  1. Shopify adminのCustomer eventsページでCustom pixelsをクリックします。 
  2. 変更したいカスタムピクセルの...ボタンをクリックします。 

Deleteをクリックします。削除の確認をすれば、カスタムピクセルはピクセルマネージャーから削除されます。

まとめる

カスタムピクセルを作成する前に、ピクセルの構成に精通していることを確認してください。

以下は考慮すべきポイントです:

  • ウェブサイトのチェックアウトに配置するコードを理解しているか、Shopifyエキスパートからカスタムピクセルを取得してください。
  • ピクセルはセキュアなサンドボックス環境で動作するため、公開できるデータに制限があります。
  • Webピクセル拡張APIを使用すると、Shopify LaxまたはStrictサンドボックスでブラウザAPIにアクセスしたり、顧客イベントに購読したりできます。