GoogleAnalyticsクロスドメインのformリンクへの追記を自動化

追記：
このページの内容は、標準のAnalyticsに関するご紹介です。
Universal Analytics（ユニバーサルアナリティクス）に関してのご紹介は、
UniversalAnalytics対応についてをご覧ください。

前回の更新から半年以上が経過してしまいました。更新が滞ってしまいすみません。
この更新をしていない間に、世の中も色々と変化があり、Analyticsについても変化があったようです。
管理画面が変わっていたり、新規プロパティを作成した際のトラッキングコードがUniversalAnalytics（β）だったりといった変化がありながらもワニタは元気です。

今までの記事で案内しているAnalytics関連の内容は全て標準のAnalyticsのトラッキングコードのものですのでご了承ください。そして今回、以下に案内する内容も標準のAnalyticsのトラッキングコードについてのものとなります。

なお、UniversalAnalytics（β）のトラッキングコードについては、現状では記事にする予定がありませんが、（β）ではなく正式にリリースした後には、そういった機会も出てくると思います。未だ先の話ですがよろしくお願いします。

さて、それでは今回はクロスドメインのformリンクへの追記を自動化する方法をお伝えします。

ネットショップのカゴに入れるボタンのhtml

ネットショップ向けのGoogleAnalytics設定の記事では、ドメインをまたぐリンク（クロスドメインのリンク）のソース部分に、特定の記述を追加する必要について案内しました。ネットショップの場合には、formタグにて「カゴに入れる」ボタンを記述していることが多いかと思いますが、その場合には、以下の記述が必要です。

ボタンの設定
<form name=”f” method=”post” onsubmit=”_gaq.push([‘_linkByPost’, this]);”>

太字部分の追加が必要です。
商品が多かったり、商品入れ替えが多いショップ様にとっては大変な作業ですが、今回はこの太字部分を自動で付加する設定について案内させて頂きます。

なお、本記事の情報は公開時点に有効な方法ではございますが、参考に設定をされる場合には最新情報をご確認の上設定をお願いします。また、javascriptの記述や編集については弊社サポートの対象外となりますので、ご質疑を頂いても回答いたしかねます。お恐れ入りますがご了承くださいませ。

※ワニタ環境での事例となります。
Javascriptの競合などにより、期待する挙動とならない可能性もあります。

では、自動追記の方法を記します。

jqueryを読み込む

jqueryはjavascriptのライブラリです。ブラウザ間の差による煩わしい記述の必要もありません。このjavascriptを読み込むことで、簡単な記述でページを操作できます。
すでに利用されているショップ様もいらっしゃるとは思います。既に利用されている場合には、不要な記述となりますが、以下の記述を<head></head>内に行ってください。

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>

Googleが提供するAPI Libraryからjqueryを読み込む記述です。
Googleサーバから読み込むので、ショップ側のサーバに負荷がかかりません。
よく使われている記述のため閲覧者のPCにキャッシュがあれば改めて読み込まれる必要なく、表示が高速になるという嬉しいおまけもあります。
なお繰り返しになりますが、既にjqueryを利用している場合には、記述をわざわざ変更する必要はないかと思います。

参考リンク

クロスリンク用のスクリプトを記述する

jqueryを呼び出した後の行以降（<head></head>内）に以下を記述してください。

<script type=”text/javascript”>
$(function(){
     $(“[action^=’http://cart.ec-sites.jp/cart_step’] > input”).click(function(){
          $(this).parent().attr(“onsubmit”,”_gaq.push([‘_linkByPost’, this]);”);
     })
});
</script>

※e-shopsカートSの場合のスクリプトです。
他サービス場合は、http://cart.ec-sites.jp/cart_stepを利用環境に合わせて変更ください。

属性actionがhttp://cart.ec-sites.jp/cart_stepで開始されている要素（1）の子inputがクリックされた際に、inputの親要素（1）に属性onsubmitと属性値_gaq.push([‘_linkByPost’, this]);を追記するスクリプトです。

e-shopsカートSでは「カゴに入れる」ボタンに<input type=”submit” -略->と<input type=”image” -略->が利用されています。
その両方に対応するための記述ではありますが、「カゴに入れる」ボタンではない（1）の子要素である数値入力欄のテキストフィールド（<input type=”text” -略->）がクリックされた際にも、（1）に属性と属性値が追記されます。
確認した限り挙動に問題はございませんでしたが、必要に応じて修正ください。

まとめ

formタグのinputGoogleAnalyticsのクロスドメインのリンク記述の自動化は以下の3項が必要です。

GoogleAnalyticsのトラッキングコードが記述されている
（UniversalAnalyticsではなく標準のAnalytics）
jqueryを読み込む
自動記述のscriptを読み込む

ということです。
まとめると、<head></head>内は以下の様な記述になります。

<!DOCTYPE HTML PUBLIC “-//W#C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”ja”>
<head>
<title>ページ名</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<meta http-equiv=”Content-Script-Type” content=”text/javascript”>
<meta http-equiv=”Content-Style-Type” content=”text/css”>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘UA-XXXXXXXX-X’]);
_gaq.push([‘_setDomainName’, ‘none’]);
_gaq.push([‘_setAllowLinker’, true]);
_gaq.push([‘_trackPageview’]);

(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=”text/javascript”>
$(function(){
     $(“[action^=’http://cart.ec-sites.jp/cart_step’] > input”).click(function(){
          $(this).parent().attr(“onsubmit”,”_gaq.push([‘_linkByPost’, this]);”);
     })
});
</script>
</head>

太字部分が今回の追記部分。

今回紹介した施策をおこなうと、e-shopsカートSのシンクロカゴを利用している場合でも、
クロスドメイン用のコードが追記されます。
シンクロカゴご利用ショップ様は参考としてみてください。

なお、ページの読み込みが完了する前に「カゴに入れる」ボタンが押下された場合や、Javascriptがオフになっている場合等はクロスドメイン用のコードが追記されませんのでご了承ください。