グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

googleアナリティクスは解析用のコードをページに埋め込む形式のため、
外部サイトへのリンクについては計測することができません。

その場合、解析タグを設置するのと合わせて、
<a>タグにonclickで次のようなコードを仕込むことで
クリックを計測することができるようになります。

---------------------------------------------------------------------------------------

<a href="xxx.html" onclick="javascript:_gaq.push(['_trackPageview', '仮想URL']);">

---------------------------------------------------------------------------------------

-- 2013/7/16 追記 --
上記の他に、下記のような記述の仕方もありました。
---------------------------------------------------------------------------------------

<a href="xxx.html" onclick="javascript:_gaq.push(['_trackEvent', '仮想URL']);">

---------------------------------------------------------------------------------------

_trackPageview と _trackEvent の違いになります。

_trackPageview は仮想ページビューを使う方法で、サイト全体のページビューも増えます。
_trackEvent はイベントトラッキングを使うので他の計測結果には影響しません。

基本的には外部サイトヘのリンクに設置するものですので、_trackEvent のほうが良さそうです。
逆にPDFなどへのリンクに仕込む場合は _trackPageview が良さそうですね。

-- 追記ここまで --

外部サイトへのリンクと書きましたが、
解析コードを仕込めない画像やPDFへのリンクも計測できるため
使いどころはいろいろとありそうです。

ちなみに、解析コードのバージョンによって記述が違うようで、
上記の記述が使えるのは↓のような非同期型の場合になります。

---------------------------------------------------------------------------------------
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_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>
---------------------------------------------------------------------------------------

リンクURLにパラメータを付け、
リンク先のページで処理させるというのをやったのでメモです。

■index.html
---------------------------------------------------------------------------------------
<a href="page.html?sample1=yes&sample2=100">リンクです</a>
---------------------------------------------------------------------------------------

上記のようなリンクを設置。
URLの後に"?"でパラメータを繋ぎます。
複数ある場合はさらに"&"で繋ぎます。


■page.html
---------------------------------------------------------------------------------------
<script type="text/javascript">

var urlPrm = new Object;
var urlSearch = location.search.substring(1).split('&');
for(i=0;urlSearch[i];i++) {
  var kv = urlSearch[i].split('=');
  urlPrm[kv[0]]=kv[1];
}

alert(urlPrm.sample1);
alert(urlPrm.sample2);

</script>
---------------------------------------------------------------------------------------

飛び先のページに書くJSは上記のようになります。
最後のアラートで表示される文字はそれぞれ"yes","100"となります。

以前このグラビカでも「DD_belatedPNG」を紹介する記事を紹介していました、
pngをIE6に対応させるためのJS「DD_belatedPNG」について注意点です。

CSSでマウスオーバーを表現させたい場合、
通常時とオーバー時の画像をつなげて、aタグの背景に指定し、
hoverで画像をスライドさせる方法があります。
png画像を使用した場合、IE6で正しく表示されないため
DD_belatedPNGを使用します。

が、、、、
上記のような場合、aタグの縦幅（height）が、奇数だと、
IE6で、オーバー画像が1px余分にスライドしてしまい、
画像がずれたような表現になってしまいます。
背景の位置指定では調節できないようです。
なんでか全くわかりませんが、
縦幅を偶数にすることで解決できます。

きみのために入れてるのにわがまま言うなよ。。。（;´_`;） ハァ・・

JavaScript内に相対パスを記述すると、
そのJavaScriptが読み込まれるHTMLからの相対パスになります。

同じJavaScriptを複数のページで使うような場合、
相対指定だとページごとにパスが変わってしまうため上手くいきません。

そういうとき、
JavaScript自身の階層を取得し、
自分からの相対パスにするスクリプトを探してみました。

こちらのサイトで紹介されています。

Tipsというかメモ
JavaScript :: 自分自身が設置されているURLを取得する

変数名を動的に指定できる、
Flashでは配列アクセス演算子と呼ばれるものがあるのですが、
JSでこれにあたるものはどれだろう？と思い
探してみるもなかなか見つかりません。

最終的に、eval() を使うことで似たようなことができたので
忘れないようにメモしておこうと思います。


eval() は中の式を評価するので、
例えば名前が連番になるような変数を作るなら

for(i=1; i<=5; i++){
eval("var sample_"+ i +";");
}

上記のように書くことで
「sample_1」～「sample_5」の変数を作成することができます。

以前書いた、
Flash：ブラウザのスクロール状態を取得
という記事のスクリプトを修正したものになります。

JSとFlashでやり取りして、ブラウザのスクロールやサイズの情報をFlashに渡す、というもの。

修正と言いつつも、問題があったデータ取得の部分以外にも
データの受け渡し方などを変更しているため、
実際はほぼ作り直しになっています。

・デモ
・ダウンロード

取得したデータを使って、情報ウインドウが中央になるようにしています。
ブラウザ幅が広くても狭くても、情報ウインドウが見えるはず。

Dreamweaverの「ブラウザでプレビュー」と「デザインビュー」の機能は
コーディング時の確認にとても役立つ機能ですが、
「サイトの管理」と合わせて使うことでさらに便利になります。

何のことかというと、サイトを設定することで
ルートパスが使われているサイトでもプレビューできる、ということです。


サイトの管理でサーバーの情報（URL接頭辞など）が正しく入っていると、
/（ルート階層）から始まるパスで書かれたファイルも
デザインビューの表示に反映させることができます。

さらに、環境設定から 「ブラウザでプレビュー」＞「一時ファイルを使用してプレビュー」にチェックを入れると、
「ブラウザでプレビュー」したとき一時的にサーバーにファイルが生成され、
実際にアップしたときの見え方を確認することができます。

※その際参照するファイルはサーバー上のものなので、
　画像やスタイルなど必要なファイルはアップする必要があります。


サイト管理の設定をするのは少し面倒かもしれませんが、
毎回 アップ → 確認 とするよりは随分楽になると思います。

※2014.3.5 追記
LightBox v2.6をお使いの方はこちら。

→ LightBoxのtitleコメント内で改行（v2.6）


Lightboxを使用する際、
aタグのtitleの中に入れた文言を
改行したいようなシチュエーションがあると思います。
　
そういった場合はどうすればいいかですが、
　
<a href="sample_big.gif" title="いちぎょうめ<br />にぎょうめ"><img src="sample.gif" alt="sample" /></a>
　
これで何とかなってしまいます。
　
ですが、titleの中にHTMLタグを書きたくないと考える方も多いはず、
　
　
その場合は、HTMLソースに多少変更を加え、
jquery.lightbox-0.5.jsのほうを弄れば解決できます。
　
　

Flashでのシェアボタンの設置方法です。
HTMLで<a>タグにパラメーターを与えるのと同じように、
getURLのアドレスにパラメーターを加えることで作成できます。

■twitter
------------------------------------------------------------------------------
getURL( "http://twitter.com/share?url=//www.gravity-works.jp/&text=twitterテキスト" , "_blank" );
------------------------------------------------------------------------------

■Facebook
------------------------------------------------------------------------------
getURL( "http://www.facebook.com/sharer.php?u=http://www.google.co.jp/" );
------------------------------------------------------------------------------

ただし、上記のように日本語を使う場合は
そのままではエラーが出てしまうので、UTF-8でURLエンコードをする必要があります。

escape() を使い、日本語を含むテキストを変換します。
※System.useCodepage が true になっている場合は false にします
------------------------------------------------------------------------------
getURL( "http://twitter.com/share?url=//www.gravity-works.jp/&text=twitterテキスト" , "_blank" );
　↓
getURL( "http://twitter.com/share?url=http://www.google.co.jp/&text="+ escape("twitterテスト") , "_blank" );
------------------------------------------------------------------------------

これでFlashにもシェアボタンを設置することができます。

リンクをクリックしてページ移動をする際、
通常のリンクでは履歴が残り、ブラウザの「戻る」が有効になります。

iframe内のページを切り替える場合も同じで、
履歴に残るため「戻る」を押すとiframe内のページが戻ります。

今回はiframe内では戻るを使えないようにしたかったので、
履歴に残らないようなページの切り替えを探しました。

JSで以下のように書くことで、「戻る」の効かないリンクになります。


<a href="test.html">リンクです</a>
　↓
<a href="test.html" onClick="JavaScript:location.replace('test.html'); return false;">リンクです</a>
※2011/11/24 ソースを修正しました

URLを2箇所に書く点に注意です。