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

Arigato Automationよ、ありがとう!

ShopifyでArigato Automationを使っている。ハッキリ言って便利だ。 やりたかったことと、そのサンプルとさせてもらったワークフローのメモ。 下書きをもとに正式注文を作成したら、下書 …

no image

Google Chrome から Mozilla FireFox に乗り換え

ここ一年ほどGoogleChromeを使ってきたが、今日、それまで使っていたFireFoxに戻ろうと思う。 マウスオーバーでタブを切り替えができなかったり、ブックマークを新規タブで開く方法が面倒だった …

no image

IME2007だめだめ

Office2007にしてから日本語入力の変換が重くて重くて仕方がない。 もしやと思うと、やっぱり。 IMEがバージョンアップして「2007」になっていた。 IME2007だめだめ。 ネット検索すると …

no image

アンケートフォームからチェックボックスとオプションボタンのテキスト文字を取り出してテキストファイルに出すためのコード

アンケートフォームからチェックボックスとオプションボタンのテキスト文字を取り出してテキストファイルに出すためのコードを作成。 出力されるコードは、そのチェックボックス等を作成した順番に出力されるため、 …

no image

Cliborのマクロでウィンドウ操作&コピペを楽にする

Clibor、便利だわ~。もう大好き。 今回はこんなコードをご紹介。私が作った。えへ。 まあProの方々から見れば、全然大した頃は無いのでしょうが。 [code] # -*- coding: utf- …