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

Excelで使える祝日判定のWebAPIを見つけた

Excelの関数には、曜日を判定できる関数(WEEKDAY)が用意されている。また、表示だけなら書式設定でもできる。しかし祝日となると、関数も何も、用意されていない。 祝日は年により、突然増えたり、「 …

FileMaker Pro 12 での汎用トグルボタンの作り方

Accessではとっても簡単なトグルボタンだが、FileMakerでそれを作るのは簡単ではない。むしろとっても面倒。 それなのに、画面いっぱいにいくつものトグルボタンを作る仕事が出てきた。 一つ一つの …

JQueryでカレンダー入力機能(先日の続き)

・現在はテキストボックスをクリックしたら表示されるカレンダー。それをクリックせずとも出しっぱなしにしたものも一つ欲しい。クリック版も残す。 ・「在庫僅少」「注文不可」をわかりやすく表示したい。管理画面 …

Yahooショッピングで提供している商品をカートごと自身のページに設置できるか

やってみた。 結論からいうと、カートボタン以外は、できた。 カートボタン以外は・・・。 てすと YahooショッピングAPIの公式ガイドは、こちら。 ショッピング:商品コード検索(商品詳細) &#82 …

no image

経営者研修会講師仕事

銀行さん、思考スピードが速い。 考えに淀みが無い。 理解力も分析力も的確で合理的。 テキストを熟読して臨んだ、しかも2年以上経験のある自分が、議論中に引き離されそうになった・・・それでもしかし、なんと …