Shopify の注文完了ページにコンバージョンタグなどのスクリプトを埋め込む

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。

今回は、Eコマース用のプラットフォームである Shopify で注文完了ページにコンバージョンタグなどのスクリプトを埋め込む方法についてまとめたいと思います。

Shopify についてはこちらの記事で紹介しているのであわせてご覧いただければと思います。

概要

Shopify を使用しているECサイトで、注文完了ページにコンバージョンタグを埋め込みたいということがあるかと思います。

注文完了ページのコードは、テーマファイルでは checkout.liquid というファイルに書かれていますが、Shopify の通常のプランでは checkout.liquid を編集することはできず、 Shopify Plus という別のプランに加入する必要があります。

しかし、コンバージョンタグなどのスクリプトを埋め込むだけであれば、管理画面から埋め込むことが可能です。

ちなみに Shopify ヘルプページでは「チェックアウト」や「注文状況ページ」と呼ばれていますが、ここで指す「注文完了ページ」とは、注文ボタンを押して注文完了した後に遷移する、URL末尾に「/thank_you」の付いたページを指しています。

方法

Shopify の管理画面を開き、左下の設定からチェックアウトに進みます。

Shopify 管理画面の左下の設定リンクを押した状態のスクリーンショット

チェックアウト内にはチェックアウト画面に関する設定項目が並んでいますが、その中に 追加スクリプト という項目が存在します。そこに埋め込みたいタグを追加します。

チェックアウト内の「追加スクリプト」のキャプチャ

この追加スクリプトは、 checkout.liquid で body 内に呼び出される形でチェックアウト画面に埋め込まれます。

そのため、<script><style> 要素、 Shopify が持つ Liquid オブジェクトの checkout shop や liquid の記法がそのまま使用できます。

設定を保存し、注文完了画面のソースコードを確認すると、先程の追加スクリプトで追加したスクリプトが thank-you__additional-content クラスの中で読み込まれているのが分かります。

...
<div class="step" data-step="thank_you">
  <div class="step__sections">
    <div class="section" data-order-update-options='["phone"]'>
      <div class="section__header os-header">
        <svg class="icon-svg icon-svg--color-accent icon-svg--size-48 os-header__hanging-icon" aria-hidden="true" focusable="false"> <use xlink:href="#cancelled" /> </svg>
        <div class="os-header__heading">
          ...
          注文番号などの情報
          ...
        </div>
      </div>
    </div>

    <div class="thank-you__additional-content">
      <script>
        追加したスクリプト
      </script>
    </div>

    <div class="section">
      <div class="section__content">
        <div class="content-box">
          <div class="content-box__row text-container">
            ...
            注文の詳細情報
            ...

この方法でチェックアウト画面にコードを埋め込むことができます。

まとめ

今回はShopify で注文完了ページに広告タグなどのスクリプトを埋め込む方法についてまとめました。

Shopify を使っている方の参考にしていただければと思います。

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか? 「腕の良いエンジニアに重要でない作業まで任せてしまっている」「腕の良いデザイナーに主業務以外も任せてしまっている」「すべての手が足りず細かいことまで手が回らない」などなど… 。

そんなときは、相談相手としてGaji-Laboにお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!

投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。