matuixのブックマーク - はてなブックマーク

クロスドメインを複数プロパティで管理する方法（ユニバーサルアナリティクス版）｜ Tips Note by TAM

GoogleAnalyticsで複数ドメインを管理する際に、ドメインを統合したプロパティと、ドメインごとに個別のプロパティで計測したいというニーズがあった場合の設定方法をご紹介します。例えば、下記のような別ドメインのサイトがあるとします。・ブランドサイト「brand.co.jp」・ECサイト「brandshop.com」上記を、「統合したプロパティ」と「個別のプロパティ」で管理したい場合、下記のように3つのプロパティを用意します。 ①ブランドサイトのプロパティ→UA-11111111-1 ②ECサイトのプロパティ→UA-22222222-1 ③2つのサイトを統合したプロパティ（クロスドメイントラッキング）→UA-33333333-1 手順1.③のクロスドメイン用のトラッキングコードを作成します。 [ブランドサイト用] <script> (function(i,s,o,g,r,a,

matuix 2021/07/14

google analytics

リンク

レスポンシブイメージのポリフィル「Picturefill.js」でブレイクポイントによって画像を切り替える｜ Tips Note by TAM

2017.10.06 レスポンシブイメージのポリフィル「Picturefill.js」でブレイクポイントによって画像を切り替えるスマホでは縦長の画像を表示したいけれど、PCでは横長の画像を表示したいということがよくあります。そんな時にはJavaScriptで横幅を判定して切り替えるという方法がよくとられると思います。例えば、以下のような方法ですね。 jQueryでウィンドウサイズによって画像を切り替える最近では、pictureタグなどを使ったいわゆるレスポンシブイメージを使える環境が増えてきてきているのをご存知でしょうか。レスポンシブイメージとは、「画像を読み込む前に、ブラウザ側で横幅や解像度などを考慮して、指定された、もしくは最適な画像ファイルだけを読み込んでくれるHTMLのネイティブな機能」です。対応しているブラウザであればCSSもJavaScriptも使わずに使用できます。

matuix 2020/02/24

レスポンシブ

リンク

ペルソナ・ラボ｜ユーザーテストとペルソナ・シナリオをWeb構築に活用しよう！

「みんなのため」につくろうとしても、みんなに使いやすいWebサイトにはなりません。「誰に一番好かれたいか？」ということが重要で、「その人」のためにサービスや機能を絞り込み優先順位をつけます。

matuix 2018/06/15

リンク

【WordPress】自動で生成される仮想robots.txtについて整理してみた｜ Tips Note by TAM

WordPressが仮想robots.txtを自動で生成する際、WordPressの設定によってrobots.txtの生成方法や記述内容が変わってくるようなので、「WordPressの設定」と「仮想robots.txt」の関係について整理してみました。 1.WordPressをルート直下にインストールしたとき http://example.com/ のルート直下にWordPressをインストールし、http://example.com/robots.txt にアクセスしてみます。（※ただし、パーマリンク設定をデフォルト［http://example.com/?p=123］のままにしているとrobots.txtは生成されず404エラーが表示されます。） User-agent: * Disallow: /wp-admin/ Disallow: /wp-includes/ ↑Disallow

matuix 2018/03/13

リンク

CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える｜ Tips Note by TAM

「どうやってコーディングをして組み立てていこうか？」いくつもの案件を経験しても、いつも悩んでしまうのがCSSの書き方です。「それなら自分なりの考えをまとめてルールを作ってしまおう」と考え、CSS設計に関する情報から自分なりにコーディングルールを作りました。今回の内容は社内勉強会で発表した「CSSのファイル構成と命名規則」の資料を再編したものです。すべての案件内容で最適な方法ではないこともあると思いますので、1つの考え方だと捉えていただけるとありがたいです。詳しいコードやルールはGitHub（個人のアカウント）を参照してください。「使用しているテンプレート」リンク先のstyle.scssで実際の全体の構成が確認できます。使用しているテンプレート CSSコーディングルール CSSは影響範囲の管理が難しい CSSで難しいことのひとつは「影響範囲」を管理することだと思います。クラスを追

matuix 2016/07/04

リンク

レスポンシブHTMLメールを作成する際の覚書｜ Tips Note by TAM

レスポンシブHTMLメールを作成することがあったので、覚書です。おもに「テーブルレイアウトで、PCの時には横並びのカラムを、スマホの時には縦並びにする」方法についてです。普段、あまりHTMLメールを作成することがない方もいらっしゃるかと思いますので、まず、HTMLメールを作成する際の大前提を。だいたい以下のような感じです。テーブルレイアウト Outlook（2007/2010/2013）がfloatに対応していないなど、メーラーによって、CSSのサポート状況にばらつきがあります。多種多様なメーラーでレイアウト崩れを起こさないためには、テーブルレイアウトが基本です（今更感はありますが）。 ※主要メーラーのCSSサポート状況は以下で確認できます。 Guide to CSS support in em ail | Campaign Monitor CSSはインラインで記述 Gma

matuix 2016/06/21

リンク

Google AnalyticsでABテストをやってみる｜ Tips Note by TAM

GoogleAnalyticsでは、ページを最適化するためのABテストの機能が備わっています。 ※GoogleAnalyticsでは「ウェブテスト」と呼びます。ウェブテストでは、複数の異なるパターンを検証する事によってユーザーに、より効果的なキャッチコピーやボタン、サイト内の導線を検証する事ができます。今回はその「ウェブテスト」をご紹介していきたいと思います。 1.検証用のページを作成するオリジナルページから検証したい場所を1箇所変更したテストページを作成します。 ※テストする際は、複数箇所を変更してしまうと効果が見えにくくなってしまう為、変更箇所は1箇所にする事をおすすめします。（ウェブテストでのパターンは9つまで設定できます。）今回は、下記のようにボタンの色を変えたものを作成しました。 2.検証用のページを正規化するテストページがクローラーにインデックスされないように、

matuix 2016/05/02

ABテスト

リンク

Androidは「apple-touch-icon」でいろいろハマるので要注意｜ Tips Note by TAM

iPhoneとAndroidでは、タグ内に下記のような記述をすることで、用意した画像（icon_tipsnote.png）をホーム画面にショートカットアイコンとして設置することができます。【例】 <link rel="apple-touch-icon" href="images/icon_tamkun.png"> Androidで、こちらで用意した画像をショートカットアイコンとして表示させる際にいろいろハマってしまったので、次はそうならないように覚書です。（画像サイズ他、ショートカットアイコン設置に関する具体的な方法は割愛します）【その1：ベーシック認証がかかっている場合は要注意】ショートカットアイコンを設定したページを、テスト環境と公開前の本番環境（ベーシック認証のかかった状態）にアップロードして表示・動作確認を行なっていたところ、テスト環境下では、問題なく「appl

matuix 2014/08/26

リンク

Google Analyticsで複数ドメインをまとめて計測する方法｜ Tips Note by TAM

※クロスドメイントラッキングは、ショッピングカートやお問い合せが別ドイメインであった場合や、複数ドメインを運用していて、全てのドメインを1つのレポートでまとめて見たい場合などに使用します。 1.複数サイト用のトラッキングコードを埋め込む複数サイト（別ドメイン）を一つのレポートでまとめて計測したい場合各ドメインのページに同じトラッキングコードを設定します。 Google Analyticsの画面からトラッキングコードを取得する際、「複数のトップレベルドメイン」をオンにします。その際に表示されたトラッキングコードの「_setDomainName」の箇所を「none」にします。こんな感じです。 ↓ <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-xxxxxxxx-

matuix 2014/07/24

google analytics

リンク

GAタグなどをチェックしてくれる［Tag Assistant］｜ Tips Note by TAM

今回はChrome 拡張機能「Tag Assistant（タグアシスタント）」を紹介します。 Tag Assistantは、Googleの公式ツールでGoogleアナリティクスやAdWordsといった計測ツールタグの設置状況を調べることができます。導入はいたって簡単で、Chrome ウェブストアからインストールするだけ。・Tag Assistant (by Google) 【対応タグ】・Google Analytics (ga.js) ・Google Analytics (dc.js) ・AdWords Conversion Tracking ・AdWords Remarketing (legacy) ・AdWords Remarketing (new remarketing tag) ・Doubleclick Floodlight ・Google Tag Manager 確認方法も