0

私はjQueryにかなり精通していますが、残念ながら私のJavascriptはやや不足しており、このインスタンスではjQueryにアクセスできないため、「jQueryを使用する」という回答はしないでください。

基本的に、Google アナリティクスを使用すると、次のようにソーシャル クリックを追跡できます。

_gaq.push(['_trackSocial', 'facebook', 'like', 'http://domain.com/somepage']);

今、私のページには次のようなさまざまなリンクがあります。

<a href="#myfacebook#" track_social="facebook"><img src="facebook_button" /></a>
<a href="#mytwitter#" track_social="twitter"><img src="twitter_button" /></a>
<a href="#mygoogleplus#" track_social="googleplus"><img src="googleplus_button" /></a>
<a href="#mypinterest#" track_social="pinterest"><img src="pinterest_button" /></a>

ここで、これらのそれぞれのクリックを追跡し、上記の Google アナリティクス コードを実行したいと考えています。jQuery を使用していた場合、次のようにします。

$('a[track_social]').click(function(){
    _gaq.push(['_trackSocial', $(this).attr('track_social'), 'click', $(this).attr('href')]);  
});

しかし、私が言ったように、私は jQuery にアクセスできないので、一般的な Javascript を使用してこれを行うにはどうすればよいでしょうか?

必ずしも「track_social」属性を使用する必要はありません。別のものを入れることもできますが、サイト全体で複数の方法で、さまざまな場所で複数回表示されるため、すべての ID を一意にすることはできません。ページ。

4

2 に答える 2

2

そのjQueryは、ネイティブDOMAPIに直接移植できます。

Array.prototype.slice.call(
    document.querySelectorAll('a[track_social]')
).forEach(function(i) {
    i.addEventListener('click', function(e) {
        _gaq.push(['_trackSocial',
            e.target.getAttribute('track_social'),
            'click', e.target.href]);  
    }, false);
});

このコードは完全に標準に準拠していますが、JavaScript 1.6 forEach（ほとんどの主要なブラウザーでサポートされていますが、IE 9以降でのみサポートされています）と、addEventListenerおよびquerySelectorAll（ほとんどの主要なブラウザーでサポートされていますが、IE 8以降でのみサポートされています）が必要です。 。より幅広いブラウザサポートが必要な場合は、このソリューションに追加できます。

補足コード＃1：

var n = document.querySelectorAll('a[track_social]');
for (var i = 0; i < n.length; i++)
    n[i].addEventListener('click', function(e) {
        _gaq.push(['_trackSocial',
            e.target.getAttribute('track_social'),
            'click', e.target.href]);  
    }, false);
于 2012-04-21T11:53:19.637 に答える
0

オプションがあります：

querySelectorAll()CSS（およびjQueryセレクター）のように機能するものを選ぶことができます。NodeList取得した要素の配列のようなコレクションであるを提供します。

var links = document.querySelectorAll('a[track_social]');
//gives us [element,element,element...], loop and attach

for(var i; i<links.length;i++){
    links[i].addEventListener(...);
}

別の方法は、すべての<a>タグを取得して、属性についてテストすることです。

var links = document.getElementsByTagName('a');

for(var i; i<links.length;i++){
    if(links[i][yourAttribute]){
        links[i].addEventListener(...);
    }
}

ただし、いくつかの注意点があります。一部のブラウザ（ネジIE）ではサポートされていませんquerySelectorAll()。また、IEにはそのバージョンがありますaddEventListener()attachEvent()

于 2012-04-21T11:55:03.430 に答える