エックスサーバーのメールフォームにGTM組み込むの大変だった話

エックスサーバーに移行した

最近もともと使っていたサーバーの契約が切れまして、もっと安いところに変更したんですね。
それがエックスサーバーさん。
bindupというソフトでHPを作っているのですが、そのソフトと相性がよいとの口コミを見て決めました。

で、サイトデータのアップロードとかは順調にいってたんですけど、エックスサーバーで提供されているCGIのメールフォームにGoogleタグマネージャーのタグを入れようとしたら、これが全然うまくいかなくて。

自分のメモもかねて、起きた問題と解決方法を書いておこうかと思います。

ちなみに私、プログラミングは苦手で独学でチマチマやっています。
なので言葉の使い方とか間違ってるところがあったら、それはスルーでお願いします。

タグマネージャーが反応しない……？

Googleタグマネージャーは色んなタグを決められたキッカケで作動させられる便利な機能です。
これで私はリスティング広告のコンバージョンを計測するために設置しています。

メールフォームの「自作スキン」を使えば、htmlタグやcssを使ってデザインを自由にカスタマイズできます。
これで必要なGTMのタグを組み込みます。

で、タグマネージャーの「プレビュー」で動作を確認します。
そのためにタグマネージャーをメールフォームのURLに接続させるのですが……

接続できませんでした

タグがきちんと設定したキッカケに反応しないんじゃないんです。
プレビューで接続できないってことは、そもそも必要なタグが入ってませんってことです。

いや入れたよ！！？
めっちゃ入ってるやん！！！

ここから原因の追究が始まります。
長かった。

開発者ツールで確認したらわかったこと

とりあえずメールフォームのURLを開き、開発者ツールで確認。
（コントロール＋シフト＋I）

タグは入っていました。
なんやねんちゃんと入ってるやんけ、と思ったのですが、よくよく見てみると、なんか入れたタグと違う。

一部を比較すると……

【入力したタグ】
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l……

【開発者ツールで確認したタグ】
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({&#039;gtm.start&#039;:
new Date().getTime(),event:&#039;gtm.js&#039;});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=&#039;dataLayer&#039;?&#039;&l……

知らん文字入ってるやん……

よくよく見てみると、「'」が「#039;」になってる。
何でやねーん。
原因は色々調べたけど、よくわかりません。

解決方法

とあるブログの記事にたどり着き解決。

「'」を「”」に変えたら解決しました。

よくわかりませんが、どっちも同じ役割なんですかね。
っていうか何で変換されるんですかね。
詳しい方いたら教えてください。

とにかくこれでタグマネージャーのプレビューも無事に反応しました。
そしてトリガーも。

これでコンバージョン測れるぞー！

結論

「'」がダメなら「”」を使う。