Shopifyのフォーム送信イベント計測とURLパラメータ:メモ

Shopifyサポートにいくつか確認したので、諸々まとめる意味でメモとして。

前提

Shopifyのオンラインストアが対象
{% form 'contact' %}と{% form 'customer' %}で出力されるフォームが対象

liquidのformタグ

Liquid tags: form

上記公式ドキュメントにあるように多くのタイプが存在しますが、当記事では以下の2種類に関してのみが対象となります。

contact
問合せフォームなどに用いられるタイプで、フォームの内容を管理者のメールアドレスに送信する機能
customer
メールマガジン(ニュースレター)登録などに用いられる機能で、ユーザーが送信ボタンを押すことで「顧客管理」のお客様に「メールのサブスクリプション」が「登録済み」の状態で登録する機能

いずれも何らかのデータを送信するため、送信完了を示す状態が発生します。

contact_postedとcustomer_posted

送信完了後には、それぞれ以下のようにURLにパラメータが付与されます。

問合せフォーム:{% form 'contact' %}


https://example.myshopify.com/?contact_posted=true

末尾にcontact_posted=trueというクエリと値を持つパラメータが追加される。

メールマガジン登録(ニュースレター):{% form 'customer' %}


https://example.myshopify.com/?customer_posted=true

末尾にcustomer_posted=trueというクエリと値を持つパラメータが追加される。

GTM等でのイベント計測におけるパラメータの利用可否

前述のcontact_postedとcustomer_postedを手掛かりにすれば、GTM

「変数」で「URL」を選び、「要素タイプ」で「クエリ」を選択し、計測対象から判断してcontact_postedかcustomer_postedのいずれかを入力する

ただしこの方法ではページ内に複数のメルマガ登録や問合せフォームが存在する際に個別の判別ができない可能性が高く、状況次第では工夫するか問題を許容するかなどが必要になるとは思います。

しかしながら、このパラメータに関する記述はShopify公式ドキュメント内に存在しません。

Shopifyサポートに確認したところ以下のような回答を得ました。

該当パラメータに触れているドキュメントはない
突然の仕様変更もありえるので、このパラメータを実際に利用することは避けた方がよい

結論としては、残念ながら以下になります。

このパラメータをイベント計測のトリガー等に用いることは避けた方がよい
それでも使用する場合は、廃止される可能性を視野にいれて適宜対応する必要がある

送信完了イベントの計測方法

送信完了時に何らかの処理を行う場合、以下のform.posted_successfully?を使用することが検討できます。

Liquid objects: form posted_successfully?

posted_successfully?
boolean
Returns true if the form was submitted successfully. Returns false if there were errors.

具体的には以下のようなコードになります。


{% form 'contact' %}

  {% if form.posted_successfully? %}
    送信成功時にのみ、この部分が出力される。
    GTMのイベント計測であれば以下のようにscriptタグで囲って記述するなど。
    <script>
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({'event': 'form_send'});
      // 上記は動作未検証なのでイメージ程度です
    </script>
  {% endif %}

  <!-- フォームの内容を記述する。省略。 -->

{% endform %}

この方法であれば送信成功をイベントとして計測できるはずですが、以下のような問題が発生するため、実際には採用しにくい方法だと思われます。

テーマのアップデート時に対応できない(=記述部分が消える)
前項が起きると、概ねアップデート時にも反映されるGTMのインストールコード部分も削除される可能性がある

上記に関して、開発ストアにてHorizon v3系からv4系にアップデートするテストを行い、以下の3パターンで状況を確認しました。

Horizon v3系に対し、headタグ内とbody開始タグ直後にGTMのコードを追加し、ニュースレター用のblocks/email-signup.liquid内に{% if form.posted_successfully? %}の記述を追加
Horizon v4系にアップデートすると「コード編集を反映できませんでした」というエラー表示
アップデート後のテーマファイルを確認すると、GTMとニュースレター用の記述が全て消えていることを確認

Horizon v3系に対し、ニュースレター用のblocks/email-signup.liquid内に{% if form.posted_successfully? %}の記述を追加
Horizon v4系にアップデートすると「コード編集を反映できませんでした」というエラー表示
アップデート後のテーマファイルを確認すると、ニュースレター用の記述が消えていることを確認

Horizon v3系に対し、headタグ内とbody開始タグ直後にGTMのコードを追加
Horizon v4系にアップデートすると問題なく完了
アップデート後のテーマファイルを確認すると、GTMの記述が存在していることを確認

そのため、テーマアップデートへの対応も考えると別の方法を検討する必要があると思われます。

カスタムピクセルでの対応可否

ShopifyはGA4等の計測に関しては、テーマファイルに直接記載する方法ではなく、カスタムピクセルでの計測を推奨しています。
そのためメルマガ登録等の送信完了イベントをカスタムピクセルでも対応できるのか調べたところ、公式ドキュメントでは情報が見つ蹴られませんでした。
加Shopifyサポートにも質問しましたが、現時点では以下結論となります。

カスタムピクセルで利用可能なイベントの中に、メルマガ登録や問合せフォーム完了を計測可能なイベントはない

上記を踏まえますと、カスタムピクセルを使う場合は独自にイベントを作り送信を行う必要があるようです。

結び

コンバージョン計測を考えると、問合せ送信やメールマガジン登録のユーザーアクションを計測したいところではありますが、便利そうなパラーメータは公式の仕様として確定しておらず、正規だと思われる方法ではテーマアップデートに対応できないという、面倒な状況に思えます。

工夫次第で計測自体は可能な可能性がありますが、各テーマの構造や仕様の影響を受けるため都度の検討が必要になる状況であり、個人的にはパラメータを正式な仕様として扱えるようになって欲しいところではあります。

0人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。