Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

GoogleWebsiteOptimizerの使い方:非同期タグバージョン

1,681 views

Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

GoogleWebsiteOptimizerの使い方:非同期タグバージョン

  1. 1. always be testing!!Google Website Optimizerの使い方 ~非同期タグVer~
  2. 2. Google Website Optimizer上でテストを作成する Googleウェブサイトオプティマイザートップページ
  3. 3. Google Website Optimizer上でテストを作成する参考資料:自分に適したテストのタイプ - アドワーズ 広告 ヘルプ 自分に したテスト 自分 テストのhttps://adwords.google.com/support/aw/bin/answer.py?answer=71975&cbid=-15s5o4yqbtctt&src=cb&lev=answer
  4. 4. Google Website Optimizer上でテストを作成する
  5. 5. Google Website Optimizer上でテストを作成する 命名規則の例:【[ドメイン]】[YYMMDD]_施策名※たくさんのページを一度にテストしたい場合でも1つのURLを入れれば問題ありません
  6. 6. Google Website Optimizer上でテストを作成するまだ公開していないページに対してテストを設定しようとした場合以下のようなアラートが出るが、チェックボックスにチェックを入れれば「続行」して通すことができるので問題ない。
  7. 7. Google Website Optimizer上でテストを作成する
  8. 8. Google Website Optimizer上でタグを発行する 左の3つのタグをテンプレートに埋める
  9. 9. クリックをゴールとみなす場合 ~タグ埋め込み例と注意点~発行されたタグをテンプレートに埋め込んで テストを開始する
  10. 10. テンプレートに埋め込むタグ1制御スクリプトと制御スクリプトとトラッキングスクリプト スクリプトテストページのソースコードの開始 <head>タグの直後に次のスクリプトを貼り付けます。<!-- Google Website Optimizer Control Script --><script>function utmx_section(){}function utmx(){}(function(){var k=YYYYYYYYYY,d=document,l=d.location,c=d.cookie;function f(n){if(c){var i=c.indexOf(n+=);if(i>-1){var j=c.indexOf(;,i);return escape(c.substring(i+n.length+1,j<0?c.length:j))}}}var x=f(__utmx),xx=f(__utmxx),h=l.hash;d.write(<sc+ript src="+http+(l.protocol==https:?s://ssl:://www)+.google-analytics.com+/siteopt.js?v=1&utmxkey=+k+&utmx=+(x?x:)+&utmxx=+(xx?xx:)+&utmxtime=+new Date().valueOf()+(h?&utmxhash=+escape(h.substr(1)):)+" type="text/javascript" charset="utf-8"></sc+ript>)})();</script><!-- End of Google Website Optimizer Control Script --> Xの部分はアカウントによって変更されます。<!-- Google Website Optimizer Tracking Script --><script type="text/javascript"> Yの部分はテストによって変更されます。 var _gaq = _gaq || []; _gaq.push([gwo._setAccount, UA-XXXXXXXX-XX]); _gaq.push([gwo._trackPageview, /YYYYYYYYYY/test]); (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><!-- End of Google Website Optimizer Tracking Script -->
  11. 11. テンプレートに埋め込むタグ2 コンバージョンスクリプト コンバージョンページのソースコードの開始 <head>タグの直後に次のスクリプトを貼り付けます。 <!-- Google Website Optimizer Conversion Script --> <script type="text/javascript"> Xの部分はアカウントによって変更されます。 var _gaq = _gaq || []; _gaq.push([gwo._setAccount, UA-XXXXXXXX-X]); Yの部分はテストによって変更されます。 function doGoal(that) { try { _gaq.push([gwo._trackPageview, /YYYYYYYYYY/goal]); setTimeout(document.location = " + that.href + ", 100) } catch(err){} } (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> <!-- End of Google Website Optimizer Conversion Script -->クリックをゴールとするためにコンバージョンスクリプトを改修します。→太字の部分を追加する
  12. 12. テストを実施する部分とタグ3 <script>から</noscript>でくくった部分を Googleウェブサイトオプティマイザーが認識をし、 管理画面上でhtmlをいじれるようになります。 <script>utmx_section(“result")</script> <div id=“result” > </noscript> 例result 注意点1 <script>から</noscript>でくくった部分の中に <noscript>タグが入っていると動きません。 はずすか、それを避けて指定してください。 注意点2 動的なテンプレートの場合、Smartyのタグなどを <script>から</noscript>でくくった部分の中に 入れないようにお願いします。
  13. 13. ゴール設定とタグ<a href=“htttp://point.ecnavi.jp/fund/bc/” onclick="doGoal(this);return false;"> onclickをつかって、クリックをゴールと設定します。 functionを使う形にしていますが、つまりは上記 doGoal()の中身 がonclickで呼ばれれば問題ありません。 参考資料 https://adwords.google.co.jp/support/aw/bin/answer.py?hl=jp&answer=93181
  14. 14. Google Website Optimizer上にタグを認識させる エラーが出たときページの検証
  15. 15. Google Website Optimizer上にタグを認識させるGoogleウェブサイトオプティマイザーのタグを埋めたhtmlソースをコピーし、ローカルでhtmlファイルを作成。そのファイルを認識させる。
  16. 16. Google Website Optimizer上にタグを認識させるうまくいったら、全てにチェックがついて「続行」できるようになる
  17. 17. Google Website Optimizer上にタグを認識させる
  18. 18. Google Website Optimizer上でテストする内容のhtmlを書く新しいパターンを追加する
  19. 19. Google Website Optimizer上でテストする内容のhtmlを書く新しいパターン名を追加する
  20. 20. Google Website Optimizer上でテストする内容のhtmlを書くテストする新しいパターンにおいて、htmlを書き入れて、保存する
  21. 21. Google Website Optimizer上でテストする内容のhtmlを書くタグを埋めたテンプレートが公開されていない限りプレビューを見ることはできません
  22. 22. Google Website Optimizer上でテストする内容のhtmlを書く※もしテンプレートが公開されていれば、 パターンを数パターン作成している場合にはプルダウンで全てのパターンを確認できます
  23. 23. Google Website Optimizer上でテスト実行 必要であればテスト内容を書き込むテストが走り始めます
  24. 24. Google Website Optimizer上でテスト実行しばらく時間がたったら、ちゃんとCVが取れているか確認しましょう

×