私はスクリプトを考え出そうとしています。おそらく、「MathJavascript のメソッドを使用すると、Google Analytics を使用して追跡している多数のファイル、写真、メディアなどに CSS クラスを簡単にアタッチできますonClick。
本質的に; 以下を手動で実装しています。追跡したい数十のサイトにわたってonClick.
<p class="downloadsmall">download: <a href="jpg/LOW/1.jpg" onClick="_gaq.push(['_trackPageview', '/downloads/img/LowRes/1.jpg']);">Low Res</a></p>
ここで単純にクラスを定義できるかどうか疑問に思っています。および JavaScript 配列または同様のもの内。マークアップに関連付けられたクラスを呼び出します。onClickGoogle のトラッキング コードを自動的に割り当てます。同時に、簡単な方法で名前を別の方法で入力します。名前の最後に 1、2、3 などを追加します。
例えば;
'/downloads/img/LowRes01.jpg']);">Low Res</a></p>
'/downloads/img/LowRes02.jpg']);">Low Res</a></p>
*これをどのように書けばよいかについて、何か提案はありますか? 出来ますか？*
更新: //
以下は、私が試している完全なコードです。標準の GA は読み取っているように見えますが、onClicks?のいずれも解決していません。「コンテンツ ドリルダウン」と「イベント」を確認しましたが、基本的な「GA」の読み取り以外は何も解決していないようです。
<!doctype html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35609953-1']);
_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>
<!-- GA track all onClicks -->
<script>
$(function(){
$('.downloadsmall a').attr("onclick", function(i){
var x='LowRes0'+(i+1)+'.jpg';
return "_gaq.push(['_trackPageview', '/downloads/img/"+x+"'])";
});
});
</script>
<!-- End GA track all onClicks -->
<style>
#wrap {
width: 940px;
margin-left: 0 auto;
}
#left {
width: 50%;
float: left;
}
#right {
width: 50%;
float: right;
}
.downloadsmall {
height: 50px;
width: 200px;
border: 3px dotted #333;
}
</style>
</head>
<body>
<div id="wrap"><!-- Wrap -->
<div id="left">
<p class="downloadsmall">
download: <a href="http://www.google.com">Low Res</a>
</p>
</div>
<div id="right">
<p class="downloadsmall">
download: <a href="http://www.yahoo.com">Low Res</a>
</p>
</div>
</div><!-- Wrap -->
</body>
</html>
更新 -- // これで、ページの「イベント」を読み取り、ページ ビューを追跡していますが、接続されたクラスに従って LowRes01.jpg - LowRes02.jpg として分類されていません。これが主な目標でした - 以下は私の更新された完全なコードです。ここで何が間違っていますか？
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35609953-1']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackEvent', 'Downloads', 'JPG', '/downloads/img/LowRes01.jpg']);
(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>
<!-- GA track all onClicks -->
<script>
$(function(){
$('.downloadsmall a').attr("onclick", function(i){
var x='LowRes0'+(i+1)+'.jpg';
return "_gaq.push(['_trackPageview', '/downloads/img/"+x+"'])";
return "_gaq.push(['_trackEvent', 'Downloads', 'JPG', '/downloads/img/"+x+"'])";
});
});
</script>
<!-- End GA track all onClicks -->
<style>
#wrap {
width: 940px;
margin-left: 0 auto;
}
#left {
width: 50%;
float: left;
}
#right {
width: 50%;
float: right;
}
.downloadsmall {
height: 50px;
width: 200px;
border: 3px dotted #333;
}
</style>
</head>
<body>
<div id="wrap"><!-- Wrap -->
<div id="left">
<p class="downloadsmall">
download: <a href="http://www.google.com">Low Res</a>
</p>
</div>
<div id="right">
<p class="downloadsmall">
download: <a href="http://www.yahoo.com">Low Res</a>
</p>
</div>
</div><!-- Wrap -->
</body>
</html>