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

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

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

概要

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

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

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

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

方法

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 を使っている方の参考にしていただければと思います。

Shopifyでのサイト構築やテーマ開発に興味がある方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。