Googleアナリティクスで同一URLでフォーム遷移する場合のページビュー計測

計測URLを正規化する、1ページは1URLに集約してページビュー計測することが望ましいことは
https://www.marketechlabo.com/send-ga-pageview-canonicalized-url/
で取り上げたが、この「1ページで複数URL」とは逆に「複数のページで1URL」になるパターンの対応法を取り上げる。

よくあるのはフォームの遷移などで、同一URLで異なる内容のページが表示されることがある。

入力フォーム→確認画面→完了画面

これらが画面遷移はあるものの1URLで完結しているケースである。
ひどい場合は完了画面までもが同一URLになるため、コンバージョンの計測すらできない。

これをステップごとに異なる仮想URLを発行して計測する(ga('send', 'pageview', {'page': 'ステップの仮想URL'}))のだが、中にはフォームのシステム側で仮想URLを発行させ、それをGoogleアナリティクスのトラッキングコードに挿入する実装指示書もある。

そうなるとシステムの改修のコスト、手間がかかってしまうため、システムの改修は極力回避したい。

今回は純粋にHTMLの範囲だけでこの問題を解決する方法を取り上げる。通常

  1. ステップに応じてtitleタグの内容が異なる場合と、
  2. ステップに応じて見出しの内容が異なる場合と、
  3. URLもtitleタグの内容も同じだが、ページ内で表示している画像が異なる場合

のいずれかに当てはまることが多いので、これらのパターンを想定して実装する。

ステップに応じてtitleタグの内容が異なる場合

あらかじめ

  • 共通になるURL(パス名)と
  • titleのテキストと付ける仮想URL(パス名)の組み合わせ

を設定しておく。

// トラッカーの呼び出し(デフォルトのトラッキングコード)
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-Y', 'auto');

// 設定
// 共通になるパス
var strCommonPath = '/service/form.php';
// 仮想パス名をキー、titleのテキストを値にとる連想配列
var steps = {
    '/service/form/1_input': '会員情報入力フォーム',
    '/service/form/2_confirm': '登録内容の確認',
    '/service/form/3_thanks': '登録ありがとうございました',
};

// 処理
// パス名が共通の場合
if (window.location.path == strCommonPath){
    // すべてのステップを走査し、titleがマッチした場合に仮想パス名をsend pageviewする。
    var matched = false;
    for (var i in steps){
        if (!matched && steps[i] == document.getElementsByTagName('title')[0].innerText){
            ga('send', 'pageview', {'page': i});
            matched = true;
            break;
        }
    }
    // どれにもマッチしない場合、仕方なく共通のパス名を採用
    if(!matched){
        ga('send', 'pageview');
    }
// パス名が共通でなければデフォルトの動作を採用
}else{
    ga('send', 'pageview');
}

ステップに応じて見出し(

)の内容が異なる場合

あらかじめ以下を設定しておく。

  • 共通になるURL(パス名)と
  • 各ステップの見出し(

    )に固有に含まれるテキストと付ける仮想URL(パス名)の組み合わせ

たとえば見出しが

  • 会員情報入力画面
  • 会員情報確認画面
  • 会員登録完了

という場合、

  • 入力
  • 確認
  • 登録完了

などが固有のテキストとなる。

// トラッカーの呼び出し(デフォルトのトラッキングコード)
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-Y', 'auto');

// 設定
// 共通になるパス
var strCommonPath = '/service/form.php';
// 仮想パス名をキー、h1に含まれる固有のテキストを値にとる連想配列
var steps = {
    '/service/form/1_input': '入力',
    '/service/form/2_confirm': '確認',
    '/service/form/3_thanks': '完了',
};

// 処理
// パス名が共通の場合
if (window.location.path == strCommonPath){
    // DOMから値を取得するのでDOM取得完了を待つ必要がある
    window.addEventListener('DOMContentLoaded', function(){
        // すべてのステップを走査し、h1の内容が部分一致した場合に仮想パス名をsend pageviewする。
        var matched = false;
        for (var i in steps){
            if (!matched && document.getElementsByTagName('h1')[0].innerText.indexOf(steps[i]) > -1){
                ga('send', 'pageview', {'page': i});
                matched = true;
            }
        }
        // どれにもマッチしない場合、仕方なく共通のパス名を採用
        if(!matched){
            ga('send', 'pageview');
        }
    }, false);
// パス名が共通でなければデフォルトの動作を採用
}else{
    ga('send', 'pageview');
}

</code>と同じ。<code>document.getElementsByTagName()</code>の引数が違うだけ。<br> 今回は<code><h1></code>に含まれる固有のテキストで部分一致を探したが、それは<code><title></code>でも可能。</p> <h2><span class="ez-toc-section" id="URLtitle">URLもtitleタグの内容も同じだが、ページ内で表示している画像が異なる場合</span></h2> <p>前提条件</p> <ul><li>URLが共通となるフォームの遷移にはクラス名「form」を持つ<code><div></code>が含まれる</li> <li>上記の<code><div class="form"></code>直下の<code><img></code>タグがステップによって固有である</li> <li>画像ファイル名の拡張子を除いた部分を仮想URLとして付ける(拡張子は<code>.jpg</code>)</li> </ul><p>というルールにする。</p> <pre><code class="js">// トラッカーの呼び出し(デフォルトのトラッキングコード) (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXX-Y', 'auto'); // DOMから値を取得するのでDOM取得完了を待つ必要がある window.addEventListener('DOMContentLoaded', function(){ // <div class="form">の直下に<img>が来るパターンをdocument.querySelectorで探す var imgStep = document.querySelector('div.form > img'); // そのパターンがあれば(フォーム遷移であれば) if (imgStep){ // 画像ファイル名の拡張子(.jpg)を除いた部分を取得 var imgMatched = imgStep.getAttribute('src').match(/([^/]+)\.jpg$/); if (imgMatched) { // 画像ファイル名の拡張子を除いた部分をパス名に付加してsend pageview if (imgMatched[1]) { ga('send', 'pageview', {'page': location.pathname + '/' + imgMatched[1]}); // 例外(imgMatched[1]がない):仕方なく共通のパス名を採用 } else { ga('send', 'pageview'); } // 例外(画像ファイル名の拡張子が.jpgでない):仕方なく共通のパス名を採用 } else { ga('send', 'pageview'); } // それ以外のページであればデフォルトの動作を採用 } else { ga('send', 'pageview'); } }, false); </code></pre> <h2><span class="ez-toc-section" id="GoogleTips">Googleアナリティクス関連Tips</span></h2> <h3><span class="ez-toc-section" id="i-2">イベント計測</span></h3> <ul><li><a href="/send-ga-event-inview-specified-element/">特定の要素を表示したときにイベントトラッキングする</a></li> <li><a href="/send-ga-event-scroll-specified-height/">一定以上スクロールしたらイベントトラッキング(PC/スマホ別)</a></li> <li><a href="/send-ga-event-link-specified-domains/">特定のドメインに対するリンクのクリックをイベントとして計測</a></li> <li><a href="/send-ga-event-collectively/">一括イベントトラッキングする便利な実装</a></li> <li><a href="/track-form-transition-in-same-url/">JavascriptでYahoo!などのタグマネージャに渡すためのイベントを発生させる</a></li> </ul><h3><span class="ez-toc-section" id="i-3">ページビュー計測</span></h3> <p></p> <ul><li><a href="/send-ga-pageview-canonicalized-url/">canonicalをページのURLとして自動で採用する実装(計測URLの正規化)</a></li> </ul><h3><span class="ez-toc-section" id="e">eコマース計測</span></h3> <ul><li><a href="/implement-ga-ec-without-modifying-program/">システム改修をせずにGoogleアナリティクスのeコマーストラッキングを実装する</a></li> </ul><p>Google の記事一覧</p> <ul><div class="linkcard"><div class="lkc-internal-wrap"><a class="lkc-link no_icon" href="https://www.marketechlabo.com/ga-app-web-property-to-bigquery/"><div class="lkc-card"><div class="lkc-info"><img class="lkc-favicon" src="https://www.google.com/s2/favicons?domain=marketechlabo.18.176.112.138.nip.io" alt="" width="16" height="16"><div class="lkc-domain">marketechlabo</div></div><div class="lkc-content"><figure class="lkc-thumbnail"><img class="lkc-thumbnail-img" src="https://www.marketechlabo.com/images/ga4f-bq/03_setup_ga4f-150x150.png" alt=""></figure><div class="lkc-title"><div class="lkc-title-text">Googleアナリティクスのapp+webプロパティのデータをBigQuery出力する</div></div><div class="lkc-url"><cite>https://www.marketechlabo.com/ga-app-web-property-to-bigquery/</cite></div><div class="lkc-excerpt">Googleアナリティクスのapp+webプロパティがリリースされ、実はサイト訪問の行動ログをBigQueryに出力できるようになった。app+webプロパティそのものの説明これまではGoogleアナリティクス360(GA360)を利用し、そのうえでGoogleに申請しないとログデータをBigQuer...</div></div><div class="clear"></div></div></a></div></div><div class="linkcard"><div class="lkc-internal-wrap"><a class="lkc-link no_icon" href="https://www.marketechlabo.com/ga-log-gcs-bigquery/"><div class="lkc-card"><div class="lkc-info"><img class="lkc-favicon" src="https://www.google.com/s2/favicons?domain=marketechlabo.18.176.112.138.nip.io" alt="" width="16" height="16"><div class="lkc-domain">marketechlabo</div></div><div class="lkc-content"><figure class="lkc-thumbnail"><img class="lkc-thumbnail-img" src="https://www.marketechlabo.com/images/ga-log-gcs-bigquery/outline-150x150.png" alt=""></figure><div class="lkc-title"><div class="lkc-title-text">Googleアナリティクスの計測ログをBigQueryに送る(無料版対応)</div></div><div class="lkc-url"><cite>https://www.marketechlabo.com/ga-log-gcs-bigquery/</cite></div><div class="lkc-excerpt">Googleアナリティクスで収集しているデータ(メジャメントプロトコル)をBigQueryに送り、集計・可視化できるようにする。無料版のGAにも対応し、しかもサーバレスでシンプルに実装できる。本来BigQueryを使ったウェブ行動の詳細分析はGA360を使うべきなのだが、限り...</div></div><div class="clear"></div></div></a></div></div><div class="linkcard"><div class="lkc-internal-wrap"><a class="lkc-link no_icon" href="https://www.marketechlabo.com/google-anaytics-checklist-before-setting/"><div class="lkc-card"><div class="lkc-info"><img class="lkc-favicon" src="https://www.google.com/s2/favicons?domain=marketechlabo.18.176.112.138.nip.io" alt="" width="16" height="16"><div class="lkc-domain">marketechlabo</div></div><div class="lkc-content"><div class="lkc-title"><div class="lkc-title-text">【プロ向け】アクセス解析の設定前チェックリストとGoogleアナリティクス設定手順</div></div><div class="lkc-url"><cite>https://www.marketechlabo.com/google-anaytics-checklist-before-setting/</cite></div><div class="lkc-excerpt">Googleアナリティクスの設定を効率化するために、管理画面を見る前に決めておくべき項目のチェックリストGoogleアナリティクスの管理画面での設定作業の手順設定内容を一覧で出力するツールを紹介する。設定内容の出力は初期設定時に限らず、現状のアカウントの設定...</div></div><div class="clear"></div></div></a></div></div><div class="linkcard"><div class="lkc-internal-wrap"><a class="lkc-link no_icon" href="https://www.marketechlabo.com/get-invisible-ga-tracker-using-gtm/"><div class="lkc-card"><div class="lkc-info"><img class="lkc-favicon" src="https://www.google.com/s2/favicons?domain=marketechlabo.18.176.112.138.nip.io" alt="" width="16" height="16"><div class="lkc-domain">marketechlabo</div></div><div class="lkc-content"><div class="lkc-title"><div class="lkc-title-text">GA/GTMを使った際に見えなくなるトラッカーを呼び出して処理を実行する</div></div><div class="lkc-url"><cite>https://www.marketechlabo.com/get-invisible-ga-tracker-using-gtm/</cite></div><div class="lkc-excerpt">GoogleアナリティクスとGoogleタグマネージャーのマニアックな話題。通常GoogleアナリティクスをGoogleタグマネージャーを使って設置すると、GAのビーコンを呼び出す際のトラッカー名はGTMによってランダムな名前のものが割り当てられる。たとえばこんな「gtm1463146...</div></div><div class="clear"></div></div></a></div></div><div class="linkcard"><div class="lkc-internal-wrap"><a class="lkc-link no_icon" href="https://www.marketechlabo.com/send-ga-event-inview-specified-element/"><div class="lkc-card"><div class="lkc-info"><img class="lkc-favicon" src="https://www.google.com/s2/favicons?domain=marketechlabo.18.176.112.138.nip.io" alt="" width="16" height="16"><div class="lkc-domain">marketechlabo</div></div><div class="lkc-content"><div class="lkc-title"><div class="lkc-title-text">Googleアナリティクスで特定の要素を表示したときにイベントトラッキングする</div></div><div class="lkc-url"><cite>https://www.marketechlabo.com/send-ga-event-inview-specified-element/</cite></div><div class="lkc-excerpt">Googleアナリティクスなどでページの精読状況をトラッキングする際、「特定ピクセル以上スクロールする」「画面の○%以上スクロールする」ことがあるが、同様に「特定の要素を表示したとき」という条件でトラッキングしたいときもある。コンテンツの精読だけでなく、...</div></div><div class="clear"></div></div></a></div></div></ul></div> </article><nav class="navigation post-navigation"><h2 class="screen-reader-text">投稿ナビゲーション</h2> <div class="nav-links"> <div class="nav-previous"><div class="post-nav-title">前の投稿</div><a href="https://www.marketechlabo.com/batch-processing-on-gce/" rel="prev">Google Compute Engineでcronを使って日次バッチ処理を実行する</a></div><div class="nav-next"><div class="post-nav-title">次の投稿</div><a href="https://www.marketechlabo.com/send-event-universal-implementation/" rel="next">JavascriptでYahoo!などのタグマネージャに渡すためのイベントを発生させる</a></div> </div> </nav></main></div> <div id="secondary" class="sidebar-area" role="complementary"> <div class="normal-sidebar widget-area"> <aside id="custom_html-4" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-7452159768889731" data-ad-slot="1881032194"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></aside><aside id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><h2 class="widget-title">Google の記事一覧</h2><ul class="widget_recent_entries"><li class="cat-item"><a href="https://www.marketechlabo.com/ga-app-web-property-to-bigquery/">Googleアナリティクスのapp+webプロパティのデータをBigQuery出力する</a></li><li class="cat-item"><a href="https://www.marketechlabo.com/ga-log-gcs-bigquery/">Googleアナリティクスの計測ログをBigQueryに送る(無料版対応)</a></li><li class="cat-item"><a href="https://www.marketechlabo.com/google-anaytics-checklist-before-setting/">【プロ向け】アクセス解析の設定前チェックリストとGoogleアナリティクス設定手順</a></li><li class="cat-item"><a href="https://www.marketechlabo.com/get-invisible-ga-tracker-using-gtm/">GA/GTMを使った際に見えなくなるトラッカーを呼び出して処理を実行する</a></li><li class="cat-item"><a href="https://www.marketechlabo.com/send-ga-event-inview-specified-element/">Googleアナリティクスで特定の要素を表示したときにイベントトラッキングする</a></li><li class="cat-item"><a href="https://www.marketechlabo.com/implement-ga-ec-without-modifying-program/">システム改修をせずにGoogleアナリティクスのeコマーストラッキングを実装する</a></li><li class="cat-item"><a href="https://www.marketechlabo.com/send-ga-event-scroll-specified-height/">Googleアナリティクスで一定以上スクロールしたらイベントトラッキング(PC/スマホ別)</a></li><li class="cat-item"><a href="https://www.marketechlabo.com/send-ga-event-link-specified-domains/">Googleアナリティクスで特定のドメインに対するリンクのクリックをイベントとして計測</a></li><li class="cat-item"><a href="https://www.marketechlabo.com/send-ga-pageview-canonicalized-url/">GoogleアナリティクスでcanonicalをページのURLとして自動で採用する</a></li><li class="cat-item"><a href="https://www.marketechlabo.com/send-ga-event-collectively/">Googleアナリティクスで一括イベントトラッキングする便利な実装</a></li></ul><a target="_blank" rel="nofollow" href="https://twitter.com/mrtec_y" class="twitter-follow-button" data-size="large" data-show-screen-name="false" data-dnt="true" data-show-count="false">Follow @mrtec_y</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div></aside><aside id="categories-2" class="widget widget_categories"><h2 class="widget-title">カテゴリー</h2> <ul><li class="cat-item cat-item-1"><a href="https://www.marketechlabo.com/category/web-analytics/" title="アクセス解析的フレームワークや記事の評価などwebの分析に固有のトピック。アクセス解析は非構造データを扱うことになり、その中で特徴量を作っていく必要がある点で特殊。そこに着目していく。">アクセス解析</a> (9) </li> <li class="cat-item cat-item-2"><a href="https://www.marketechlabo.com/category/analysis/" title="web以外の一般的なデータ分析の話。webと異なり構造化されたデータが対象。">データ分析</a> (23) <ul class="children"><li class="cat-item cat-item-18"><a href="https://www.marketechlabo.com/category/analysis/r-software/">データの加工や分析で使うRの使い方</a> (15) </li> </ul></li> <li class="cat-item cat-item-17"><a href="https://www.marketechlabo.com/category/tech-around-data/" title="サーバやクラウドの使い方、サーバまわりの便利なツールを紹介。サイトの高速化など、ウェブ運営のテクニカルなこと触れている。">データ周辺の技術</a> (13) <ul class="children"><li class="cat-item cat-item-22"><a href="https://www.marketechlabo.com/category/tech-around-data/gcp/">GCP/Firebase</a> (6) </li> </ul></li> <li class="cat-item cat-item-4"><a href="https://www.marketechlabo.com/category/advertising/" title="運用型広告はシステム、テクノロジーを操ることで広告配信をし、成果を出していこうというもの。アドテクそのものというよりアドテクと運用をつなぐ話、あるいはデータと運用の話">広告運用とテクノロジー</a> (9) </li> <li class="cat-item cat-item-5"><a href="https://www.marketechlabo.com/category/implementation/" title="CDP・分析基盤の構築からタグ回りの技術的なトピックなど、データを計測するところの技術を紹介">計測実装</a> (21) <ul class="children"><li class="cat-item cat-item-16"><a href="https://www.marketechlabo.com/category/implementation/google-analytics-tips/" title="GoogleアナリティクスやGoogleタグマネージャー関連">Google</a> (11) </li> </ul></li> </ul></aside><aside id="custom_html-5" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-7452159768889731" data-ad-slot="1881032194"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></aside><aside id="recent-posts-2" class="widget widget_recent_entries"><h2 class="widget-title">最近の投稿</h2> <ul><li> <a href="https://www.marketechlabo.com/chrome-privacy-release-2020/">サルでもわかるGoogle Chromeのプライバシー対策で何が起こるのか</a> </li> <li> <a href="https://www.marketechlabo.com/google-cloud-functions/">Google Cloud Functions / Cloud Functions for Firebaseの微妙な使い勝手</a> </li> <li> <a href="https://www.marketechlabo.com/firebase-web/">WordPressのウェブサイトを静的化し、Firebaseで配信する</a> </li> <li> <a href="https://www.marketechlabo.com/bitnami-multi-packages/">Bitnamiで1インスタンスに複数のパッケージをインストールする</a> </li> <li> <a href="https://www.marketechlabo.com/bash-batch-best-practice/">bashスクリプトのエラー処理のベストプラクティス</a> </li> </ul></aside><aside id="custom_html-3" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><a class="twitter-timeline" data-height="600" data-tweet-limit="5" target="_blank" rel="nofollow" href="https://twitter.com/mrtec_y?ref_src=twsrc%5Etfw">Tweets by mrtec_y</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><a target="_blank" rel="nofollow" href="https://twitter.com/mrtec_y" class="twitter-follow-button" data-size="large" data-show-screen-name="false" data-dnt="true" data-show-count="false">Follow @mrtec_y</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div></aside></div> </div> </div> <footer id="colophon" class="site-footer"><div class="site-bottom"> <div class="site-bottom-content"> </div> </div> </footer></div> <div class="back-to-top"></div> <script type="text/javascript"><!-- var seriesdropdown = document.getElementById("orgseries_dropdown"); if (seriesdropdown) { function onSeriesChange() { if ( seriesdropdown.options[seriesdropdown.selectedIndex].value != ( 0 || -1 ) ) { location.href = "https://www.marketechlabo.com/series/"+seriesdropdown.options[seriesdropdown.selectedIndex].value; } } seriesdropdown.onchange = onSeriesChange; } --></script><div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="right:0px;top:100px;background-color:transparent;"><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fmarketechlabo.18.176.112.138.nip.io%2Ftrack-form-transition-in-same-url%2F&linkname=Google%E3%82%A2%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9%E3%81%A7%E5%90%8C%E4%B8%80URL%E3%81%A7%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E9%81%B7%E7%A7%BB%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%93%E3%83%A5%E3%83%BC%E8%A8%88%E6%B8%AC%20%7C%20marketechlabo" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_twitter" href="https://www.addtoany.com/add_to/twitter?linkurl=https%3A%2F%2Fmarketechlabo.18.176.112.138.nip.io%2Ftrack-form-transition-in-same-url%2F&linkname=Google%E3%82%A2%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9%E3%81%A7%E5%90%8C%E4%B8%80URL%E3%81%A7%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E9%81%B7%E7%A7%BB%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%93%E3%83%A5%E3%83%BC%E8%A8%88%E6%B8%AC%20%7C%20marketechlabo" title="Twitter" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_line" href="https://www.addtoany.com/add_to/line?linkurl=https%3A%2F%2Fmarketechlabo.18.176.112.138.nip.io%2Ftrack-form-transition-in-same-url%2F&linkname=Google%E3%82%A2%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9%E3%81%A7%E5%90%8C%E4%B8%80URL%E3%81%A7%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E9%81%B7%E7%A7%BB%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%93%E3%83%A5%E3%83%BC%E8%A8%88%E6%B8%AC%20%7C%20marketechlabo" title="Line" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_hatena" href="https://www.addtoany.com/add_to/hatena?linkurl=https%3A%2F%2Fmarketechlabo.18.176.112.138.nip.io%2Ftrack-form-transition-in-same-url%2F&linkname=Google%E3%82%A2%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9%E3%81%A7%E5%90%8C%E4%B8%80URL%E3%81%A7%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E9%81%B7%E7%A7%BB%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%93%E3%83%A5%E3%83%BC%E8%A8%88%E6%B8%AC%20%7C%20marketechlabo" title="Hatena" rel="nofollow noopener" target="_blank"></a><a class="a2a_dd addtoany_share_save addtoany_share" target="_blank" rel="nofollow" href="https://www.addtoany.com/share"></a></div><script type="text/javascript" src="https://www.marketechlabo.com/themes/businesspress/js/jquery.fitvids.js"></script><script type="text/javascript" src="https://www.marketechlabo.com/themes/businesspress/js/functions.js"></script><script type="text/javascript"> /* <![CDATA[ */ var businesspressScreenReaderText = {"expand":"\u5b50\u30e1\u30cb\u30e5\u30fc\u3092\u958b\u304f","collapse":"\u5b50\u30e1\u30cb\u30e5\u30fc\u3092\u9589\u3058\u308b"}; /* ]]> */ </script><script type="text/javascript" src="https://www.marketechlabo.com/themes/businesspress/js/navigation.js"></script><script type="text/javascript" src="https://www.marketechlabo.com/themes/businesspress/js/skip-link-focus-fix.js"></script><script type="text/javascript" src="https://www.marketechlabo.com/plugins/easy-fancybox/js/jquery.fancybox.min.js"></script><script type="text/javascript"> var fb_timeout, fb_opts={'overlayShow':true,'hideOnOverlayClick':true,'showCloseButton':true,'margin':20,'centerOnScroll':false,'enableEscapeButton':true,'autoScale':true }; if(typeof easy_fancybox_handler==='undefined'){ var easy_fancybox_handler=function(){ jQuery('.nofancybox,a.wp-block-file__button,a.pin-it-button,a[href*="pinterest.com/pin/create"],a[href*="facebook.com/share"],a[href*="twitter.com/share"]').addClass('nolightbox'); /* IMG */ var fb_IMG_select='a[href*=".jpg"]:not(.nolightbox,li.nolightbox>a),area[href*=".jpg"]:not(.nolightbox),a[href*=".jpeg"]:not(.nolightbox,li.nolightbox>a),area[href*=".jpeg"]:not(.nolightbox),a[href*=".png"]:not(.nolightbox,li.nolightbox>a),area[href*=".png"]:not(.nolightbox),a[href*=".webp"]:not(.nolightbox,li.nolightbox>a),area[href*=".webp"]:not(.nolightbox)'; jQuery(fb_IMG_select).addClass('fancybox image'); var fb_IMG_sections=jQuery('.gallery,.wp-block-gallery,.tiled-gallery,.wp-block-jetpack-tiled-gallery'); fb_IMG_sections.each(function(){jQuery(this).find(fb_IMG_select).attr('rel','gallery-'+fb_IMG_sections.index(this));}); jQuery('a.fancybox,area.fancybox,li.fancybox a').each(function(){jQuery(this).fancybox(jQuery.extend({},fb_opts,{'transitionIn':'elastic','easingIn':'easeOutBack','transitionOut':'elastic','easingOut':'easeInBack','opacity':false,'hideOnContentClick':false,'titleShow':true,'titlePosition':'over','titleFromAlt':true,'showNavArrows':true,'enableKeyboardNav':true,'cyclic':false}))});}; jQuery('a.fancybox-close').on('click',function(e){e.preventDefault();jQuery.fancybox.close()}); }; var easy_fancybox_auto=function(){setTimeout(function(){jQuery('#fancybox-auto').trigger('click')},1000);}; jQuery(easy_fancybox_handler);jQuery(document).on('post-load',easy_fancybox_handler); jQuery(easy_fancybox_auto); </script><script type="text/javascript" src="https://www.marketechlabo.com/plugins/easy-fancybox/js/jquery.easing.min.js"></script><script type="text/javascript" src="https://www.marketechlabo.com/plugins/easy-fancybox/js/jquery.mousewheel.min.js"></script><script type="text/javascript" src="https://www.marketechlabo.com/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js"></script><script type="text/javascript" src="https://www.marketechlabo.com/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js"></script><script type="text/javascript" src="https://www.marketechlabo.com/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js"></script><script type="text/javascript" src="https://www.marketechlabo.com/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js"></script><script type="text/javascript"> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */ </script><script type="text/javascript" src="https://www.marketechlabo.com/plugins/easy-table-of-contents/assets/js/front.min.js"></script></body></html>