システム開発

EC-CUBE3 のフォームに Analytics 用のイベントトラッキングを仕込むの巻。

2018.03.30

192

EC-CUBE3 にて、Analytics用のイベントトラッキングを仕込んだ際の備忘録です。

弊社は Webコンサルティング会社を謳っている手前、
構築したサイトにはできる限り計測の仕組みを導入しております。
先日、EC-CUBE3 の会員登録やゲスト購入の際のフォームにて、
Google Analytics のイベントトラッキングを仕込みたいとの相談をマーケッターから受けました。
フォームのどのあたりまで進み、どのあたりで離脱されたかを知りたいわけですね。

目次 [非表示]

1. EC-CUBE3 のフォーム生成のしくみ
2. Twig テンプレートにて、直接記述する方法
3. そもそも Twig のカスタマイズをする必要はなかった
4. 基本に立ち返るって、やっぱりたいせつ

EC-CUBE3 のフォーム生成のしくみ

EC-CUBE3 では、フォームレイアウトは以下で構成されています。
/src/Eccube/Resource/template/default/Form/form_layout.twig

と input タグが直接記述されるわけではなく、Twig にてフォームが生成されます。

会員登録時のフォーム画面は
/app/template/default/Entry/index.twig

非会員の情報入力フォームは
/src/Eccube/Resource/template/default/Shopping/nonmember.twig

にて生成されます。

Twig テンプレートにて、直接記述する方法

ググると、Twig で各要素に attr で直接記述するのが簡単という情報が見つかりました。

/app/template/default/Entry/index.twig 内







    {{ form_widget(form.name.name01, {attr : {onfocus : 'ga(\'send\', \'event\', \'フォーム\', \'新規会員登録\', \'1_お名前_性\');'}}) }}
    {{ form_widget(form.name.name02, {attr : {onfocus : 'ga(\'send\', \'event\', \'フォーム\', \'新規会員登録\', \'2_お名前_名\');'}}) }}
    {{ form_errors(form.name.name01) }}
    {{ form_errors(form.name.name02) }}

おー、簡単です。
これでサクッと終わらせて次の業務にとりかかるぞーと余裕をかましていたところ、壁にぶち当たりました。
それは郵便番号や住所、電話番号などの、
ひとつの要素で複数の入力フィールドを表示させる形になっているものです。
こういった要素は、親要素になっており、例えば郵便番号であれば
/src/Eccube/Form/Type/ZipType.php
でさらに細かく定義されているようです。
こちらに記述してもよさそうですが、その場合は、
会員登録やゲスト購入時も同じフォームが呼び出されるため、
Google Analytics イベントトラッキングに、ページを表す引数を入れることができなくなってしまいます。

会員登録時とゲスト購入時に、別々のフォームを呼び出す作りにするのも骨が折れそうです。
うーむ・・・これは困りました。