目次
こんにちは、ディレクターの田辺です。
チェックアウトの「追加スクリプト」が将来的に廃止になる件や、その準備としてのカスタムピクセルコードの設定方法について、下記2記事で紹介してきました。
カスタムピクセルコードは、ストアオーナー自ら設定する計測スクリプトですが、それとは別に、アプリから設定する計測スクリプトとしてWeb Pixelという仕組みが用意されています。
Web Pixelがどういった挙動をするのか興味があり、Shopifyのチュートリアルを実践してみたのですが、ある程度開発ができることを前提としているように見受けられました。
開発者ではないけどWeb Pixelがどのようなものか知りたい、という方に向けて、本記事では、少しだけチュートリアルを補足します。
Web Pixelのチュートリアル
下記リンクが、Shopifyが用意してくれているWeb Pixelのチュートリアルです。
https://shopify.dev/docs/apps/marketing/pixels/getting-started
本記事で補足するのは2点です。
- exteinsionを格納するカスタムアプリの作成
- webPixelCreate mutationの実行方法
exteinsionを格納するカスタムアプリの作成
チュートリアルでは、Step 1: Create a web pixel extension から始まっていますが、extensionを作成する前に、カスタムアプリを作成しましょう。
カスタムアプリの作成はとても簡単です。
https://shopify.dev/docs/apps/getting-started/create
こちらに記載の内容をお読みいただき、環境を整えたら、下記を実行するだけです。
npm init @shopify/app@latest上記コマンド実行後のプロンプトはチュートリアル通りで大丈夫です。
- Your project name: プロジェクト名、何でも大丈夫です。
- Get started building your app: Remixをお選びください。
- For your Remix template, which language do you want: JavaScriptで大丈夫です。
さらに、Step 2も、Step 3も、実行し、カスタムアプリを開発ストアにインストールし終わってから、Web Pixelのチュートリアルの Step 1: Create a web pixel extension にお進みください。
webPixelCreate mutationの実行方法
Web Pixelのチュートリアル Step 5: Activate a web pixel extension にて、APIを実行し、Web Pixelを有効化するよう指示があります。
これは、Shopify GraphiQL Appなどを使用してAPIを実行してもうまくいきません。
Execute the following mutation from within your app:
とあり、作成したカスタムアプリ内で、APIを実行する必要があります。
下記のように、
{作成したカスタムアプリのプロジェクト名}/app/routes/app._index.jsx
の18行目を編集します。
変更前
export const loader = async ({ request }) => {
await authenticate.admin(request);
return null;
};
変更後
export const loader = async ({ request }) => {
const { admin } = await authenticate.admin(request);
const response = await admin.graphql(
`#graphql
mutation webPixelCreate($webPixel: WebPixelInput!) {
webPixelCreate(webPixel: $webPixel) {
userErrors {
code
field
message
}
webPixel {
settings
id
}
}
}`,
{
variables: {
webPixel: {
settings: "{\"accountID\":\"234\"}"
}
}
}
);
const responseJson = await response.json();
return null;
};
上記を保存後、Shopifyストアの管理画面から、作成したカスタムアプリにアクセスすると、Web Pixelが有効化されます。
※有効化されるのに、3, 4分ほど時間がかかる場合があります。
Web Pixelが有効化されたかを確認する
ストア管理画面 > 設定 > お客様のイベント にアクセスします。
下図のように、「接続済み」となっていれば成功です。
まとめ
本記事で紹介している内容は、あくまで、Web Pixelをちょっと試してみて、どんなものか腹落ちしたい、という方に向けています。
十分な検証をしているわけではありませんので、本記事に記載の内容をもとに、本番用アプリを作成するのは危険です。
実際にWeb Pixelを利用する場合は、公開されているアプリを使用したり、Shopifyパートナー、Shopifyエキスパートに開発をご依頼したりすることを、おすすめいたします。