jQuery

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

onclickでgoogle アナリティクスのイベント計測する

普段あまりアナリティクス関連やらないので調べた。
詳しいことは他のサイトにも載ってるので、最短でコピペできるようにしておく。

呼び出すのはこれ

ga('send','event','category','action')

sendとeventまでは決まり文句でこのまんま書かなきゃだめ。
categoryとactionは計測されるときの集計につかうので好きな文字列をいれる。

ga('send','event','link','click')
 
とかいう風にね。
ほんとはもっと引数あるけど最低限でいいので必須以外は省略。


呼び出し方はこう。

<a href="#" onclick="ga('send','event','link','click')">こちら</a> 

aタグに直で書くときはonclick内に記載しちゃう。

クリックイベントをjs側で制御してる場合はこう。

$('.btn').click(function(){
ga('send','event','link','click');
}) ;


どこをクリックしたのか分けて取得したいよね。
って時はidをつけておいてそのidを送っちゃうのもあり。

こう。


<html側>
<a href="#" class="btn" id="btn1">にゃん</a> 
<a href="#" class="btn" id="btn2">みぃみぃ</a> 
<a href="#" class="btn" id="btn3">フギャー</a> 
<a href="#" class="btn" id="btn4">ゴロゴロ</a>


<js側> 
$('.btn').click(function(){
var btnName = $(this).attr('id');
ga('send','event',btnName,'click');
}) ; 


こんな風にすれば別々で計測できる。


ところで調べていると
_gaq.push([xxxxxxxxxxxxx])
みたいな書き方が出てきて混乱するけど、これは古い方の書き方らしいので今は

ga('send','event',,,,,)のほうね。


 

オリジナル画像tweetボタン内のリンクurlに#(ハッシュ)をつける(twitterのハッシュタグではなく)

意外に検索してもなかなか出てこない。

 オリジナル画像を使ったツイートボタンはこの方のブログがわかりやすいのでリンク
http://edge.sincar.jp/web/original-tweet-button/ 

 これを使ったんだけど、tweet内に表示するリンクurlに#(ハッシュ)がついているurlははじかれてしまうようだった。

http://twitter.com/share?text=サンプルだよー&url=http://sample.com#nyaonyao

っていうツイート文を作ると、、開いた時に

サンプルだよー http://sample.com

となってしまう。
#nyaonyaoの部分が勝手に削除されてしまうんだな。

ツイートボタンにはhashtagsというパラメータもつけられるようになっているけれどそれはツイッター上でのタグ付け機能のためのものであって、リンクにつけるハッシュじゃない。


じゃぁリンクにつけるハッシュはどうしたらいいのー!って調べて英語サイトのほうにいったら、

#ハッシュは%23という文字列でエンコードされる 

 という文章を発見。なるほ。

ということでいろいろやった結果以下のようになった。

コピペで使ってください。

//■ツイート
$('.tweetBtn').click(function(){
var file = 'http://twitter.com/share?text=【ツイート文】&url=http://sample.com%23nyaonyao';
window.open((file), 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1');
return false;
});

 <a href="#" class="tweetBtn"><img src="オリジナル画像"></a>

をクリックするとpopアップでツイート画面が開くっていう寸法だね!

%23 → # におきかわって

ツイート画面では

【ツイート文】
http://sample.com#nyaonyao

となるよ!

※1つ注意点は元のサイトさんのほうで紹介されているスクリプトの
window.open(encodeURI(decodeURI(this.href))〜〜

の部分。
デコードしてエンコードしてっていうのをいれると今回の場合、%23がそのまま%23という文字列で表現されちゃうので、トリましたよ。


 サワディーカップ!

iOS8.4.1でa:hoverにopacityつけるとリンクが飛ばなくなる

iOS8.4.1にアップデートされたiPhoneやiPadのsafariで起きてる問題。

a:hoverにopacityをつけると、hoverに1タップ消費されてしまい、2タップしないとリンク先に飛ばない事件。

まずはこのサンプルを見て欲しい↓
サンプルページPCのブラウザでクリック

 3つのボタンを並べている。

1つめはhoverで色がかわる。
2つめと3つめはhoverでhover:0.5にしていて、半透明になるようになっている。
マウスをのせてみるとそのとおりになるよね。

クリックしてみても、普通にリンクとして次のページに飛ぶ。



んじゃ次にiOS8.4.1にアップデートされたiPhoneのsafariで同じページを見てみてほしい。
↓QRカメラでもいけるよ!
chart

 そして、各ボタンをタップしてみてほしい。

・・・・・

おわかりいただけただろうか...(怖い声で) 


1つめのボタンは普通にタップでページ遷移するのに、
2つめと3つめのボタンは、1度目のタップで、ページ遷移せずになんと半透明になってしまうんだ!!! 

a:hover{opacity:0.7}

などと設定するとhoverで1タップ消費されてしまう事変。

iOS8.4.1からおこる現象だから、最近登場したピカピカの新人バグだ(バグなの?)

これ、ユーザビリティを著しく下げるよね。

ユーザーはページ遷移したくてボタンをタップするのに、何の変化もしない。
(ように見える。実際は少し透明になってる。)

「なんだよこのサイト。壊れてるのかよ」

ってなる。

実際僕は普通に調べ物をしてて、どこかのサイトでそう思った。

これはコンバージョンをガッツリ取りたいサイトにとっては、かなりのダメージなんじゃないかと思う。



■レスポンシブに悪影響

普通のスマホサイトだったらhoverなんて設定してないだろうし、この問題 でダメージを負うことはないかもしれない。

一番やられるのはレスポンシブサイトじゃないだろうか。

レスポンシブはpcでもスマホでも同じソース&cssを読ませたりするから、aタグには当然hoverがついていたりするし、hoverにはopacityがついていたりする。


■jsで対処してみる

jQueryでiOSの場合のみhoverでも遷移するというのを書いてみた。
これをそのままコピペで一応使える。
target="_blank"やhref="#top"などのページ内リンクでも使えるように調整してある。

var userAgent = navigator.userAgent;
var UA_iPhone = (userAgent.indexOf('iPhone') > -1)? true:false;
var UA_iPad = (userAgent.indexOf('iPad') > -1)? true:false;

$(function() {
if(UA_iPhone || UA_iPad){
$('a').bind("mouseover",function(ev){
var link = $(this).attr("href");
var target = $(this).attr("target");
var linktype = link.substring(0,1);
if(linktype != "#"){
if(target == "_blank"){
window.open(link);
} else{
location.href = link;
}
}
});
}
});

このjsを追加したページがこちら
iOS用の処置をしたサンプルページ
 
QRはこちら
chart2

iPhoneでタップでも一応hoverで1タップ消化されずに飛ぶようになった。



■そもそもhoverでopacity等は使わないほうがいいかもしれない

上記のjsで対処はできたけど、もしiOSが今後アップデートされていってもこの問題が残るようなら、 hover{opacyty:●}という記述は使わないほうがよさそう。

半透明にしたいなら、jsでやるとか。


なんかもっと良いやりかたあるんかな。

 






 

bxsliderのnextなどをクリックすると途中で止まっちゃうのを解決。minifyされてる方で。

bxsliderでnextやprevなどをクリックすると、なん秒かたつと自動でスライドするオート機能がストップしてしまう。

その解決法はいろいろなブログで書かれてる。
たとえば、こことかわかりやすい。

達磨ブログ 

でも、多くの開発者はminifyされた方の
jquery.bxslider.min.js
を使ってるんじゃないかと思う。

できればmin化(minimize)されてる方で解決したいと思い、該当箇所をコツコツ探したよおいら! 
消す箇所は3つ。

まず1つ目は、10908文字目あたりにあるこれ。
o.settings.auto&&r.stopAuto();
文字目はプラグインがこれからバージョンアップしていくにしたがって変わるはずだから、上記をコピーして、検索しちゃったほうが早そう。
こいつを削除だ。



次に2つめは、10731文字目あたりにあるこれ。
o.settings.auto&&r.stopAuto(),
これも同様に削除する。
最後についてる「,」も削除しないとエラーになるので注意



3つめは、10649文字目あたりにあるこれ。
o.settings.auto&&r.stopAuto(),

これらの3箇所をどうにかみつけて、削除したらminのほうでも解決するよ。

(もし知らないところでぶっ壊れてたら指摘して欲しい。
 僕の方ではいまのところ問題ない)



 

Uncaught Error: Syntax error, unrecognized expression:エラー

動きはおかしくないものの
chromeのコンソールで
Uncaught Error: Syntax error, unrecognized expression [data-xxx=:

というものがでた。

調べてみると、
シングルクオーテーションの中にさらにシングルクオーテーションを使ったりするとこれがでるらしい。

でもそんなミスはしてない。

エラーを出していたのは以下の記述。

hoge = nyan;
$('.box').filter('[data-type='+hoge+']').height("auto"); 

data-type="nyan"

がついてる要素の高さをautoにしようとしたんだけど、こいつのどこがエラーなんだと。

15分うなってわかった。

「"」 が足りないのか!と。

エラーがでなくなった文はこちら

 $('.box').filter('[data-type="'+hoge+'"]').height("auto"); 
赤い色がついているところに要注目。


 「"」がないと

data-type=nyan

になっちゃう。

でも

data-type="nyan"

という結果じゃないとダメだったんだろうね。わかりづらい。

 
記事検索


手ぶらで通話 - bluetoothヘッドセット

1時間1円で暖かい。電気毛布。

夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

info(あっと)tacshock.com
タグクラウド
QRコード
QRコード
  • ライブドアブログ