スキップしてメイン コンテンツに移動

投稿

9月, 2013の投稿を表示しています

ajaxを使用し１ページで完結するお問い合わせフォームのコンバージョンの取り方（案）

[何についてのお話？] ajaxを使用し、１ページで完結するお問い合わせフォームを設置している場合に、Google Analytics等のコンバージョンをどのように取得するようにするかというお話です。 ajaxで実装する場合、javascript（jQuery）はだいたい以下のようになるかと思います。 [フォーム送信ボタン押下時に動かすスクリプトの例] jQuery(document).ready(function ($) {     $('フォーム').submit(function () {         // 値のバリデート（省略）               if (バリデートNG) {             return false;         } else {             var str = $(this).serialize();                       $.ajax({                 type: "POST",                 url: "mailpost.php", // メールを送信するPHP                 data: str,                 success: function (msg) {                     ①                 },                 error: function(msg) {                 }             });                   }         return false;     }); }); Google Analyticsのページトラッキング程度であれば、ajaxのsuccess（①の部分）に _gaq.push(['_trackPageview','thanks.html']); を記述すれば済みますが（gaqの初期化はheadで実施済みとします。）、 ・Google AdWordsの検索やリマーケティング ・Yahoo!YD
コメントを投稿
続きを読む

BootstrapとGoogle Map Apiの干渉

【事象】 Bootstrap（v2.3）を使用したページに、jQuery gMap v3（http://www.smashinglabs.pl/gmap）を使用してGoogle Mapを表示したところ、コントロール画像が表示されない。 どうやら、imgタグに対するCSSがBootstrapとGoogle Mapで干渉している模様。 [BootstrapのCSS] img {     …     max-width: 100%;   <=これをコメントアウトすると表示されます。     … } 【対策】 Google Map用にCSSをオーバーライド #map .gm-style img {     max-width: inherit;  <=これを追加 } するとコントロール画像が表示されます。 【補足】 ちなみに、google map表示の設置方法 1.HTMLに空div用意 <div id="map"></div> 2.HTMLに必要なjsをロード <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="js/jquery.gmap.js"></script> （ソースは こちら ） 3.jsを記述 jQuery('#map').gMap({ address: '東京都◯◯◯□□□△△△', panControl: true, zoomControl: true, zoomControlOptions: {  style: google.maps.ZoomControlStyle.SMALL }, mapTypeControl: true, navigationControl: true, scaleContr
コメントを投稿
続きを読む

MovableTypeでクエリーからGET値をPHPで取得して、そのパラメータで記事を動的に出力する方法

【実現したいこと】 MovableTypeで、クエリー（http://◯◯◯.com/?aaa=bbbの?以下）からパラメータをPHPで取得して、MovableTypeの変数に引き渡して、取得したパラメータで特定カテゴリの記事を動的に出力する。 【呼び出し元】（ウェブページ、インデックステンプレートなどから） <a href="<$mt:BlogURL$>list/?category=hogehoge">カテゴリー「ほげほげ」の記事を動的に出力</a> ↓ 【呼び出し先】（インデックステンプレートなどで） <mt:Ignore><!--自分のカテゴリ（ディレクトリ名）取得--></mt:Ignore> <mt:SetVarBlock name="mycategory" strip_linefeeds="1" trim="1"><?php $mycategory = $_GET['category']; echo $mycategory; ?></mt:SetVarBlock> <mt:Ignore><!--自分のカテゴリー（ラベル名）取得--></mt:Ignore> <mt:SetVarBlock name="mycategorylabel" strip_linefeeds="1" trim="1"><?php if ($mycategory == "hogehoge") {     $my_category_label = "ほげほげ"; } else if ($mycategory == "fugafuga") {     $my_category_label = "ふがふが"; } else if () {     ... } echo $my_category_label; ?>&l
コメントを投稿
続きを読む

自分がiframe内のコンテンツか、単独ウィンドウのコンテンツか判定する方法

入力フォームを、PCのときはfancyboxで表示し、スマホのときは単独ウィンドウで表示する要件があり、完了画面の閉じるボタンの処理をそれぞれで変更したい場合の方法 （前者はfancyboxを閉じる、後者は単独ウィンドウを閉じる） $(document).ready(function () {   $('閉じるボタン').click(function(){         if(window != parent){             parent.jQuery.fancybox.close();  // fancyboxを閉じる         } else if (window == parent){   window.close();  // 単独ウィンドウを閉じる return false;   }   }); });
コメントを投稿
続きを読む

iframe読み込み時の一瞬のスクロールバーを消す方法

iframeで overflow:hidden とやっていても、IEなどでは一瞬スクロールバーが表示されてしまいます。 読み込み時もスクロールバーを消したい場合は、読み込まれるhtmlに<html style="overflow:hidden;">（インラインに記述ではなくてcssでもOKだと思います。）とすると読み込み中の一瞬のスクロールバーが表示されません。
コメントを投稿
続きを読む