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

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

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

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 内

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

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

そもそも Twig のカスタマイズをする必要はなかった

その後、昼休みにぼけーっとうどんを食べていたところ、閃きました。
そもそも Twig を触る必要はないのでは!?
jQuery の attr() メソッドで属性追加すれば良いのでは!!

このような記述を index.twig 追加し、検証してみたところ・・・・

問題なく追加できていました。

Google Analytics でも、問題なくイベント計測もできておりました。
カスタマイズに想定より工数をかけるような事態にならず、一安心です。

この方法であれば、要素の構成を気にすることなく、class や id などの属性も簡単に追加できますね。

基本に立ち返るって、やっぱり たいせつ

Twig で構成されている CMS だからと、Twig のカスタマイズだけで解決しようとしてしまっていました。
基本に立ち返り、自分の持っている知識やスキルで解決できないか、
別のアプローチ方法を考えることって、やっぱり たいせつですね。

忙しいときほど目の前の難題に正面から立ち向かってしまい、時間を無駄にしてしまう傾向があるようです。
もっと視野を広げ、精進せねば。

参考:
EC-CUBE開発コミュニティ

箱田

この記事を書いた人: 箱田

ビーズクリエイトのエンジニア兼プログラマ。

プログラミングが捗る日と捗らない日にムラがあり、
捗る時間を自分でコントロールできる方法を探求している。

エンジニアの君へ。という記事をかきました。
仕事がつらいエンジニアさん、良かったら読んでください。

あわせて読みたい