barba.js v2で非同期遷移し遷移時のアニメーションをつけてGTMでGA設定までやってくよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
バックエンドに転身してもフロントエンドのお仕事も引き続きするハルです。今回はフロントエンドの記事を書きます。 Webサイトで非同期遷移をし、切り替えアニメーションをつけたいときに使えるライブラリのbarba.jsのv2を紹介したいと思います。 ※非同期遷移については、こういう動きをするものだよーというみやさんの記事がありますのでご参照ください（今回紹介する技術が使われているものではありません）。 barba.js v2 https://barba.js.org/ 以前、v1も使ったことがあったんですが v2を触ってみて、記述方法と変わっていたので導入方法の紹介をします。また、アニメーションの設定時にだいたいこんな感じにすればいいというのがわかったので、そこもまとめていきたいと思います。 barba.js v2 の注意点 対象ブラウザに制限があり対応する場合、ポリフィルを使用する必要がありま
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。 このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。 実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。 ※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに
AMP ページにアナリティクス コードを設定する方法
A/Bテスト 5 Ads Data Hub 1 AdSense 5 AdWords 19 AdWords 連携 21 AMP 4 Analytics 基本 5 API 2 BigQuery 11 Cookie 1 CPA 1 DCM 1 DFP 3 DoubleClick 11 DoubleClick Campaign Manager 1 DoubleClick for Publishers 3 e コマース 2 Firebase 8 Firebase Analytics 4 Firebase 向け Google アナリティクス 2 ga.js 2 GA4 11 GACP 18 GCP 1 Google Cloud Platform 1 Google Consumer Surveys 2 Google Insights for Search 1 Google アド マネージャー 1 Goo
Googleタグマネージャでクリックイベントを設定しよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ ディレクターのなっちゃんです。 ここ数ヶ月この連載を続けていて「読んでるよ」「勉強になったよ」と声をかけてもらうことが増えました。私自身も、Googleアナリティクスについてはまだまだ知らないことが多いので、初心者の人にも伝わるように言葉を選んだり、キャプチャを入れたりして記事を書くように意識しています。 今日もこの記事を読んでいる人のGoogleアナリティクスLIFEがちょっぴりハッピーになるように、一生懸命、記事を書いていきますね。 ではでは、前回のおさらいです。 前回の連載ではGoogleタグマネージャでGoogleアナリティクスを連携するところまで説明いたしました。 ここまでだったら、別にGoogleタグマネージャを使う必要はありませんね。 なので、今回からはいよいよ、クリックイベントの設定方法について説明いたします。とっても便利なので、ぜひ挑戦してみてください！ 今
管理画面で設定できる！GoogleタグマネージャでGoogleアナリティクスを一元管理！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、なっちゃんです。 少し前になるのですが、6月にWeb制作の実績紹介サイト「LIG WORKS」を新しくリリースしました！ このプロジェクトは必要最低限の機能とページ数でスタートしたものなので、まだまだ完成ではございません。今後、もっともっと魅力的な実績サイトにしていくために、改善を加えていく予定です。 新しくサイトを立ち上げたとき、アクセス解析はとっても大事ですね！ 普段はGoogleアナリティクスのタグを埋め込んで数字を見ていくことが多いのですが、今回は思い切ってGoogleタグマネージャを使ってみることにしました。 今回のブログではGoogleタグマネージャでGoogleアナリティクスの設定方法を解説します！ 下記の画像からLIG WORKSが見れるので、よかったら見ていってくださいね♪ なぜGoogleタグマネージャを使用したのか 制作実績サイトの制作は「必要最低限のみで
SEO対策の必須ツール！Search ConsoleとGoogleアナリティクスの連携方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのちゃんれみです。 Googleアナリティクス連載第8回目は、あゆみさんからバトンを受けて「Search Consoleとの連携方法」を紹介します。Search ConsoleはSEO対策で絶対に欠かせないツールです。 読み方は「サーチコンソール」です。 ちゃんれみはこの記事を書くまでずっと「サーチコンソーレ」だと思ってました。 Search Consoleとは Search Console（旧ウェブマスターツール）とは、Googleが提供している無料ツールのことです。 主にGoogleの検索結果上でのデータや改善策を調査するときに活用したりしなかったりします。 つまりGoogleアナリティクスではユーザーがサイトに訪れた後の解析ができ、Search Consoleではサイトに訪れる前（検索結果画面）の解析ができます。 本来この2つは別々のツールですが、連携すること
Googleスプレッドシートの基本事項と知っておきたいアドオンまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集部です。 業務上でGoogleスプレッドシートを使う方も多いのではないでしょうか？ Excelと同じ機能を持つスプレッドシートは、複数人で同時に編集ができるなど使い勝手がよく、ビジネスツールとして欠かせない存在です。 今回は、そんなスプレッドシートの基本事項と知っておくと便利なアドオンをまとめました。 スプレッドシートでできること https://www.google.com/intl/ja_jp/sheets/about/ まずは、スプレッドシートの機能で代表的なものをご紹介します。 Excelのように表計算ができる リスト作成からお金の管理、データの分析など、表の作成やデータのビジュアル化などに適しています。 Excelの機能がそろっているのはうれしいですね。 複数人と共同作業ができる 共有ボタンを押せば、好きな人といつでもどこからでも、スプレッドシートを編
AngularJSで作成したシングルページアプリケーションをGoogleアナリティクスでトラッキングさせる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
10月から引き続きAngularJSな日々を送っている先生です。 今回はAngularJSで作ったシングルページアプリケーション（以下SPA）をGoogle Analyticsでトラッキングさせたいと思います。 SPAでのトラッキング問題 Google Analyticsは、タグを埋め込むだけで勝手にトラッキングしてくれる手軽な解析ツールです。しかしAjaxやpushStateなどページ遷移を伴わないSPAでは、トップページしか解析されません。Analyticsではその対策として、任意のタイミングでトラッキングすることができる仕組みを持っています。 // ページビュー ga('send', 'pageview'); // イベントトラッキング ga('send', 'event', 'image1', 'clicked'); 参考：高度な設定 – ウェブ トラッキング（analytics.
[JS]ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト -Scroll Depth
ユーザーがページを見た際に、どのくらいスクロールされているのか、また指定した要素がスクロールされて表示されるまでにどのくらいかかるのか、といったデータをGoogle Analytics上で解析できるようにするjQueryのプラグインを紹介します。 実装は簡単、ほんの数行ページに加えるだけです。 Scroll Depth Scroll Depth -GitHub Scroll Depthのデモ Scroll Depthの使い方 Scroll Depthのデモ Scroll Depthは、Universal Analytics, Classic Google Analyticsに対応しており、Google Tag Managerもサポートしています。 対応ブラウザは、Chrome, Safari, Firefox, Opera, IE7-10で、スマフォもiOS, Mobile Opera,
Google Analyticsでソーシャルメディアからのアクセス解析をする方法
ソーシャルメディアからのアクセスの割合を調べる まず最初に、Google Analyticsで総アクセス数に対してのソーシャルメディアからのアクセス数の割合を調べます。 [集客 > チャネル]と移動する。 その後、上の画像のように[プライマリディメンション：デフォルトチャネルグループ] [円グラフマーク]と選択する。 すると、ソーシャルメディアからの検索流入の割合(上記画像の場合は0.3%)が分かります。 この画像のサイトではOrganic Search(主にgoogle検索エンジン)が91.88%なので、検索エンジンからのオーガニック検索からのアクセス流入にかなり頼っている状態だと分析できます。 短期的にはアクセスが見込めても長期的にはアクセス数が減少する可能性が高いので、ブックマークや被リンク、そしてソーシャルネットワークからのアクセス数を増やす対策が必要だと判断できます。 ソーシャル
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
検索順位が上がった時のアクセス増加数を予測できる「Search Rank 」
サイトのアクセス数を増やしたいとき、新たにページを増やすのが良いのか、既存のページを改善するのが良いのか判断する必要がありますよね。 その判断をするために、既存のページを修正することで、どの程度の数字を見込めるのかがまったくわからないと、闇雲に新しいページを作り続けてしまうことにもなりかねません。 そこで今回は、既存のページを改善することで、どのくらいのアクセスの増加を見込めるのか、教えてくれるサービスをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 検索順位が上がったらどれくらいアクセスが増加するか予測する「Search Rank 」 「Search Rank」は、Google Analyticsのデータを使い、既存ページの検索順位を改善することで、どのくらいのアクセス増加を見込
[JS]Google Analyticsを使ったABテストが簡単に実装できるスクリプト -easyAB
ランディングページやバナーなどで、クリックされるテキストはどっちだろう？ カラーを変えるとクリック率があがる？ など、どちらがより効果的か検証することができるABテストを簡単に実装できるjQuery（Zeptoにも対応）の超軽量（2KB）プラグインを紹介します。
ページ内でどれくらいスクロールされているかをGoogleアナリティクスで解析する為のjQueryプラグイン・Scroll Depth
ユーザーにどれくらいページ内で スクロールされているかをGAの イベントAPIを使って解析する為 のjQueryプラグイン・Scroll Depth のご紹介。 スクロールに応じて視差効果を演出できるパララックス系サイトやペラサイトのような1ページで完結するタイプのコンテンツを持つサイトは割と見かけるので、どれくらいスクロールされているかを解析する方法もあるといいかもですね。という需要に応えたライブラリみたいです。 ※時間なくて動作テストしてないのでその程度の記事という事で今日はご了承下さい。 ユーザーのスクロール状況をパーセンテージでトラッキングするプラグイン。デフォルトでは25％、50％、75％といったポイントで解析できるようになってるみたい。また、任意のDOM要素をターゲットにする事も出来るそうです。 コード<script src="https://ajax.googleapis.c
Google Analytics APIでページのアクセスランキングを作る方法
Google Analytics APIを使って、ウェブサイトやブログなどの人気ページのアクセスランキングを作る方法を紹介します。 １．完成イメージ 本エントリーで紹介する手順で作成すれば、ブログに次のようなランキングを表示できるようになります。 厳密には、ランキング用HTMLファイルを出力するところまでの説明となります。 ブログにランキングを表示させる手順は割愛していますので、出力ファイルを適宜インクルードしてください。 ２．作成手順 「Google Analytics API class for PHP」の中ほどにある「googleanalytics.class.zip」をクリックして、ファイルをダウンロード。 アーカイブを展開して、中にあるGoogle Analytics APIを利用するためのライブラリ「googleanalytics.class.php」をサーバにアップロードして
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料メルマガに登録した人は、どこから来て何がポイントで登録したのかを分析するには？（第52回） | Googleアナリティクス セグメント100選
【これはすごい】Googleアナリティクス連携 アクセス予測＆曜日・時間別の平均値分析ツール（祝日自動判別） | 初代編集長ブログ―安田英久 | Web担当者Forum
IDEA * IDEA
seo-matome.jp
アクセス解析のデータ取得からレポート作成までを自動化する「GA Client」を実践活用 第7回 | 1万円で真似できる“戦略的サイト運用術” - 小さく作って速く改善
