Contact Form7・Googleアナリティクスでコンバージョン設定

WordPressの問い合わせフォームでは必ずと言っていいほどお世話になっているContact Form7。
GoogleアナリティクスでContact Form7のコンバージョンを計測するための設定を備忘録として残します。

Contact Form7の設定

ContactForm7の管理画面、「その他の設定」に以下の内容を設定します。ContactForm7で、on_sent_okというjavascriptのアクションフックが用意されています。

基本の形は

ラベル、値は省略可。
下記は、資料送付申し込みフォームの場合の設定。

contactform7%e3%82%b3%e3%83%b3%e3%83%8f%e3%82%99%e3%83%bc%e3%82%b7%e3%82%99%e3%83%a7%e3%83%b3%e3%82%bf%e3%82%af%e3%82%99%e8%a8%ad%e5%ae%9a

公式サイト:フォーム送信を Google Analytics でトラッキングする
http://contactform7.com/ja/tracking-form-submissions-with-google-analytics/

Goolgeアナリティクスの設定

Googleアナリティクスで目標の設定をします。
目標を設定するには、「管理」>「ビュー」の中にある「目標」です。
「新しい目標」をクリックし、新規登録します。

1〜3まで目標設定のステップがあります。

1.目標設定

「カスタム」を選択して続行を押します。

%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b9

2.目標の説明

名前は、Googleアナリティクス上で表示される目標の名前、任意の名前を入力。
タイプは「イベント」を選択。

%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b9%e3%82%a4%e3%83%98%e3%82%99%e3%83%b3%e3%83%88%e8%a8%ad%e5%ae%9a

3.目標の詳細

イベント条件を設定します。内容は、先にContactFomr7で設定した通りに、入力します。

カテゴリ:先頭が一致 Contact Form
アクション:等しい submit
ラベル:等しい 送付申し込み完了
値:完全一致 1

※値の部分は「完全一致」にしましたが、ちょっと怪しい。未確認事項です。

%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b9%e3%82%a4%e3%83%98%e3%82%99%e3%83%b3%e3%83%88%e6%9d%a1%e4%bb%b6

これで、設定完了。
計測されるかどうか1〜2日後にGoogleアナリティクスで確認を。

Advanced Custom Fields で画像出力する

WordPressのプラグイン「Advanced Custom Fields」で画像を出力させるときのメモ

Advanced Custom Fieldsの設定側で、画像の「返り値」を何にしたかで、出力方法が異なる

返り値の種類は、画像オブジェクト、画像URL、画像IDの3つ。

画像オブジェクト

画像に関する情報を色々取得できます。

公式サイトの詳細ページ
https://www.advancedcustomfields.com/resources/image/

画像オブジェクトで出力するサンプル

画像URL

画像のURLをそのまま返します。
画像をそのまま出力したいときには一番簡単ですね。

画像ID

文字通り画像のIDを出力します。
IDを使ってサイズなどを指定することもできます。

公式サイトから

ワイド、ハイトを指定する

カテゴリーの画像を設定して出力する

Advanced Custom Fieldsでカテゴリ用のフィールドをしてする場合は、位置のルールを「Taxsonomy Term」に設定しカテゴリを選ぶ。

 

Contact Form 7でajaxzip3を使う為のメモ(コピペ用)

WordPressで問い合わせフォームを作るときは
Contact Form 7
http://contactform7.com/ja/docs/
です。だいたい

Contact Form 7で郵便番号から住所を自動入力するために使うのは

ajaxzip3
https://github.com/ajaxzip3/ajaxzip3.github.io
です。だいたい
同じような機能のプラグインもあります。
zipaddr-jp
https://wordpress.org/plugins/zipaddr-jp/

どちらでもよいと思いますが、個人的な好みでajaxzip3を使っています。簡単に設定できるようにコピペ用としてメモします。

Contact Form 7で住所自動入力できるajaxzip3を使う方法

郵便番号(ワンボックス)+住所の場合(&bootstrap3)

郵便番号の入力が1つのテキストボックスで住所の入力も1つのテキストボックスの場合(Bootstrap3を使ってくくります)

設置イメージcontact-form-7%e3%81%a8ajaxzip3%e3%82%b5%e3%83%b3%e3%83%95%e3%82%9a%e3%83%ab

Contact Form 7での設定

WordPressでの設定(スクリプトの読み込み)

functions.phpにajaxzip3のスクリプトの読み込みを追加する設定

まずajaxzip3を実行する関数用のファイルを作成(useajaxzip3,js)という名前にしました。

ファイルの中身は

wordpressのテーマディレクトリにあるjavascript用のディレクトリに保存。

functions.phpを以下のように編集

 

郵便番号(ワンボックス)+都道府県+住所の場合(&Foundation6)

郵便番号テキストボックスと都道府県+住所の組み合わせの場合
こちらはFoundation を使ってマークアップした場合
http://foundation.zurb.com/

設置イメージ
contact-form-7%e3%81%a8ajaxzip3%e3%82%b5%e3%83%b3%e3%83%95%e3%82%9a%e3%83%ab2

Contact Form 7の設定

WordPress側の設定

これは前述と同様ですが、useajaxzip3.jsの中身は以下のようにします。

 

httpアクセスをhttpsにリダイレクトする .htaccess

SSLを導入したらサイト全体をSSLにしちゃった方が何かと楽ですよね。
GoogleでもSSLサイトは評価の対象です。

HTTPS をランキング シグナルに使用します
https://webmaster-ja.googleblog.com/2014/08/https-as-ranking-signal.html

でもすでにインデックスされているページからのアクセスや名刺にURLが書いてあったりするとhttp://~からアクセスされます。

http://~でアクセスされたのを強制的にhttps://にリダイレクトするには。
.htaccessの設定で簡単にできます。

特定のページだけをSSLにしたい場合
hoge.html,hoge2.htmlだけをSSLリダイレクトしたい場合の例

逆に特定のページだけを非SSLにしたい場合

こちらのページを参考にさせていただきました。
.htaccessだけでSSL対応するには
http://www.meibinlab.jp/nishijima/archives/54

Advanced Custome Fields の項目上限数

WordPressのカスタムフィールドを柔軟に追加できる高機能なプラグイン「Advanced Custom fields」
https://www.advancedcustomfields.com/

せっかく登録したのに、なぜか消えている・・・というショックな出来事が何回か続いたため調べてみました。

どうやら、php.iniの max_input_vars の設定によるもののようです。
Dos攻撃を防ぐ目的で、PHP5.3.9から導入されたもので、設定数以上の変数が送られてくるとその部分は削除されるようになっています。

そのため、Advanced Custom Fieldsである程度の数を設定すると消えてしまうということです。
Advanced Custom Fields自体に上限があるわけではなく、PHPの仕様によるのですね。

今回、XSERVERを利用していたのですが、64項目あたりでそれ以降が消えていました。

解決方法は、

  • max_input_varsの設定を変更する
  • フィールドグループを分割する

の2つの方法です。

max_input_varsはphp.iniが編集できるサーバーであれば設定変更は可能ですが、サーバーへの負荷にも関わることなので、後者のフィールドグループを分割するのがよいと思います。

MAMP タイムゾーンを変更(メモ)

MAMPのタイムゾーンはデフォルトだと、Europe/Berlinとなっているので、日本に変更します。

php.iniを編集します。

場所は、

使用しているPHPのバージョンにより場所が違います。

552行目あたりの

に変更

MAMPを再起動して完了です

CPIサーバーで301リダイレクトを設定する

CPIの共有レンタルサーバー「ACE01 2011」(ACE01 2015というプランもあります)での301リダイレクトしたい場合、.htaccessには以下のように記述します。

old.htmlからnew.htmlにリダイレクトしたい場合

または

 

ちなみにACE01 2015の場合は

※1行目のOptionsをしていしてないとエラーになります。
初期状態ではmod_rewriteは使えないようです。

詳細は
.htaccess の設定方法

 

リダイレクト設定がちゃんと動いているかどうか確認するには以下のツールが便利です。

リダイレクトチェック
http://ohotuku.jp/redirect_checker/

 

今更学んだ「テキスト変換する前の文字が見えない」原因

お恥ずかしいでところですが、初めてその状況になって初めて学んだこと。

フォームで、テキストを打っている時、違和感が。。。
よくよくみると、変換する前の文字がなぜか消えてる!?

原因は、CSSの設定でした。

「::selection」というセレクタで文字の色をホワイトにしていたから。

「::selection」というセレクタは変換前の文字だけでなく、テキスト選択した箇所のハイライトカラーも変更できるみたいです。

こんな感じでベンダープリフィックスを指定します。

対応するブラウザは

  • Google Chrome
  • Safari
  • Firefox
  • Opera
  • IE9+

設定する時は背景の色と同じ色を指定しないように気をつけましょ

PDFを開くとき100%で開くようにする Adobe Acrobat

PDFを作成し、開いてみるとバカでかく開かれちゃうことありますね。

Acrobatで開き方を指定することができます。

Adobe Acrobat Pro DCの場合です。

編集するファイルを開き、ファイル>プロパティを選択。

Acrobatファイルプロパティ

開き方を選択。
レイアウトと倍率のところに、「倍率」があるのでこれを100%にする。

Acrobat文書のプロパティレイアウト

これ以外にも、ウィンドウの開き方やメニューバー、ツールバーの非表示など細かい設定ができます。