カスタムピクセルコードを作成する
このページには、外部サービスピクセル向けのカスタムピクセルコードを作成して、特定のお客様イベントを追跡できるようにする手順が含まれています。カスタムピクセルのコードを作成した後、Shopifyストアにピクセルを追加できます。
カスタムピクセルを作成する準備を行う
カスタムピクセルを作成する前に、ピクセルの設定方法を理解するために以下の情報を確認してください。
カスタムピクセルを追加する際に、次の情報を指定します。
- 外部サービスのJavaScriptピクセル
- 追跡する行動イベント
カスタムピクセルのコードを作成する
カスタムピクセルのコードの作成には、以下の手順が含まれます。
- 外部サービスのJavascript SDKを用意します。
- ピクセルを設定して、お客様イベントを追跡します。
外部サービスのJavascript SDKコードを準備する
使用する外部サービスでは、ピクセルと接続するコードを提供します。ピクセルには通常、Javascript SDKとトラッキングコードという2つのコンポーネントがあります。ShopifyピクセルサンドボックスではJavaScriptしかサポートしていないため、外部サービスのコード内のHTMLは削除する必要があります。
Metaピクセルの例を以下に示します。ピクセルは、外部サービスによってわずかに異なります。
<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->MetaのコードからHTMLを削除すると、MetaピクセルのSDKとそれを初期化するコードが残ります。PageViewイベントトラッキングコードは、次のステップで追加される予定なので、削除されました。
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);script src=を使用して読み込まれるピクセルが含まれていることがあります。HTMLはShopifyのピクセルではサポートされていないため、これをJavaScriptに置き換える必要があります。
Googleアナリティクスピクセルの例を以下に示します。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', ''YOUR_PIXEL_ID'');
</script>script src=の部分は、以下のJavaScriptに置き換えることができます。src属性がHTMLバージョンと一致していることを必ず確認してください。
const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');
script.setAttribute('async', '');
document.head.appendChild(script);
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_PIXEL_ID');お客様イベントを追跡する
ピクセルのSDKを読み込んで初期化した後、トラッキングのために、イベントをピクセルのSDKに渡す必要があります。これを行うには、イベントに登録し、外部サービスによって処理されるように、イベントデータをピクセルのSDKに渡します。
標準イベントに登録する
Shopifyではイベントの標準セットを提供しています。これにより、ピクセルが必要なデータを簡単に収集できます。
Shopifyのピクセル拡張機能APIを使用して、イベントに登録できます。登録しているイベントに、外部サービスのピクセルコードを配置する必要があります。
これは、MetaピクセルのPageViewイベントの例です。fbq("track")はMetaコードの一部です。会社ごとに独自のバージョンがあり、それぞれのドキュメントを参照する必要があります。
analytics.subscribe("page_viewed", async (event) => {
fbq('track', 'PageView');
});一部のイベントには、ピクセルに渡すことができるメタデータがあります。以下は、商品の詳細をMetaのViewContentイベントに渡す例です。
analytics.subscribe("product_viewed", async (event) => {
fbq('track', 'ViewContent', {
content_ids: [event.data.productVariant.id],
content_name: event.data.productVariant.title,
currency: event.data.productVariant.price.currencyCode,
value: event.data.productVariant.price.amount,
});
});カスタムのお客様イベントに登録する
誰かがボタンをクリックしたなどの追加のお客様イベントを追跡したい場合は、カスタムのお客様イベントを追加できます。カスタムイベントは、標準イベントと同じ方法で登録できます。登録するイベントの名前を公表し、その情報を外部サービスプロバイダーのピクセルに渡します。
以下は、公開されたカスタムイベントがテーマのLiquidファイルに表示される場合の例です。
<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>以下は、そのカスタムイベントに登録するためにピクセルを設定する方法の例です。
analytics.subscribe("special_email_signup", event => {
window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});カスタムイベントの詳細については、Shopifyの開発者向けドキュメントを参照してください。
カスタムピクセルの例
以下は、完全なピクセルのコードの例です。ピクセルコードは、外部サービスプロバイダーおよび追跡するイベントによって異なります。
カスタムMetaピクセル
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
// replace YOUR_PIXEL_ID with the pixel ID provided by third-party
fbq('init', YOUR_PIXEL_ID);
// integrate third-party pixel tracking
analytics.subscribe("page_viewed", event => {
fbq('track', 'PageView');
});
analytics.subscribe("product_viewed", async (event) => {
fbq('track', 'ViewContent', {
content_ids: [event.data.productVariant.id],
content_name: event.data.productVariant.title,
currency: event.data.productVariant.price.currencyCode,
value: event.data.productVariant.price.amount,
});
});
analytics.subscribe("search_submitted", async (event) => {
fbq('track', 'Search', {
search_string: event.searchResult.query
});
});
analytics.subscribe("product_added_to_cart", async (event) => {
fbq('track', 'AddToCart', {
content_ids: [event.data.cartLine.merchandise.productVariant.id],
content_name: event.data.cartLine.merchandise.productVariant.title,
currency: event.data.cartLine.merchandise.productVariant.price.currencyCode,
value: event.data.cartLine.merchandise.productVariant.price.amount,
});
});
analytics.subscribe("payment_info_submitted", async (event) => {
fbq('track', 'AddPaymentInfo');
});
analytics.subscribe("checkout_started", async (event) => {
fbq('track', 'InitiateCheckout');
});
analytics.subscribe("checkout_completed", async (event) => {
fbq('track', 'Purchase', {
currency: event.checkout.currencyCode,
value: event.checkout.totalPrice.amount,
});
});