IT仕事 Shopify

Shopify サンキューページの必須アップグレードを実施しました

投稿日:

Shopifyから案内されていた「サンキューページおよび注文状況ページのアップグレード」を実施しました。

今回はAIに試しに書かせてみた。文体がいつもと違うと思う。

アップグレード自体は数分で完了するのですが、実際には広告計測や表示内容の見直しが必要でした。

同じようにアップグレードを検討されている方の参考になればと思い、対応内容をまとめます。

Yahoo!広告のコンバージョン計測で5日以上ハマった

今回一番時間がかかったのがYahoo!広告のコンバージョン計測です。

従来は「追加スクリプト(Additional Scripts)」を利用した方法でたが、アップグレード後は完全に利用できなくなります。

Google広告やGA4については情報が多い一方で、Yahoo!広告については情報が少なく、試行錯誤が必要でした。Yahoo広告は日本独自だからShopifyには軽く見られている?

当初はCustomer Eventsやカスタムピクセルでの対応も検討しましたが、動作確認や情報収集にかなり時間を費やしましたし、結局何をやっても計測されませんでした。テストではうまくいくんですけどね。

Google広告なら情報が山ほど見つかるのですが、Yahoo!広告になると急に情報が少なくなります。

ChatGPTやGeminiにも相談しながら進めたものの、「理論上は動くはず」という回答にはたどり着いても、実際には計測されず、気が付けば半日以上格闘していました。

Yahoo!広告は日本独自のサービスであるためか、Shopify関連の海外情報やAIが参照しやすい事例も少ないように感じました。

最終的には「Yahoo広告連携自動化くん」を導入することで解決しました。

導入後はYahoo!広告管理画面でもコンバージョンが計測されていることを確認できたため、現在は安定して動作しています。

Yahoo!広告を運用しているストアは、アップグレード前にコンバージョン計測方法を確認しておくことをおすすめします。

公式サイト:
Shopify Yahoo!広告連携アプリ | Yahoo!広告連携自動化くん

Shopify App Store:
Yahoo!広告のコンバージョンを自動測定 | Shopify App Store

アップグレード後のチェックアウトページで、カートの入力内容が表示されなくなった

当店ではカートページで、

  • 配送希望日
  • 配送希望時間
  • 連絡事項

を入力できるようにしています。

これまでは注文完了後のサンキューページにも表示されていたのですが、アップグレード後は追加スクリプトが無効になるため表示されなくなりました。

購入者から見ても、店舗側から見ても確認できた方が便利なため、このままでは困ります。

Checkout Blocksで解決

Shopify公式の無料アプリ「Checkout Blocks」を利用することで解決できました。

「配達希望」はShopifyヘルプに掲載されているサンプルコードをそのまま利用してみました。

{% assign delivery_date = '' %}
{% for attribute in checkout.attributes %}
    {% assign delivery_date = attribute.value %}
{% endfor %}
Delivery Date: {{ delivery_date }}

しかし、私の環境では期待した内容が表示されませんでした。

そこで、まず属性の内容を確認するために以下のコードへ変更しました(AIの提案)。

{% for attribute in checkout.attributes %}
  {{ attribute.key }} : {{ attribute.value }}<br>
{% endfor %}

これで実際にどの属性名で値が保存されているのか確認できました。

その後、表示名を分かりやすく変更するため、最終的には以下のようなコードに落ち着きました(AIの提案)。

{% for attribute in checkout.attributes -%}
  {% assign label = attribute.key -%}

  {% if label == 'DeliveryTime' -%}
    {% assign label = '配送希望時間' -%}
  {% endif -%}

  {{ label }} : {{ attribute.value }}

{%- endfor %}

これで配送希望を目的通り表示できるようになりました。

「連絡事項」はこちらのブログを参考にさせていただきました。Checkout blocksのDynamic contentに、checkout.noteを設定すればよいとのこと、大変わかりやすかった。

Shopifyのサンキュー画面に追加スクリプトで追加していた追加情報を出す方法 | Tech Q Lab – 株式会社キューのテックブログ

なお、Checkout Blocksで利用できるLiquid構文には制限があるため、以下の公式ドキュメントを確認しながら作業するとスムーズです。

https://help.shopify.com/ja/manual/checkout-settings/checkout-blocks/blocks/liquid

ひとまず移行完了

今回のアップグレードでは、

  • Yahoo!広告のコンバージョン計測
  • 配送希望日時の表示
  • 連絡事項の表示

について対応を行いました。

現在のところ問題なく動作していますが、実際の注文や広告配信のデータを見ながら、しばらく様子を見ようと思います。

これからアップグレードされる方は、

  1. 追加スクリプトで何をしているか確認する
  2. 広告計測タグの動作確認をする
  3. サンキューページの表示内容を確認する

の3点を事前にチェックしておくと、移行後のトラブルを減らせると思います。

-IT仕事, Shopify

執筆者:

関連記事

no image

PHP用のエディタ

今度PHPの講習のせんせーをする。 テキスト本で勉強中(教えるための、ね)。 テキストに書いてあるコードをそのまま打って、一つ一つの講習ポイントを確認する。 コーディングは使い慣れているテキストエディ …

no image

さくらインターネットは「IMAP関数の使用」が×になっている

・・・よって、osTicketもfreeTicketも、使えない。 両方ともインストールしてナンデカナナンデカナと悩んでいた時間が・・・。 関連投稿: 空メールを送る仕組みをはじめて作るのに苦労した記 …

no image

今日知ったWordPressの便利なプラグイン

NextgenGallery:英語管理画面だけど、写真を一発表示・ページ作成できるので便利そう。今回は下述のwp-kougakuを採用したので、コチラは見送り。 php-code-widget:ウイジ …

no image

Shopifyから送られてくるメール文中の画像がGmailで消えている

Shopifyでは、スタッフ向けの注文確認メールが送られるが、Gmailに届くようにしている。その文中を見ると、「画像が非表示になっています。 下記の画像を表示 – ・・・の画像を常に表示 …

no image

楽天の注文メールのタイトルを変更して転送

3か月以上ぶりの投稿。大変ご無沙汰である。 楽天からのご注文メールはGmailに転送しているのだが、その日のうちに注文が1件以上あった場合は、メールがばらけないで一つのスレッドにまとまってしまう。 で …