--- title: HackMD presentation Sample1 tags: presentation slideOptions: theme: white slideNumber: 'c/t' center: false transition: 'none' keyboard: true width: '93%' height: '100%' --- <style> /* basic design */ .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p { font-family: 'Meiryo UI', 'Source Sans Pro', Helvetica, sans-serif, 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic'; text-align: left; line-height: 1.8; letter-spacing: normal; text-shadow: none; word-wrap: break-word; color: #444; } .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {font-weight: bold;} .reveal h1, .reveal h2, .reveal h3 {color: #2980b9;} .reveal th {background: #DDD;} .reveal section img {background:none; border:none; box-shadow:none; max-width: 95%; max-height: 95%;} .reveal blockquote {width: 90%; padding: 0.5vw 3.0vw;} .reveal table {margin: 1.0vw auto;} .reveal code {line-height: 1.2;} .reveal p, .reveal li {padding: 0vw; margin: 0vw;} .reveal .box {margin: -0.5vw 1.5vw 2.0vw -1.5vw; padding: 0.5vw 1.5vw 0.5vw 1.5vw; background: #EEE; border-radius: 1.5vw;} /* table design */ .reveal table {background: #f5f5f5;} .reveal th {background: #444; color: #fff;} .reveal td {position: relative; transition: all 300ms;} .reveal tbody:hover td { color: transparent; text-shadow: 0 0 3px #aaa;} .reveal tbody:hover tr:hover td {color: #444; text-shadow: 0 1px 0 #fff;} /* blockquote design */ .reveal blockquote { width: 90%; padding: 0.5vw 0 0.5vw 6.0vw; font-style: italic; background: #f5f5f5; } .reveal blockquote:before{ position: absolute; top: 0.1vw; left: 1vw; content: "\f10d"; font-family: FontAwesome; color: #2980b9; font-size: 3.0vw; } /* font size */ .reveal h1 {font-size: 5.0vw;} .reveal h2 {font-size: 4.0vw;} .reveal h3 {font-size: 2.8vw;} .reveal h4 {font-size: 2.6vw;} .reveal h5 {font-size: 2.4vw;} .reveal h6 {font-size: 2.2vw;} .reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {font-size: 2.2vw;} .reveal code {font-size: 1.6vw;} /* new color */ .red {color: #EE6557;} .blue {color: #16A6B6;} /* split slide */ #right {left: -18.33%; text-align: left; float: left; width: 50%; z-index: -10;} #left {left: 31.25%; text-align: left; float: left; width: 50%; z-index: -10;} </style> <style> /* specific design */ .reveal h1 { margin: 0% -100%; padding: 2% 100% 4% 100%; color: #fff; background: #c2e59c; /* fallback for old browsers */ background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); background-size: 200% 200%; animation: Gradient 60s ease infinite; } @keyframes Gradient { 0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%} } .reveal h2 { text-align: center; margin: -5% -50% 2% -50%; padding: 4% 10% 1% 10%; color: #fff; background: #c2e59c; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #64b3f4, #c2e59c); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #64b3f4, #c2e59c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } </style> <!-- --------------------------------------------------------------------------------------- --> # <br>Google analytics <br>流入数の確認手順 <br> ## 目次 * 特定のページへの流入数を調べる方法 *    〃    流入経路を調べる方法 *    〃    どのようにページ遷移したかを調べる方法 <br><br><br> ## 流入数の調べ方 GoogleAnalyticsに初めてアクセスした際はホーム画面が表示されます。 ![](https://i.imgur.com/PFrpXzA.png) <br> --- 特定のページへの流入数を調べるには左のバーの「行動」をクリックします。 さらに出てきた見出しをサイトコンテンツ→すべてのページ、の順にクリックすると ページが遷移します。 ![](https://i.imgur.com/Afe67qk.png) <br> --- 遷移後のページではシステムシェアード様企業サイト(https://www.3sss.co.jp/) の すべてのページのアクセス状況が確認できます。 右上の日付欄ではアクセス状況の期間指定を行えます。 ![](https://i.imgur.com/YfF66c7.png) <br> --- 続いて表示内容を特定のページに絞っていきます。 グラフの下にある「アドバンス」で、調べたいページのURLの一部のキーワードを入力。 例えば「service/cloudservice/aws-training-vouchers-sales」と入力した場合、 サイトの全ページのうち、URLに上記の文字列が含まれるページが表示されます。 ![](https://i.imgur.com/Bu62WGl.png) <br> --- ## 流入経路の調べ方 次に、ユーザーが特定のページにどのように辿り着いたのか=流入経路を調べます。 左のバーの「行動」をクリック後、サイトコンテンツ→ランディングページの順にクリック。 ![](https://i.imgur.com/4ZVXYr5.png) <br> --- すると表示内容が変わり、サイトのなかで「ユーザーが最初に訪問したページのすべて」を確認できます。 続いて先ほどのようにグラフの下にある「アドバンス」の入力欄にURLの一部を打ち込み、調べたいページのみに絞り込みます。※図の① 次に、さらに詳しく流入元を調べていきます。 表の左上にある「セカンダリディメンション」をクリックし、新たに表示されるバーの中の「集客」をクリックします。 するとさらに細かい分類が出てくるので、その中の「参照元/メディア」をクリックします。 ![](https://i.imgur.com/FU9aQPS.png) 表の項目に「参照元/メディア」が追加され、 ユーザーがどのような経路で流入してきたかが分かります。 --- ## ページ遷移の調べ方 最後にユーザーが 「特定のページにアクセスしたのち、どのようにページ遷移したか」を調べる方法をご説明します。 左のバーから「行動」を選択し、さらに「行動フロー」をクリック。 ![](https://i.imgur.com/5WlDrBA.png) <br> --- 次に表示させるページを絞っていきます。 「ランディングページ」と書かれた緑のボタンの横にある歯車のボタンをクリック。 ![](https://i.imgur.com/ptCciJQ.png) <br> --- 次のようなウィンドウがポップアップするので、「アイテムを追加」ボタンをクリック。 ![](https://i.imgur.com/EtJCxji.png) <br> --- マッチタイプを「含む」、 式に調べたいURLの一部を入力し適用ボタンをクリック。 ![](https://i.imgur.com/dy1rBrL.png) <br> --- そうすると特定のページに訪問したユーザの行動履歴が表示されます。 キャプチャでは以下のようなことが分かります。 ◆「service/cloudservice/aws-training-vouchers-sales」に直接訪問してきたユーザーは 3人 ◆そのうち1人は「https://www.3sss.co.jp/service/cloudservice」 のページに移動した ◆2人は何の行動も起こさずサイトを離脱した ![](https://i.imgur.com/rt0AiBm.png)