2023.12.19[Tue]

Shopify カスタムピクセルコードを使ってみる

  • Shopify

目次

こんにちは。
ディレクターの田辺です。

先月、こちらの記事でチェックアウトの「追加スクリプト」が廃止予定であることをお伝えしました。

記事でもお伝えした通り、サンキュー画面(注文状況ページ)の「見た目」を変更するには、Checkout UI extensionsか、それを使用したアプリかを利用すれば、今後も現在施しているような変更を継続可能です。

しかし、「追加スクリプト」には、コンバージョン計測用のタグを設定していることも多いはずです。

見た目については、Checkout UI extensionsで対応するとして、コンバージョン計測用のタグはどうするのか。もうサンキュー画面でのコンバージョン計測はできないのか。

ご安心ください。計測については、Shopifyがすでに「カスタムピクセル」という仕組みを用意してくれています。

今回は、この「カスタムピクセル」についてご紹介します。

カスタムピクセルとは

https://help.shopify.com/ja/manual/promoting-marketing/pixels/custom-pixels

詳細は上記リンクをご覧いただくとして、本記事ではざっくり説明いたします。

カスタムピクセルは、イベント収集に特化した仕組みで、「追加スクリプト」とは下記の点で異なります。

  • 「追加スクリプト」のように、JavaScriptでDOMを追加することはできません。(iframeなので、できないこともなさそうですが、公式ドキュメントによるとできません。)
  • 「追加スクリプト」のように、サンキューページでのみ動作するものではなく、ストア内のどのページにおいても動作します。
  • 「追加スクリプト」では、liquidタグでスクリプトを制御することがありましたが、カスタムピクセルでは、カート投入や購入完了などのイベントが予め用意されているので、それらを利用してスクリプトを制御します。

カスタムピクセルの設定は、ストア管理画面 > 設定 > お客様のイベント からおこないます。

コンバージョン計測の簡単なサンプル

百聞は一見にしかず、ということで、では、よく見る、Yahoo!広告のコンバージョンタグをカスタムピクセルで設定してみます。

元のコンバージョンタグ

<script async src="https://s.yimg.jp/images/listing/tool/cv/ytag.js"></script>
<script>
window.yjDataLayer = window.yjDataLayer || [];
function ytag() { yjDataLayer.push(arguments); }
ytag({"type":"ycl_cookie"});
</script>
<script async>
ytag({
  "type": "yss_conversion",
  "config": {
    "yahoo_conversion_id": "XXXXXXXXXX",
    "yahoo_conversion_label": "YYYYYYYYYYY",
    "yahoo_conversion_value": {{ order.subtotal_price | divided_by:100 }}
  }
});
</script>

・・・・・・

カスタムピクセルに設定する内容

// ステップ1. JavaScriptのピクセルSDKを初期化する (HTMLを必ず除いてください)
(function(){
  window.yjDataLayer = window.yjDataLayer || [];
  function ytag() { yjDataLayer.push(arguments); }
  ytag({"type":"ycl_cookie"});
  const f = document.getElementsByTagName("script")[0];
  const j = document.createElement("script");
  j.async=true;
  j.src='https://s.yimg.jp/images/listing/tool/cv/ytag.js';
  f.parentNode.insertBefore(j,f);  
})();

// ステップ2. analytics.subscribe()を使用して顧客イベントを登録し、追跡情報を追加する
analytics.subscribe("checkout_completed", event => {
  const checkout = event.data.checkout;
  const checkoutSubtotalPrice = checkout.subtotalPrice.amount;
  function ytag() { yjDataLayer.push(arguments); }
    
   ytag({
    "type": "yss_conversion",
    "config": {
      "yahoo_conversion_id": "XXXXXXXXXX",
      "yahoo_conversion_label": "YYYYYYYYYYY",
      "yahoo_conversion_value": checkoutSubtotalPrice
    }
  });
});

実際にコンバージョンが計測できるかまでは確認しておりません。

上記コードによって、yjDataLayerに期待されるデータがpushされることは確認していますが、実際にコンバージョン計測ができているかまでは検証しておりません。上記コードをそのまま使用する場合は、ご自身で、コンバージョンを計測できているか検証することをお勧めいたします。

カスタムピクセルの注意点

下記の点、ご注意ください。

アプリもあります

上記を自力で設定するのは大変、という方もいらっしゃるかもしれません。
しかし、こちらについてもご安心ください。
下記のリンクでは、カスタムピクセルを簡単に利用できるアプリが紹介されていますので、ニーズに合ったものを探してみてください。

https://apps.shopify.com/stories/guide-web-pixels?locale=ja

※厳密には、アプリから設定できるのはWeb Pixelであり、Web Worker上で動作するので、カスタムピクセルとは微妙に仕様が異なります。

まとめ

チェックアウトの「追加スクリプト」は、2025年8月27日まではご利用いただけます。
それまでに移行を済ませないと、コンバージョン計測ができなくなってしまいますので、お気をつけください。

それでは。

Share

Shopify Flowで顧客の購入回数をタグに登録するする方法Shopify Flowの活用方法