二酸化炭素濃度メータの設置

サクセスプラス宮前平二丁目教室は、2020年末から感染が再拡大したコロナウィルス感染予防対策の追加施策として、教室内に二酸化炭素濃度メータを設置いたしました。

機能

室内の二酸化炭素濃度と湿度を同時に測定し、教室内の喚起の目安とします。

狙い

コロナウィルスは、冬期の乾燥環境下では飛沫による感染力が高まるため、二酸化炭素濃度を目安として部屋の喚起を行います。

二酸化炭素濃度が500ppm未満では問題がありませんが、800ppm以上になると部屋の喚起が必要です。

そこで当教室では、室内に二酸化炭素と湿度を同時にはかれるシステムを導入しました。

このシステムで常時二酸化炭素濃度、湿度を計測し、部屋の換気を行います。

実施時期

2021年1月より

限定5セット実費にてご提供

当教室と同じように、児童向けの学習教室を運営されていらっしゃる方にのみ、本キットを実費にてご提供いたします。

お問い合わせからお願いします。

当社のコロナ対策について

当社ではコロナウィルス感染症対策として”コロナにかからない、コロナに移さない”をスローガンにして、スクールでの予防防止対策及び生徒様のご家庭の皆様にご協力をお願いしております。ご家庭、スクールが一体となり大切なご家族をコロナから守りましょう。

スクールでの対策

登下校時のアルコールでの手の洗浄

教室入り口にアルコール消毒用ディスペンサを配置しております。登下校時にかならず両手をアルコールで洗浄いただけますようお願い申し上げます。

マスク着用

教室に入られる方すべてにマスク着用をお願いいたします。マスクを着用されない方の御入室はお断りいたします。未就学児童様につきましては体調への影響も考慮し、ご相談ください。

ソーシャルディスタンスの確保

生徒様の間隔を広くとり、お互いに向かい合うことのないよう、座席レイアウトを変更いたしました。当面は最大生徒数6名にて運用いたします。

喚起の実施

つねに教室内では喚起を行っております。また、プラズマクラスター搭載の空気清浄機を動作いたします。

ご家庭でのお願い

体調の確認(お願い)

登校前に、生徒様の体調の確認と体温測定をお願いいたしま

す。体調不良の場合は、ご連絡ください。かならず振替日をご設定いたします。

帰宅時のうがい手洗い(お願い)

生徒様が帰宅されましたら、うがい手洗いを行っていただくようお願いいたします。

部品の洗浄(おすすめ)

授業で使ったロボット部品は、モータ、電池、スイッチ以外の部品を洗浄されることをおすすめいたします。部品をネットに入れ、洗濯機で洗浄することが有効です。

WORDPRESS 投稿画面が表示されない

はじめに

みなさんこんにちはALEXです。ブログを開設するためにWORDPRESSをインストールすれば、すぐブログを作成できるのがWORDPRESSのよいところです。当社もコーポレートサイト、ブログサイトはすべてWORDPREESを使っています。

 

投稿記事が表示されない!?

先週新しく趣味のプログラミング言語のブログをたちあげました。

MacでCOBOL

レトロなプログラミング言語COBOL、私が駆け出しのプログラマだったころ、三番目に覚えた言語でした。最近、統計問題でCOBOLが取り上げられており、レトロであっても欠かすことのない言語です。

昔の書籍を引っ張り出し、Mac上で使いこなすためのテクニックも踏まえて、基本的な部分から上級者向けのテクニックまでご紹介する予定です。

プログラミングの世界で欠かすことができないのが「シンタックスハイライト」

mystr = "Sample"
print mystr[3:]

こんな感じでコードをわかりやすく表示してくれるもので、プログラミングを扱うブログには欠かせないです。

それが、予想しない不具合を引き起こしました。

先ほどのCOBOLブログに原稿をいくつか書き込んで、公開しました。

そして、シンタックスハイライトにはCrayon Syntax Highlighterをインストール。

公開前にプレビューをチェックすると画面がおかしいんです。下の通り。

ん?表題だけしか表示されません。おかしいな。

もしかして文章を保存しなかった?確認するとしっかり保存されています。

いくつもつかっていてこんな不具合はありませんでした。

色々調べてみましたが、原因がはっきりわかりません。

ちなみにサイトの環境は

PHP:ver7.0

WORDPRESS : ver5.4.1

テーマ:LODESTAR

ちなみにテーマをWORDPRESSのデフォルトTwenty Twentyに変えてみましたがかわりません。

 

原因は Crayon Syntax Highlighter

試行錯誤の結果、原因がわかりました。シンタックスハイライトのためにいれたプラグイン「Crayon Syntax Highlighter」でした。これを無効にすると、記事が正しく表示されました。

シンタックスハイライトはPrism.js

といっても、シンタックスハイライトは欠かすことができないので、ほかのツールにしました。選んだのがPrism.jsです。これはプラグインでなく、jsとcssファイルを取り込むものです。こちらは問題なく動きました。ようやく公開できました。

 

謎は深まる一方

問題が解決したのはいいのですが、自分が運営しているブログサイトではこんな不具合はおこっていないのです。PHPのバージョンの相性の問題だとかいろいろな情報がありますが、謎は残ったままです。

どなたかこ存知でしたらお問合せ経由でお教えください。

管理画面の「投稿一覧」「固定ページ一覧」の表示数を変更する

皆さんこんにちは。ALEXです。

WordPressでコンテンツを作成していて、記事数が増えたときに、管理画面で表示されるページ数が少なくて、修正するときに余計な手間が発生していませんか?通常WordPressの管理画面「投稿一覧」「固定ページ一覧」で表示される記事数がどちらも1ページあたり20件です。になっています。

もっと多くの記事をいちいちページジャンプしないで管理したい!と思いますよね。

残念なことに、この設定機能は標準では搭載されていません。

そこで、[functions.php]にコードを書き加えて問題を解決します。

「投稿一覧」「固定ページ一覧」の最大表示数変更方法

使用中のテーマの[functions.php]の適当な箇所に、以下のコードを記述します。

function my_edit_posts_per_page ($posts_per_page) {
	return 100;
}
add_filter('edit_posts_per_page', 'my_edit_posts_per_page');

これで最大表示件数が100件に増えます。

この設定で「投稿」「固定ページ」のほか、「カスタム投稿タイプ」にも適用されます。

 

件数をあまり増やすとエラー発生しますので、最大でも300件程度にしましょう。

オブジェクト指向・データサイエンスe-learningテキスト無料進呈

現在、日本国内でコロナウィルス感染拡大の影響を受けて、テレワーク対応をされている方も多いかと思います。

そういった方の支援の一環として、当社では以下の2講座のテキストを無償進呈しております。

ぜひ御活用ください。

 

詳しく見る

リスティング広告をはじめるための基礎知識

はじめに

Yahoo!プロモーション広告、Google広告といったリスティング広告を使ってで集客する、そのために必要な作業内容と知識をお伝えしています。

リスティング広告っていったいどうやればいいんだ!そうなんでです。はじめはわからないことばかりで戸惑います。

でも、ひとつずつ正しい知識を積み重ねていけば、だれもがしっかりリスティング広告を運用できるようになります。

この連載記事は、インハウスでリスティングプレイヤーを育成し、広告運用を目指す方々にお伝えしています。

リスティング広告とは

検索連動型広告とも呼ばれるインターネット広告の1つで、PPC広告とも呼ばれています。

PPCとは”Pay Per Click”を略したもので、これを和訳すると”クリック課金型広告”ということになります。

インターネット上でブラウザ上に表示される文章や画像を使った広告に、広告主のサイトへのリンクを設定して、クリックするされるたびに広告主に課金されるシステムになっています。コンバージョンされると課金するほうが広告主としてはありがたいですが、現在はクリック課金ですのでご注意ください。

代表的なリスティング広告サービス

代表的なリスティング広告サービスといえば、Google広告とYahoo!プロモーション広告とGoogle広告(前:GoogleAdWords)とがあります。

日本ではこの2つを押さえておけばまず間違いありません。

プロバイダが違うので運用方法が違いますので、それぞれを理解して上手にうまく活用する必要があります!

Google広告

Google広告には、検索連動広告とディスプレイ広告という二つの広告方法がメインです。

 

検索連動型広告

Googleでキーワード検索を行うと、検索結果画面の上部、下部の広告枠にいくつか広告が表示されます。たとえば、「Google 広告」と検索すると、こんな広告が掲載されます。

これが検索連動型広告というものです。Google|広告|google.com をクリックすると、下のURLにジャンプします。このクリックで広告主は広告代金を支払う仕組みになっています。
予断ですが、「Google」というキーワードは最低入札価格がとても高く設定されています。

Google広告に出稿すればGoogleの検索結果だけでなく、Googleと提携しているWebサイトやブログなどへの広告掲載が可能です。

 

ディスプレイ広告

Google広告の「GDN(Googleディスプレイネットワーク)」のことで、こちらはWebサイトのコンテンツ内に広告表示されます。
リスティング広告との大きな違いは広告フォーマットが違うことです。リスティング広告はフォーマットがテキストだけなのですが、ディスプレイ広告は
テキスト」「イメージ」「インタラクティブ」「動画」「アニメーション」などさまざまなフォーマットが利用できます。

Yahoo!プロモーション広告

検索連動型広告

Yahoo!でキーワード検索を行うと、検索結果画面の上部、下部の広告枠にいくつか広告が表示されます。たとえば、「Google 広告」と検索すると、こんな広告が掲載されます。

日本国内では根強い人気を誇るのがYahoo検索です。ですので、Yahoo!プロモーション広告も一定の効果があります。

こちらもYahooの検索結果と提携しているウェブサイトやブログなどに広告が掲載されます。

ディスプレイ広告

こちらは「YDN(Yahoo!ディスプレイネットワーク)」のことで、基本的にはGDNと似たり寄ったりです。Webサイトのコンテンツ内に広告表示されます。

上記の通り、日本国内ではYahoo!プロモーション広告、Google広告の二つを押さえればよいです。
また方式はそれぞれとも検索連動広告、ディスプレイ広告があるので2×2=4つの方法を押さえればよい、ということになります。

アカウント構築

さあ、いよいよ広告に必要なアカウント構築を始めましょう。

広告のアカウント構造は、複数の階層構造で構成されています。これらの構造を適切に構成し、最終的に広告を出稿することではじめてクリックを得ることができます。

リスティング広告を始めたばかりの人にとっては、どうすれば費用対効果が高く、運用管理がしやすいくなるかはなかなかわかりにくい部分があります。
経験をつめばそれなりにはスキルはつくかも知れませんがまずは、正しい基礎知識を身につけてください。

ここではリスティング広告初心者の方向けに、アカウント構成の概要やキャンペーンなどを詳しくご紹介していきます。

アカウント構成とは

リスティング広告のアカウント構成は、下図のような四階層構成になっています。

アカウントの中に複数のキャンペーンを構築し、

キャンペーンの中に広告グループを構築します。

そして、その広告グループの中でキーワード、広告設定します。

このような4階層構成がアカウントの基本です。

よくセミナーや講習で。「まずはこの四階層を覚えましょう」といわれ、
経文のように「アカウント、広告グループ、広告、キーワード」といわされたことがありますが、
なんの意味もないです。それより、しっかりそれぞれの役割と関係性を理解するほうが大切です。
次に、おのおのの機能と役割を説明します。

それぞれの役割

4つの項目では、下記内容を設定することが出来るのでターゲットにあった広告を構築していきましょう。

(1)キャンペーン

日予算
曜日,時間帯設定
配信地域設定
除外キーワード設定
入札設定
デバイス設定

キャンペーンはアカウントの下の階層で、実際にどのような配信に関しての具体的な決まりを決めます。

(2)広告グループ

除外キーワード設定
入札設定

(3)キーワード

マッチタイプ
入札設定
URLの設定

 

キーワードを作成する場合は、ターゲットがどのようなキーワードで検索すれば、購入や申込に繋がるか考えて構築しなければなりません。

リスティング広告を出稿する上で、サービスや商品などに最適でターゲットが検索する見込みの高いキーワードを設定する必要があります。

まずは下記ツールを使ってキーワードを構築してはいかがでしょう・

Googleキーワードプランナー
https://adwords.google.com/KeywordPlanner

Yahoo!キーワードアドバイスツール
https://promotionalads.business.yahoo.co.jp/Agency/Tools/KeywordAdviceTool

いずれも取得したアカウントでログインしツールから選択します。

(4)広告

タイトル
説明文
表示URL
URLの設定
広告

ターゲットがクリックしたくなる広告文を設定する必要があります。

 

キャンペーン構成はわかりやすく

キャンペーンでは、日予算、曜日、時間帯、地域、デバイス、入札等各種設定が出来るようになっております。

キャンペーンと聞くと、なにやら新製品の促販をイメージしがちですが、単なる入れ物と理解したほうがいいかかと思います。

このとき、そんなキャンペーンにすればよいだろうと考えますが、実際の広告を見てみるとおそらく、三つのキャンペーンがよく使われているかと思います。

 

(1)競合他社名のキーワードを使ったキャンペーン

競合他社名を検索すると広告が表示されることが多いかと思います。これです。
競合他社名で検索しているユーザーは、同じ品物を取り扱っている自社のターゲットにもなりえます。
特に、SEO対策がうまく言っており、上記表示されている会社はリスティング広告をしない場合があります。こういったときは
競合他社名のキーワードで出稿することで、こういったユーザを獲得することが出来ます。

但し、競合他社が登録商標を取得した社名や製品をキーワードとして出稿すると、ガイドラインに抵触して広告表示を停止される可能性もあるので
注意が必要です。

たとえば、弊社が目標としているのはマッキンゼー・アンド・カンパニー社です。キーワードをマッキンゼーとすれば
おそらく一番目に表示されるでしょうw。でも実行しませんが。

 

(2)商品・サービスを表すキーワードを使ったキャンペーン

メインとして取り扱っている商品・サービスをあらわすキーワードをキャンペーンでまとめます。
但し、キーワードの中に検索ボリュームの大きい「ビッグキーワード」がある場合は、このキーワードだけでキャンペーンをまとめます。
予算を多く使うキャンペーンになるため、予算管理上わけ得ておいたほうが運用しやすいです。日予算をこまめに管理できます。

(3)自社名や自ブランド名のキーワードを使ったキャンペーン

自社名や自ブランド名で検索してくれるユーザーは、ブランドロイヤリティが高く、商品を購入してくれる可能性が高いので、
1.でご紹介したように競合他社が自社名、自ブランド名で出稿される可能性が高いです。ですので、防衛のため出稿しましょう。
以前、あるIT関連の企業がこの部分の対応をとらなかったため、有力な競合会社がキーワード表示1位であるにもかかわらず、
5社が表示され大きくシェアを落としてしまったということがあります。

 

広告配信で注意が必要なこと

広告配信を順調に行うためには、日予算をしっかり監視する必要があります。
その中で、特に重要な点3つをご説明します。

 

(1)キャンペーン内の広告グループ数

キャンペーンの中で広告グループが多くなると、日予算が分散されます。この場合、検索数の多いグループに配信がかたよってしまうので
注意が必要です。

(2)上限CPCの管理

キャンペーンの日予算を5000円、このときCPCを500円としている場合、1日の上限クリック数は10件となります。この場合、設定したキーワードの
検索数が多くてもクリック数は10クリックに制限されるので、それ以上のクリックを得られなくなります。このキーワードのコンバージョン率が
高いと、機会損失につながりますので注意が必要です。

 

キャンペーンの中の広告グループ数とキーワード数

以前の考え方では「キャンペーンの中の広告グループとキーワード数は、1:1が運用効率が高い。」
とされていました。

一つの広告グループに複数のキーワードが入っていると、複数設定した広告文と複数設定したキーワードがあると、ミスマッチがおこるため、
一つの広告グループに一つのキーワードがよい、とされていました。

ですが、最近になってGoogleからハガクレ(Hagekure)という手法が提唱されており、かならずしも1:1がよいというわけではないという
状況になっています。

特に、HagakureはAIを活用して広告運用を自動化して運用効率を高める方法のために開発されており、テクノロジーの進化とともに
運用効率の改善方法が変わってきている時代になっています。

今後、hagakureについても解説記事をご紹介します。

まとめ

リスティング広告の導入のための基礎知識としてアカウント構成、キャンペーン、広告グループをご説明しました。

ご参考として活用ください。

Google スプレッドシートでGoogle広告のレポートを作成する(無料テンプレ進呈)

はじめに

みなさんこんにちはALEXです。お客様のウェブサイトの集客ツールとして有効な「google広告」。これは非常に効果的にリードをウェブサイトに誘導することができます。私も多くのクライアント様のgoogle広告の運用をお手伝いさせていただいております。

 

google広告運用で大切なこと

効果的に広告を運用するにあたり大切なことは

「データを収集して理解する」ということです。この作業とても大切ですが

めんどくさいなあ。。。というお声をよく伺います。

そこで、今回はお客様のその面倒くささを解決するお手伝いとして、

 

Google広告のデータレポートを無料で作成する方法をご紹介します。

 

Google広告のデータレポートを無料で作成する方法

まずは、無料でデータを入手しましょう。

事前にGoogleスプレッドシートを使えるようにしておいてください。

Google広告にログインします。次に画面上の「ツール」ー「スクリプト」をクリックします。

続いて、スクリプトの画面から新規追加のアイコンをクリックします。

新規スクリプトの画面が出ますので、スクリプト名を記入(adwordsreportとか)しスクリプトの部分に以下のコードをコピペしてください。

 

// グローバル変数 
    //レポート表紙情報
    var REP_AUTHOR = "レポート作成者名";//見出しページの差し込み文
    var CUSTOMER = "レポート宛名";//見出しページの差し込み文
    var COPYRIGHT = "Copyrigth(C) Alex and compnay AII Right Reserved.";//一番下のコピーライト
    var DATA_DATE = "2019/01/01"; //yyyy/mm/dd 
    var DATA_MONTH = "2019年1月";//レポートでの表記用
    //AWQL用データ
    var AWQL_DURING = "20190101, 20190131"//レポート取得期間。例>2019年1月1~31日;

var FOLDER_ID = '{1MbP915l_7dIYO3sYfJrv20i9OzVhcuyj}';//レポートを出力したいフォルダを指定。Googleドライブでフォルダを開くとURLから参照できます。現在は、[AdWordsレポート生成]のフォルダを参照中。
var email = 'info@alexandcompany.net';//ここにメールアドレスを登録。レポートの送信先
var spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1tG_bjt85bWyOfAiFTdgQ7aHEIvGG86MyDqwCEmmzOyI/edit';//レポートテンプレートのファイルを参照。変更不要。
var formattedDate = Utilities.formatDate(new Date(), "JST", "yyyy/MM/dd' 'HH:mm:ss");
var cid = AdWordsApp.currentAccount().getCustomerId();
var accountname = AdWordsApp.currentAccount().getName();


function main() {




//    var SSId = copySpreadsheet(spreadsheet_url);
//    var spreadsheet = SpreadsheetApp.openById(SSId);
    var spreadsheet = copySpreadsheet(spreadsheet_url);
    //「見出し」ページの作成
        var toppage = spreadsheet.getSheetByName('見出し');
        toppage.getRange(4, 1).setValue(CUSTOMER);
        toppage.getRange(8, 3).setValue(cid);
        toppage.getRange(31, 4).setValue(REP_AUTHOR);
        toppage.getRange(34, 2).setValue(COPYRIGHT);
    //「総計」ページの作成
        var sumarrypage = spreadsheet.getSheetByName('総計');
        sumarrypage.getRange(1, 12).setValue(DATA_DATE);

    //検索連動レポート(日別)
        var rawsheet = spreadsheet.getSheetByName('rawdata');
        var formatsheet = spreadsheet.getSheetByName('アドワーズ');
        formatsheet.getRange(1, 7, 1, 1).setValue(formattedDate);//セルの範囲取得:getRange(row, column [, numrows [, numcolumns]])
        formatsheet.getRange(1, 2, 1, 1).setValue('CID:');
        formatsheet.getRange(1, 3, 1, 1).setValue(cid);
        formatsheet.getRange(2, 2, 1, 1).setValue('アカウント名:');
        formatsheet.getRange(2, 3, 1, 1).setValue(accountname);
    //検索連動レポート(KW別)
        var rawsheet2 = spreadsheet.getSheetByName('rawdata2');
        var formatsheet2 = spreadsheet.getSheetByName('アドワーズKW');
        formatsheet2.getRange(1, 7, 1, 1).setValue(formattedDate);//セルの範囲取得:getRange(row, column [, numrows [, numcolumns]])
        formatsheet2.getRange(1, 2, 1, 1).setValue('CID:');
        formatsheet2.getRange(1, 3, 1, 1).setValue(cid);
        formatsheet2.getRange(2, 2, 1, 1).setValue('アカウント名:');
        formatsheet2.getRange(2, 3, 1, 1).setValue(accountname);
    //ディスプレイネットワーク(日別)
        var rawsheet3 = spreadsheet.getSheetByName('rawdata3');
        var formatsheet3 = spreadsheet.getSheetByName('GDN');
        formatsheet3.getRange(1, 7, 1, 1).setValue(formattedDate);//セルの範囲取得:getRange(row, column [, numrows [, numcolumns]])
        formatsheet3.getRange(1, 2, 1, 1).setValue('CID:');
        formatsheet3.getRange(1, 3, 1, 1).setValue(cid);
        formatsheet3.getRange(2, 2, 1, 1).setValue('アカウント名:');
        formatsheet3.getRange(2, 3, 1, 1).setValue(accountname);
  
  

    // レポート取得
    var adwordsreport = AdWordsApp.report(
        'SELECT Date, Impressions, Clicks, Ctr, Conversions, ConversionRate, CostPerConversion, AveragePosition, Cost ' +
        'FROM   ACCOUNT_PERFORMANCE_REPORT ' +
        'WHERE  AdNetworkType1 = SEARCH ' +
        //'WHERE  Impressions > 0 ' +
        'DURING '+AWQL_DURING);
    var keywordreport = AdWordsApp.report(
        'SELECT Criteria, KeywordMatchType, CampaignName, Impressions, Clicks, AveragePosition, Ctr, Conversions, ConversionRate, CostPerConversion, Cost ' +
        'FROM   KEYWORDS_PERFORMANCE_REPORT ' +
        'DURING '+AWQL_DURING);
    var gdnreport = AdWordsApp.report(
        'SELECT Date, Impressions, Clicks, Ctr, Conversions, ConversionRate, CostPerConversion, Cost ' +
        'FROM   ACCOUNT_PERFORMANCE_REPORT ' +
        'WHERE  AdNetworkType1 = CONTENT ' +
        //'FROM   DISPLAY_TOPICS_PERFORMANCE_REPORT ' +
        //'WHERE  Impressions > 0 ' +
        'DURING '+AWQL_DURING);
//    'WHERE Status = ENABLED '+
//    'WHERE  Impressions > 0 ' +
  

  	 
  // レポート取得  
  var groupreport = AdWordsApp.report(
    'SELECT CampaignName, AdGroupName,Impressions, Clicks, AveragePosition, Ctr, Conversions, ConversionRate, CostPerConversion, Cost  ' +
    'FROM   KEYWORDS_PERFORMANCE_REPORT ' +
    'WHERE Status = ENABLED '+
        // 'WHERE  Impressions > 0 ' +
    'DURING THIS_MONTH');
   
  // 上記AWQLで指定したデータをエキスポート
  //report.exportToSheet(rawdata3);

    // 上記AWQLで指定したデータをエキスポート
        adwordsreport.exportToSheet(rawsheet);
        rawsheet.insertColumns(2);//曜日欄
        rawsheet.insertColumns(6);//CPC欄
    // 上記AWQLで指定したデータをエキスポート
        keywordreport.exportToSheet(rawsheet2);
        rawsheet2.insertColumns(8);//CPC欄
    // 上記AWQLで指定したデータをエキスポート
        groupreport.exportToSheet(rawsheet3);
    //    rawsheet3.insertColumns(2);//曜日欄
    //    rawsheet3.insertColumns(6);//CPC欄
    //    rawsheet3.insertColumns(9);//平均順位欄

    // 日付列でソート
    rawsheet.sort(1, true);
    // コスト列でソート
    rawsheet2.sort(12, false);
    // 日付列でソート
    rawsheet3.sort(1, true);

    // ヘッダー設定
        var header = ['日付', '曜日', 'インプレッション数', 'クリック数', 'クリック率', 'クリック単価', 'コンバージョン数', 'コンバージョン率', 'コンバージョン単価', '平均掲載順位', 'コスト',];
        var headerrange = formatsheet.getRange(4, 2, 1, 11);
        headerrange.setValues([header]);
        headerrange.setHorizontalAlignment("center");
        headerrange.setFontWeight("bold");
        headerrange.setFontSize(8);
    // ヘッダー設定
        var header2 = [ 'キーワード', 'マッチタイプ', 'キャンペーン', '表示数', 'クリック数', '平均掲載順位', 'クリック率', 'CPC', 'CV数', 'CV率', 'コンバージョン単価', 'コスト',];
        var headerrange2 = formatsheet2.getRange(4, 2, 1, 12);
        headerrange2.setValues([header2]);
        headerrange2.setHorizontalAlignment("center");
        headerrange2.setFontWeight("bold");
        headerrange2.setFontSize(8);
    // ヘッダー設定
        var header3 = ['日付', '曜日', 'インプレッション数', 'クリック数', 'クリック率', 'クリック単価', 'コンバージョン数', 'コンバージョン率', 'コンバージョン単価', '平均掲載順位', 'コスト',];
        var headerrange3 = formatsheet3.getRange(4, 2, 1, 11);
        headerrange3.setValues([header3]);
        headerrange3.setHorizontalAlignment("center");
        headerrange3.setFontWeight("bold");
        headerrange3.setFontSize(8);

    // rawdataをフォーマットシートへ値コピー(フォーマットシートのクリック率列の書式を%にしておく)
        var lastRow = 31; //rawsheet.getLastRow();
        var lastColumn = rawsheet.getLastColumn();
        // var copyValue = rawsheet.getRange(2, 1, lastRow, lastColumn).getValues();
        // formatsheet.getRange(5, 2, lastRow, lastColumn).setValues(copyValue);
        var copyValue = rawsheet.getRange(2, 1, lastRow, 1).getValues();
        formatsheet.getRange(5, 2, lastRow, 1).setValues(copyValue);
        var copyValue = rawsheet.getRange(2, 3, lastRow, 3).getValues();
        formatsheet.getRange(5, 4, lastRow, 3).setValues(copyValue);
        var copyValue = rawsheet.getRange(2, 7, lastRow, 5).getValues();
        formatsheet.getRange(5, 8, lastRow, 5).setValues(copyValue);
    // rawdataをフォーマットシートへ値コピー(フォーマットシートのクリック率列の書式を%にしておく)
        var lastRow2 = 50;//rawsheet2.getLastRow();
        var lastColumn2 = rawsheet2.getLastColumn();
        // var copyValue2 = rawsheet2.getRange(2, 1, lastRow2, lastColumn2).getValues();
        // formatsheet2.getRange(5, 2, lastRow2, lastColumn2).setValues(copyValue2);
        var copyValue2 = rawsheet2.getRange(2, 1, lastRow2, 7).getValues();
        formatsheet2.getRange(5, 2, lastRow2, 7).setValues(copyValue2);
        var copyValue2 = rawsheet2.getRange(2, 9, lastRow2, 4).getValues();
        formatsheet2.getRange(5, 10, lastRow2, 4).setValues(copyValue2);
    // rawdataをフォーマットシートへ値コピー(フォーマットシートのクリック率列の書式を%にしておく)
        var lastRow3 = 31; //rawsheet.getLastRow();
        var lastColumn = rawsheet.getLastColumn();
        // var copyValue = rawsheet.getRange(2, 1, lastRow, lastColumn).getValues();
        // formatsheet.getRange(5, 2, lastRow, lastColumn).setValues(copyValue);
        var copyValue3 = rawsheet3.getRange(2, 1, lastRow, 1).getValues();
        formatsheet3.getRange(5, 2, lastRow, 1).setValues(copyValue3);
        var copyValue3 = rawsheet3.getRange(2, 3, lastRow, 3).getValues();
        formatsheet3.getRange(5, 4, lastRow, 3).setValues(copyValue3);
        var copyValue3 = rawsheet3.getRange(2, 7, lastRow, 5).getValues();
        formatsheet3.getRange(5, 8, lastRow, 5).setValues(copyValue3);


    // 処理後、rawdataシートを削除する
    // spreadsheet.deleteSheet(rawsheet);
    // spreadsheet.deleteSheet(rawsheet2);
    // spreadsheet.deleteSheet(rawsheet3);

/*    Driv.Files.insert({
        "title": ,
        "mineType": "application/vnd.google-apps.spreadsheet",
        "parents": [{"id": FOLDER_ID }]
    });
*/
//     moveSS(SSId);
//     function moveSS(SSId) {
//
// //        var idSs = SpreadsheetApp.create("新規SS").getId();
//         var fileSS = DriveApp.getFileById(SSId);
//         var folderTarget = DriveApp.getFolderById(FOLDER_ID);
//
//         folderTarget.addFile(fileSS);
//         DriveApp.getRootFolder().removeFile(fileSS);
//
//     }




    // ログ記録とメール通知設定
    Logger.log('キャンペーンレポート(今月)の準備ができました\n' +
        spreadsheet.getUrl());
    if (email) {
        MailApp.sendEmail(email,
            'キャンペーンレポート(今月)の準備ができました' + ' ' +accountname + ' ' + formattedDate,
            spreadsheet.getUrl());
    }
}

// スプレッドシートのコピー利用
function copySpreadsheet(spreadsheetUrl) {
    return SpreadsheetApp.openByUrl(spreadsheetUrl).copy(
        'キャンペーンレポート('+ DATA_MONTH +')' + ' ' + accountname + " [作成日:" + formattedDate +"]");
//        'キャンペーンレポート(今月)' + ' ' + accountname + " " + formattedDate).getId();
}

 

そして保存をクリック。

スクリプトが登録されたら、その名前をクリックします。次に画面下の「実行を」クリック。

これでスクリプトが実行され、Googleドライブ上にデータシートが作成されました。「ログステートメント」をクリックすると画面下にURLが出ますのでこれをクリックしてください。

Googleスプレッドシートにレポートが表示されています。

各データの詳しいご説明は次の記事でご紹介します。

 

まとめ

Google スプレッドシートでGoogle広告のレポートを作成する方法をご紹介しました。

もっとさらに掘り下げたい、運用を効果的に行いたい、とお悩みのお客様。お気軽にご相談ください。

詳しく見る

Google スプレッドシートでGoogleアナリティクスのレポートを作成する(無料テンプレ進呈)

はじめに

みなさんこんにちはALEXです。ウェブマーケティングのキモの一つに

・ウェブサイトのアクセス状況を把握する

というものがあります。

これは、Googleが提供しているGoogleアナリティクスを活用すると、基本的にはすべて無料で、ご自分が運営するウェブサイトのアクセス状況を詳細に調べることが可能です。

ですが、Googleアナリティクスは「ちょっとハードルが高いんですよね。」というお声をよく伺います。

ハードルがちょっと高いGoogleアナリティクスのハードルを無料で下げる方法

そうなんです。ある程度エンジニアとしてのスキルがないと、なかなかこのGoogleアナリティクスを自由自在に活用するのは少々ハードルが高いのです。

 

そこで、当社ではこのGoogleアナリティクスのハードルを下げて、どんどん活用していただきたい!!とお客様の視線に立って、

簡単に、

しかも無料で、

Googleアナリティクスを活用いただけるために、無料テンプレートをご用意いたしました。

こちらは弊社がご提供している、「アクセス解析レポートサービス」のSILVERプランです。

https://alexandcompany.net/service/analytics/

サンプルレポートの内容

 

まずGoogleアナリティクスのデータを活用するにあたり覚えていただきたい用語は

dimensionとmetricsの二つです。

dimensionは日付(date)、月(month)、年月(yearmonth)といった指標です。

metricsは、それぞれの指標の名前として理解してください。今回6つのmetricsをご紹介します。

・ページビュー(pageviews)

・セッション(sessions)

・平均滞在時間(avgTimeOnPage)

・コンヴァージョン(goalCompletionsAll)

・直帰率(bounceRate)

・離脱率(exitRate)

今回はこれら6つのmetricsの先月の日別のデータを入手してバーグラフで表示するレポートをご用意しました。下記のアドレスから入手可能です。

無料ファイル入手先

操作方法

次に操作方法をご説明します。Report Configurationのシートをアクティブにしてください。

このシートのView IDはお客様のデータを入力してください。

次に「アドオン」-「Googleanalytics」-「Run reports」をクリックします。

次に「Report Status」の以下の表示が出ればデータ収集完了です。

シートの「レポートサマリー」クリックすれば上記のmetricsの日ごとデータが表示されます。

まとめ

ウェブサイトのアクセスデータを簡単入手できるGoogleアナリティクスデータ解析用Googleスプレッドシートをご紹介しました。ぜひご活用ください。

 

さらに掘り下げて分析をご希望のお客様、ぜひ、SILVERプランをご検討ください。

WORDPRESS5.0がリリースされました

はじめに

みなさんこんにちはALEXです。この度、WORDPRESS5.0がリリースされました。約4年ぶりの大型アップデートです。今回ほどのアップデートでは注意が必要です。

 

更新時の注意点

WORDPRESSだけでなく、ソフトウェアの大型アップデートでは、新しい機能が追加されることが多く、その分新機能が追加されれば、便利になる反面、次のような問題が発生する可能性もあります。

  • 今まで使っていたプラグインが使えな
  • 今まで使っていたテーマが使えない
  • 新機能が使いにくい
  • 重大な不具合が発生するかもしれない

WordPress 5.0への更新作業は慎重に行いましょう。更新前にはデータベースとファイルのバックアップを必ずとるようにしてください

 

WordPress 5.0 主要新機能

WordPress 5.0 の新機能は、主に次の2つです。

  • エディタ「Gutenberg」
  • テーマ「Twenty Nineteen」

今回はエディタ「Gutenberg」をご紹介します。

エディタ「Gutenberg」

エディタとは、投稿や固定ページを編集する画面のことです。Gutenbergは、従来エディタ(と比べて、使い方が大きく異なります。

具体的には、記事内の「段落」「見出し」「画像」などをブロックで構築する仕様に生まれ変わりました。

 

エディタ「Gutenberg」が使いにくい場合

エディタ「Gutenberg」での編集作業がやりづらい場合は、従来のエディタに戻すことができます。私も、このGutenbergは現時点では使いにくいです。htmlを直接編集していたので、ほんとうに使いずらいです。また、画像を自由に挿入できない、ブロックがたくさん生まれてしまう等々・・・。

こんな時には公式プラグイン「Classic Editor」

戻すには、エディタを公式プラグイン「Classic Editor」をインストール・有効化します。

ただし、公式ブログによると、Classic Editor プラグインのサポートは2021年までの期限付きです。それ以降は従来のエディタが使えなくなる可能性があるため、Gutenberg エディタに慣れるのがよいかもしれません。

Google AdWords Editorの使い方(基本編2)

Google AdWords Editorの使い方を引き続き解説します。

 

最新の変更を取得

Google AdWordsから最新のデータをダウンロードしましょう。画面上部の黒い帯の「最新の情報を取得」をクリック。

 

20151221-09

この時、2つのダウンロードオプションを選択できます。

  • 基本(速い):First Page Bid 見積もり、ページ上部表示推定入札単価、品質スコア、広告の承認情報が必要ない
  • 詳細データ(遅い):上記の情報を全て含めたい場合

特にお急ぎでない場合は「詳細データ」を選択しましょう。

 

検索連動型広告用キャンペーン追加手順

検索連動型広告用キャンペーンを以下の手順で設定していきます。

(1)キャンペーンの追加

(2)広告グループの追加

(3)広告グループにキーワード追加

(4)広告グループにテキスト広告追加

 

キャンペーンの追加

ウインドウ左下の「キャンペーン」を選択し+ キャンペーンを追加]をクリック。

新しいキャンペーンが追加されました。ここで設定する情報は、管理画面でキャンペーンを追加する場合と同じですが、青囲みした項目については注意をする必要があります。

キャンペーン タイプ

初期値にはまず「検索ネットワークのみ」を選びましょう。「検索ネットワーク(ディスプレイ ネットワーク対応)」を選択してしまうとディスプレイネットワークにも同時に広告が配信されるため、このキャンペーンタイプの使い方をよく知っているようになるまではを「検索ネットワークのみ」を使うことをおすすめします。

ステータス

「有効」の状態で設定すると、Google アドワーズ側で審査手続きが終了したい広告掲載が開始されてしまうため、「一時停止」のステータスにしておくことをおすすめします。任意のタイミングで広告掲載を開始できるので「一時停止」→「有効」にしましょう。

開始日

開始日は基登録した日が設定されます。特定のひづけから運用開始したい場合は、その日を入力してください。ただし、ステータスが「一時停止」の場合、指定した日付に掲載は開催されませんので注意が必要です。

 

広告グループの追加

広告グループの追加は、ウインドウ左上にあり広告グループを追加したいキャンペーンを選択してで対象となるキャンペーンを選択し、ウインドウ左下の中から「広告グループ」を選択[+ 広告グループを追加]をクリックします。すると画面中央に選択するキャンペーンがもう一度出てくるのでチェックボックスをマークしてOKをクリックします。

新しく追加された広告グループが表示されます。ここでは、赤枠で囲んだ部分の設定に気をつけて下さい。

ターゲティング方法の最適化について

この値はまず「無効」とすることをおすすめします。「慎重な拡張」の場合、リマーケティングリストなどのユーザーリストを追加すると、その対象ユーザーと拡張されたユーザーに広告が配信されてしまいますので、運用に慣れてからその設定を使うことをおすすめします。

 

広告グループにキーワード追加

 

キーワード追加は、①ウインドウ左上の対象キャンペーンと広告グループを選択して、左下の「キーワードとターゲット設定」から「キーワード」を選択して「+キーワードを追加」をクリック。

ウィンドが空きますので、キーワードを追加したい広告グループをチェックしてOKをクリック。

追加したいキーワードを入力します。また、「タイプ」を選択しますが、項目として「完全一致」「部分一致」「フレーズ一致」の3つがあり、この中から選択します。

この時マッチタイプとしては、運用を開始されたばかりであれば、「部分一致」で運用をはじめられることをおすすめします。部分一致での運用を行っていき、設定したキーワードが設定したキャンペーン、広告グループに対して当初設定したように、ユーザの検索に対する表示回数、クリック数との関係を見ていきながら、そのキーワードが検索にマッチしているか、それともマッチしていないか、ということが感覚的につかめるようになってから、完全一致、フレーズ一致をバリエーションとして増やしていくことが望ましいと思います。

更に「絞り込み部分一致」を設定していけるようになれば、積極的に使っていきましょう。但し「絞り込み部分一致」は前述の項目としては存在しないので、絞り込みを行いたいキーワードテキストの直前に「+」をつけて、マッチタイプは「部分一致」として設定します。

また、設定に際しては、上限クリック単価の設定が重要です。クリック単価をあまり低くすると、表示順位が下がります。しかし、高くしすぎると必要以上の広告費用がかかってしまうので、設定したキーワードの相場観を持つことが大切です。

広告グループに拡張テキスト広告追加

テキスト広告の追加は「拡張テキスト広告」についてご説明します。拡張テキスト広告は、表示URLの自動識別&パスを個別に2枠設定できることと、従来の広告文のスタイル変更&文字数が増える、というものです。

ウインドウ左上で対象となるキャンペーンと広告グループを選択、「広告と広告表示オプション」の中から「拡張テキスト広告」を選択し、「+ テキスト広告を追加」をクリック。

見出し1,見出し2、説明を入力します。右側に広告表示が掲載されるので、いろいろ試しながらベストな広告文を作成しましょう。必ずキーワードを含めて下さい。

パス、最終ページURL,モバイル用最終ページURLを入力します.

広告計測ツールなどを利用している場合は、「URLオプション」タブに切り替え、最終ページURL、トラッキングテンプレートなど必要な情報を入力します。

変更をアップロード

変更が完了したら、次はその内容をウェブにアップロードします。「変更内容を確認」をクリックしてポップアップウィンドウの「変更内容を確認」をクリック。

最後にウェブ上のGoogleアドワーズに変更内容をアップロードして終了です。黒帯の「送信」-「変更を送信」をクリック。

ポップアップウィンドウの「送信」をクリックすると、変更内容がアップロードされます。これで作業は完了です。

念のために、ウェブ上のGoogleアドワーズにアクセスして変更内容反映の確認をおすすめします。

 

 

Google AdWords Editorの使い方(基本編1)

リスティング広告は、運用がうまくいけばたくさんのユーザーをウェブサイトに呼び込みことができます。ただし、それはリスティング広告の運用方法を正しく理解していること、使用するツールをの正しい使い方を把握している必要があります。こういった作業はキーワード数が数10個程度であれば全く問題はないのですが、広告を大量に運用するようになると作業はとても煩雑になります。一日、コンソールとにらめっこ、ということになりかねません。

そんなときは是非GoogleのAdWords Editorを使って作業量を減らしましょう!AdWords Editorは、オフラインでアカウントの管理作業や、大量の追加や変更作業もスムーズに行うことができます。アカウントの掲載内容をAdWords Editorにダウンロードすることができるので掲載内容の把握も管理画面と比べてスピーディーに行うことができます。

今回の記事では、AdWords Editorのダウンロードから検索連動型広告とGoogle ディスプレイネットワークへの広告配信迄、AdWords Editorを使いこなすまでの最低限の設定やその手順をお話しします。

AdWords Editorをダウンロードする

次のURLからアプリをダウンロードしてください。

http://www.google.co.jp/intl/ja/adwordseditor/

Windows版とMac版が提供されていますので、自分のパソコンの環境にあった方のバージョンを選んでダウンロードしましょう。ここではWindowsのダウンロード方法をご紹介します。手順に従っていけば、簡単にダウンロードができます。ダウンロードが無事完了すると、スタートアップにAdWords Editorが登録されます。アイコンをクリックするとAdWords Editorがが起動します。

 

 

AdWords Editorの起動~設定

AdWords Editorを起動すると、まず表示言語を選択します。「日本語」をクリック。

次に利用規約の確認です。利用規約の文章を最後までスクロールすると「同意する」がアクティブになります。また、規約は保存、印刷が可能です。

次にキャンペーンの既定のターゲットを設定します。言語:日本、地域:日本とします。

次にアカウントの情報をダウンロードします。左上の「追加」をクリック。

Adwordsアカウントにログインします。

 

アカウントへのログイン方法が選べます。「ブラウザを開いてログイン」「アプリ内ブラウザからログイン」のどちらを選択しても問題ないですが、今回は「ブラウザを開いてログイン」する方法でご紹介します。

20151221-04

「ブラウザを開いてログイン」を選択すると上図のウインドウが開きます。

20151221-05

同時に、ブラウザ側にアカウントへのログイン画面が表示され、必要事項を入力すると上図のようなコードが表示されるので、このコードを先ほどのウインドウにコピー&ペーストします。

20151221-06

無事に認証が通ると、ダウンロードを確認するメッセージが表示されます。「すべてのキャンペーン」を選択して「OK」をクリックします。

 

Adwords Editorのメインとなるウインドウが開き、準備完了です。

AdWords Editorを使う際の注意点

AdWords Editorの使用時に最も大切なことは、必ず「最新の変更を取得」をクリックしてアカウントの最新情報をダウンロードすることです。これをしないと、アカウントで作業をして、アップロードした際に、アカウントの情報が先祖返りしてしまうことがあります。ですので、必ず「最新の変更を取得」することを忘れないでください。

 

 

Contact Form 7 でリアルタイムにエラーチェック

はじめに

ウェブサイトを訪問して、製品・サービスに興味を持ってくれたユーザが問い合わせをしてくれるフォームですが、これがとても大切なパーツであるということが最近よく言われています。SEO(Search Engine Optimization)と並びEFO(Entory Form Optimization)がとても大切です。
 
特にフォームの入力がスムースに進むようにサポートしてあげることがとても大切なことはこれまでの記事でもご紹介いたしましたが、今回、その中でとても大切なパートをご紹介します。Contactform7の標準機能でも入力に間違いがあると、「送信」ボタンを押した後にエラーメッセージがでますが、もっとユーザビリティを向上させたいですよね。
 
今回は、Contact Form 7にjQuery-Validation-Engineを組み込んでリアルタイムで入力エラーをチェックする方法をご紹介します。当社ウェブサイトの「お問合せデモページ」をご覧ください。
 

リアルタイムエラーチェック導入

導入は慣れてしまえば簡単です。

導入方法は、いくつかの方法があります。Githubからダウンロードして、自分のサイトのディレクトリに保存する方法が先々を考えるとよいのですが、今回はず確実に導入できる方法をご紹介します。

「外観」―「テーマの編集」をクリック

テーマファイルのheader.phpをクリックします。

ここに以下のコードをコピペしてください。

 

<head></head>内のjquery.jsより後ろの位置かあるいは、</body>直前など適切な場所に以下のコードをコピペしてください。

 

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css' type='text/css' media='all' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js'></script>

 

 

jQuery-Validation-Engineの実行コード記述

jQuery-Validation-Engineを実行するコードをheader.phpで記述したコードの後ろに記述します。(「jquery.validationEngine.min.js」より後ろに記述してください。)

<script>
jQuery(document).ready(function(){
  jQuery("#formID").validationEngine();
});
</script>

 

ここに書いている、#formIDはJscriptのidを記述してください。注意してほしいのですがformIDの前の#は消さないでください。Contact Form 7のデフォルト状態ではform要素にid属性が付与されていないので、idを追加して書き込みます。固定ページにフォームを作成しますが、この時記述するcontact-form-7のショートコードにhtml_id属性を下記のように追加すれば任意のidを追加できます。

contact-form-7 id="xxx" title="xxx" html_id="formID"

 

jQueryでclass属性を追加

フォームのinput要素に validate[required] という形のclass属性を追加します。
基本的にはinput要素に class=”validate[required] ” と追加すれば、リアルタイムでバリデーションを行います。Emailアドレスかどうかをチェックしたい場合は class=”validate[required,custom[email]]” としてあげると、Emailとして入力してあるかをチェックします。

Contact Form 7ではinput要素に[](角括弧)の付いたclass属性を追加できないため、jQueryのaddClass メソッドを使って追加します。jQueryは以下の通りです。

<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery("#name").addClass("validate[required]");
 jQuery("#email").addClass("validate[required,custom[email]]");
 jQuery("#url").addClass("validate[required,custom[url]]");
 jQuery("#tel").addClass("validate[required,custom[phone]]");
 jQuery("#eisuji").addClass("validate[required,custom[onlyLetterNumber]]");
 jQuery("#mojisu").addClass("validate[required,minSize[5],maxSize[10]]");
 jQuery("#drop").addClass("validate[required]");
 jQuery("#check input").addClass("validate[minCheckbox[2]]");
 jQuery("#radio input").addClass("validate[required]");
 jQuery("#message").addClass("validate[required,minSize[5]]");
});
</script>

 

デモで使用しているContact Form 7のLソースです↓。

<dl id="demo" class="clear">
 <dt>お名前 (必須)</dt>
 <dd>[text* aaa id:name]</dd>
 <dt>メールアドレス</dt>
 <dd>[email* bbb id:email]</dd>
 <dt>URL</dt>
 <dd>[text* ccc id:url]</dd>
 <dt>電話</dt>
 <dd>[tel* ddd id:tel]</dd>
 <dt>英数字のみ</dt>
 <dd>[text* eee id:eisuji]</dd>
 <dt>5文字から10文字</dt>
 <dd>[text* fff id:mojisu]</dd>
 <dt>ドロップダウンメニュー</dt>
 <dd>[select* ggg id:drop include_blank "海" "川" "山" "丘"]</dd>
 <dt>チェックボックス 2つ以上</dt>
 <dd>[checkbox* hhh id:check "空" "星" "雲"]</dd>
 <dt>ラジオボタン</dt>
 <dd>[radio iii id:radio "リンゴ" "オレンジ" "グレープ"]</dd>
 <dt>メッセージ本文 5文字以上</dt>
 <dd>[textarea* jjj id:message]</dd>
 <dt>&nbsp</dt>
 <dd>[submit "送信"]</dd>
</dl>

 

 

デモサイト

デモサイトはこちらです。

http://alexandco-global.tokyo/validation_demo/

いかがでしょう?うまく表示できましたか?

私も最初はうまく表示できなくて悩みました。
でも絶対できますのであきわめないでください。

どうしてもわからなければお問い合わせください。

ありがとうございました。

WORDPRESS | Contact Form 7 郵便番号から住所を自動入力する

みなさんこんにちはALEXです。EFOキャンペーンもいよいよあと2件です。合計8件の記事を執筆しました。

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

今回は入力フォームの住所入力を自動入力する方法について解説します。郵便番号から住所を表示するライブラリーAjaxZip3を使えば、膨大な数の郵便番号から住所を取得することができます。

郵便番号は3桁+4桁、住所は「都道府県」「市区町村」「番地」の3項目の入力とします。

フォーム画面

Contact Form 7 のフォーム編集画面で以下のタグを入力します。

郵便番号
[text zip1 id:zip1]-[text zip2 id:zip2]

都道府県
[text prefecture id:prefecture]

市区町村 
[text city id:city]

番地 
[text street id:street]

 

これでOKです。

 

Function.phpの編集

Function.phpに以下のタグを入力します。

function add_head_link() {
    echo '<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>';
    echo "
    <script type=\"text/javascript\">
    jQuery(function($){
    $(\"#zip\").attr('onKeyUp', 'AjaxZip3.zip2addr(this,\'\',\'address\',\'address\');');
    $(\"#zip2\").attr('onKeyUp', 'AjaxZip3.zip2addr(\'zip1\',\'zip2\',\'prefecture\',\'city\',\'street\');');
});";
    echo '</script>';
}
add_action('wp_head', 'add_head_link');

 

これでOKです。

入力画面を確認する

 

実際の画面を確認します。入力前は以下の通りです。

郵便番号に当社所在地の郵便番号「140-0014」を入力すると以下のようになります、

これは便利です。作業時間5分もかからず住所の自動入力が実現しました。

 

まとめ

ライブラリーAjaxZip3を使用して郵便番号入力から自動的に住所を表示する方法をご紹介しました。

 

ありがとうございました。

 

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

WORDPRESS | Contact Form 7  バリデーションを導入する

みなさんこんにちはALEXです。EFOキャンペーンもいよいよ後半戦です。合計7件の記事を執筆しました。

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact form 7にマイクロコピー挿入

 

今回はバリデーションの導入についてご説明します。バリデーションとは、フォーム入力の場合、フォームに入力した内容が妥当かということを検証する、ということです。以前の記事で、

Contact Form7 メールアドレスの再入力チェック

がありますが、これもバリデーションです。入力時にバリデーション表示を出して、入力時の誤りに気付いていただく、という心遣いです。

 

contact Form 7 のデフォルトのバリデーション

Contact Form7にもバリデーション機能があります。編集画面ー「メッセージ」が該当します。以下にデフォルトを表示します。

 

21種類の項目がデフォルトで導入されています。この他に、ご利用状況に応じてバリデーションを追加したいところです。今回は、氏名のフリガナチェックを行います。

 

氏名のフリガナをチェックする

氏名にフリガナを入力していただく場合、フリガナに全角カナが入力されているかチェックします。

フォーム側に氏名(フリガナ)を追加します。タグは以下の通りとします。

[text* furigana placeholder "例)キタムラ ツバサ"]

 

また、入力された文字が全角カタカナであるかを確認するためのスクリプトをfunciton.phpに記述します。

function wpcf7_validate_kana($result,$tag){ 
  $tag = new WPCF7_Shortcode($tag);
  $name = $tag->name;
 
  $value = isset($_POST[$name]) ? trim(wp_unslash(strtr((string) $_POST[$name], "\n", " "))) : "";
 
  if ($name === "furigana") {
 

    if(!preg_match("/^[ァ-ヾ]+$/u", $value)) {
 
      $result->invalidate($tag, "全角カタカナで入力してください。");
    }
  }
  return $result;
}
add_filter('wpcf7_validate_text',  'wpcf7_validate_kana', 11, 2);
add_filter('wpcf7_validate_text*', 'wpcf7_validate_kana', 11, 2);

 

画面を確認しましょう。

ふりがなをひらがなにして送信します。

メッセージが表示されました。

 

まとめ

Contact Form7のデフォルトのバリデーション機能以外にも、function.phpにタグを記述することでオリジナルのバリデーションを追加することができます。

ありがとうございました。

 

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

WORDPRESS | Contact form 7にマイクロコピー挿入

みなさんこんにちはALEXです。EFOキャンペーンもいよいよ後半、あと三つで連載終了の予定です。いままで以下の記事をアップしました。

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

WORDPRESS | Contact Form 7 でメール送信ができない(1)

 

今回は、「マイクロコピー」についてお話しします。マイクロコピーはオレコンさんが本を出版されており皆様もご存じかとは思いますが、フォームの入力欄周辺に「短い文章」を添えてユーザーのフォーム入力を支援するものです。このマイクロコピーはアマゾンなどの大手ECがすでに取り入れており、実際に効果を上げているものです。当社も依然フォームでの離脱率が高く、対策が求められておりました。そこで、早速マイクロコピーを導入しています。実際にフォーム画面からフォーム送信に至るコンバージョン率が向上しているので、ぜひ皆さんにもお勧めします。

 

メッセージ本文にマイクロコピーを挿入する

従来のフォームのメッセージ本文の欄は真っしろしろの空白です。

ここにマイクロコピーを入れます。どのような文章を入れるのが効果的なのかは、運営するサイトのビジネスにもおりますが、当社はウェブマーケティングのコンサルティングをお勧めしているので

「例」ウェブマーケティングに関するお悩み事、アクセス解析に関するお悩み事などについて相談したい」という例文をプレースホルダーとして表示することにしました。

ここの部分の編集タグは以下のようになります。

[textarea your-message x4 placeholder "例)ウェブマーケティングに関するお悩み事、アクセス解析に関するお悩み事などについて相談したい"]

 

改良後の画面はこのようになっています。

 

とはいっても、プレースホルダーの問題は、1文字入力すると消えてしまうところです。

自分で作っておきながら「意味ないじゃんかよ」と思いました。そこで、文字を入れても消えないプレースホルダーを作りました。例文のこりますが、それが問題になるわけではありませんし。

ここの部分の編集タグは以下のようになります。

メッセージ本文<span class="requied">必須</span>
[textarea your-message x4 placeholder ]ウェブマーケティングに関するお悩み事、アクセス解析に関するお悩み事などについて相談したい[/textarea]

 

 CTAボタンの「送信する」を変更する

フォームを入力し、確認画面で入力内容をもう一度確認していただきいよいよ送信していただくわけですがそのCTAボタンがデフォルトの「送信する」ではコンヴァージョン率は上がりません。

ここは、「この内容で問い合わせる」という文章に書き替えるのが有効です。無料を強調したいのであれば「無料で問い合わせる」でもよいです。ここはフォームの編集画面を変えるだけです。変更前後で以下のように変わります。

 

まとめ

みなさんも自分でサイトを運営するだけでなく、いろいろなサイトで買い物やお問い合わせをされていらっしゃると思います。フォームでは、ほんの些細な使い勝手の悪さが離脱につながることはよくご存知かと思います。その時のユーザーとしての自分の気持ちを思い出しながらお問い合わせフォームに、どんなマイクロコピーを添えるとユーザ―様のアシストが有効かを考えてみましょう。Contact form 7でもマイクロコピーの挿入は全く問題なくできますので、トライなさってはいかがでしょうか?

 

有難うございました。

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

 

WORDPRESS | Contact Form 7 でメール送信ができない(1)

みなさんこんにちはALEXです。ただいまEFOキャンペーンの連載記事を執筆しています。なんのかんのもう5つリリースしました。

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

いよいよ後半戦の始まりですが、「急にContact Form 7 でメールを送信できなくなった」というお問い合わせが頻発したことがあります。もう沈静化していますが、最近WORDPRESSをはじめられた方向けに解説します。

「Contact Form 7でメール送信」できないことがあるんです。 今回はその原因と対策の一つをご紹介します。

Contact Form 7でメール送信できない原因

実は私も以前この不具合にでくわし数週間うなりました。あれこれ調べても原因がわかりません。対策が打てないので、自力でフォームを作るか、外部のサービスを使うしか対策は打てませんでした。

ですが、結局判明したのはRest APIが原因でした。Rest APIとは、ブラウザでサイトにアクセスしHTMLコードを取得表示する替わりに、外部のアプリケーションから JSON等のデータ形式と同じように簡単にデータ表示させるための仕組みです。

WORDPRESSでもヴァージョン4.7から導入されましたが、今年に入ってすぐに「認証しないでサイトを改ざんできるバグ」が発見されました。かなり大きなニュースになったのでご覧になった方はRest APIを無効にされた方も多いのではないでしょうか。また、このニュースを受けてホスティングサーバ事業者が提供するWPもデフォルトでRest APIが無効になったのだと思います。

この状態で、Contact Form 7 で送信ボタンを押すと、あの「クルクルかざぐるま」が延々と回り続けます。

これはいけません。せっかく費用をかけてサイトを作り、一生懸命Googleアナリティクスで動線解析しても最後の最後で「コンバージョンゼロ」になってしまいます。

 

対策ーContact Form 7 Controlsを導入する

Rest APIを有効にすれば問題は解決します。ですが、セキュリティ上懸念の残っているAPIはあまり使いたくありません。そこで、Contact Form 7のプラグイン「Contact Form 7 Controls」の導入をお勧めします。

WordPress 管理画面の「プラグイン」-「 新規追加」から「Contact Form 7 Controls」をインストールして有効化しします。「Contact Form 7 Controls」をインストールして有効化すると、管理画面の「お問い合わせ」からフォームを選び演習画面を表示します。タブの右端に「Customize」が追加されていますので、これをクリック。上から2番目の『AJAX Submissions » Disable AJAX for this form』にチェックを入れて保存します。

 

 

この設定はコンタクトフォームごとに変更する必要があります。複数のコンタクトフォームを設置している場合はすべて設定変更しましょう。

 

まとめ

今回は「Contact Form 7 でメール送信ができない」という問題の原因と解説についてご説明しました。

ありがとうございました。

 

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

 

WORDPRESS | Contact Form7 の確認画面を追加する

みなさんこんにちはALEXです。現在EFO改善キャンペーン中です。今回で5作目、後半戦開始といったところです。これまで

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

の4記事を紹介させていただきました。Contact Form 7はデフォルトでは確認画面がなく、送信ボタンをポチするといきなり送信されてしまいます。はじめてのビジターの方が多いサイトではやはり確認画面がほしいところです。そこで今回はContact Form 7に確認画面を追加できるプラグイン「Contact Form 7 add confirm」をご紹介します。

 

Contact Form 7 add confirmについて

このプラグインは、とても簡単に確認画面機能を追加できるので使われていらっしゃる方も大変多いのではないでしょうか?このプラグインの長所は

・とても簡単に利用できる

・フォームのタグ修正はほんの少しですむ

・確認画面に「戻る」ボタンを追加できること。

です。

 

作者さんのご紹介

このプラグインはアイティーエー株式会社のゆいちさんが制作され無償配布されています。詳しい説明はゆいちさんの記事をご確認ください。

Contact Form 7に確認画面をものすごく簡単に付けられるプラグイン

 

ご注意事項

この作業は、「Contact Form 7」の設定を済ませた上でフォームからメールを送信可能な状態にしている必要があります。

「Contact Form 7 add confirm」と「Contact Form 7」の開発者は別の方です。どちらかのプラグインのアップデートなどで正常に動作しなくなることも十分想定されます。この記事を基にプラグインを利用する際は自己責任で利用して下さい。

 

Contact Form 7 add confirmのインストール

インストールも簡単です。管理画面から「プラグイン」-「新規追加」-「Contact Form 7 add confirm」で検索します。画面に表示されたらインストール、有効化で完了です。

 

コンタクトフォームの編集

さて、プラグインのインストールが完了したら、実際に使用してきましょう。コンタクトフォームを編集します。プラグインをインストールしただけでは、プラグインの機能は反映されません。以下の状態になっています。

コンタクトフォームを編集する必要があります。といってもとても簡単です。以下の三行に差し替えるだけです。

[confirm “確認画面へ”]

[submit “送信する”]

[back “編集し直す”]

 

画面確認

設定に問題なければ以下の通りに画面が遷移します。

入力時

 

確認画面

 

 

送信完了しました。

 

ここまでcontact form 7をモディファイしてきました。フォームの編集画面は以下の通りです。

<div class="table-res-form">

お名前 <span class="requied">必須</span>
[text* your-name placeholder "例)ALEX"]

メールアドレス <span class="requied">必須</span>
[email* your-email placeholder "例)alex@alexandcompany.net"]

メールアドレス(再入力)<span class="requied">必須</span>
[email* your-email_confirm]


メッセージ本文<span class="requied">必須</span>
[textarea your-message x4]

[confirm "確認画面へ"]
[submit "送信する"]
[back "編集し直す"]

</div>

 

また、style.cssの追加部分は以下の通りです。

.table-res-form .requied {
    font-size: 0.8em;
    color: #FFF;
    display: inline-block;
    padding: 0.3em 0.3em 0.2em;
    background: red;
    border-radius: 2px;
    margin-bottom: 8px;
}
.wpcf7 input[type="submit"]:hover {
 box-shadow: 0 0 1px rgba(0,0,0,.2) inset;
}

 

まとめ

contact form 7にプラグイン 「Contact Form 7 add confirm」を追加しました。

ありがとうございました。

 

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

 

WORDPRESS | Contact Form 7でお問い合わせの目標設定

みなさんこんにちはALEXです。ただいまEFO向上キャンペーンを中です。これまで3件の記事を執筆いたしました。

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

今回はContact Form 7を使用して、ユーザーからお問い合わせをいただいた時、このアクセスをGoogleアナリティクスで追跡する方法をご紹介します。以前、Googleアナリティクスの解析で申し込みフォーム送信後のサンクスページが表示されたとき目標達成としてカウントできる方法をお伝えしました。

Googleアナリティクスのアクセス解析 | 目標到達プロセス

この記事はお問い合わせにContact form 7を使用しない設定でした。Contact form 7 ではサンクスページは表示しない設定です。送信完了時にメッセージが表示されるだけです。ですので今回は、Contact form 7でフォーム送信完了のアクションをGoogleアナリティクスでトレースできるようになりましょう。そのためには」GoogleアナリティクスとContact Form 7を設定する必要があります。

 

Googleアナリティクスの設定

Googleアナリティクスにログインしましょう。「コンバージョン」-「目標」ー「目標到達プロセス」をクリックします。目標登録を促されますので、「目標を設定」をクリック。

次の画面で「新しい目標」をクリック。


後々わかりやすくするために、わかりやすい名前を設定しましょう。ここでは、「問い合わせ送信完了」としています。タイプは、目標を選択します。

「続行」をクリック。名前は「お問い合わせ送信完了」とし」「続行」をクリック。タイプは「到達ページ」とします。

「到達ページ」に「/contact_sent/」を疑似ページとして入力します。このページにアクセスがあったと仮定してアクセスデータを蓄積します。「目標を作成」をクリックすればGoogle Analyticsの設定は完了です。

 

Contact Form 7の設定

次にWordpressの設定を行います。管理画面から「コンタクトフォーム」をクリック。すでに作成したフォームを呼びだします。右はしのタブに「その他の設定」を選び以下のタグを入力してください。

on_sent_ok: “ga(‘send’,’pageview’,’/contact_sent/’);””

これでフォーム送信時に疑似的なページにアクセスしたことをGoogleアナリティクスに通知します。

 

 まとめ

上記の作業を行うことで、Contacct From 7でフォーム送信した場合に、Googleアナリティクスでカウントすることができるようになります。

次回は、

「Contact Form7 の確認画面を追加する」をお届けします。ありがとうございました。

 

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

 

 

 

WORDPRESS | Contact Form7 フォームのレイアウトを改良する

みなさんこんにちはALEXです。ただいまEFO改良キャンペーン中です。日々、ブログ更新に合わせ当社ブログサイトのフォームを改良していきますので、リアルタイムで使い勝手を試してください。

WORDPRESS | Contact Form7 メールアドレスの再入力チェック 

前回は、メールアドレスの再入力確認まで行いました。

そうはいっても、Contact form 7 をデフォルト画面で使うと、ちょっとEFOとは言えないような気がしますね。そこで、今回は以下の三つの改良を行いフォームのデザインを改良します。

・必須項目を目立たせる

・フォームにプレースホルダーを設置する

・オンカーソルで色を変化させる

では始めましょう。

 

必須項目を目立たせる

デフォルトの必須項目は「お名前(必須)」となっています。これでは必須なのか必須じゃないのかわからない!ということで「必須」の文字を際立たせましょう。

まずコンタクト画面の編集画面で以下の通りにラベル部分を変更します。「お名前」「メールアドレス」「メールアドレス(再入力)」「メッセージ本文」を以下の通り入力します。この部分をsytle指定しますので、table-res-formというクラス名を定義します。

<div class="table-res-form">

お名前 <span class="requied">必須</span>
[text* your-name]

メールアドレス <span class="requied">必須</span>
[email* your-email]

メールアドレス(再入力)<span class="requied">必須</span>
[email* your-email_confirm]


メッセージ本文<span class="requied">必須</span>
[textarea your-message x4]

[submit "送信"]

</div>

 

style.cssに以下のタグを設置します。

.table-res-form .requied {
    font-size: 0.8em;
    color: #FFF;
    display: inline-block;
    padding: 0.3em 0.3em 0.2em;
    background: red;
    border-radius: 2px;
    margin-bottom: 8px;
}

 

上記の設定を行うと、画面表示は以下のように修正されます。

 

フォームにプレースホルダーを設置する

次は各入力フォームにプレースホルダーを表示させましょう。プレースホルダーとは、フォーム内に表示されている説明文のことです。ユーザーがフォームにカーソルを合わせるか、文字列を入力した時点で消えます。

コンタクトフォームの編集画面に入って、各項目欄を以下のように変更します。

<div class="table-res-form">

お名前 <span class="requied">必須</span>
[text* your-name placeholder "例)ALEX"]

メールアドレス <span class="requied">必須</span>
[email* your-email placeholder "例)alex@alexandcompany.net"]

メールアドレス(再入力)<span class="requied">必須</span>
[email* your-email_confirm]


メッセージ本文<span class="requied">必須</span>
[textarea your-message x4]

[submit "送信"]

</div>

 

style.cssを修正する必要はありません。上記の設定を行うと、プレースホルダーが以下のように反映されます。

 

オンカーソルで色を変化させる

次に入力項目にカーソルを乗せた時に色が変化するように設定します。Style.cssに以下のタグを追加します。

 

.wpcf7 input[type="submit"]:hover {

box-shadow: 0 0 1px rgba(0,0,0,.2) inset;

}

 

この設定でオンカーソル時にカラーが変わります。

 

3機能追加後の編集画面とstyle.css

・必須項目を目立たせる、フォームにプレースホルダーを設置する、オンカーソルで色を変化させる

 

上記の三つの機能を追加した場合のフォームの編集画面は以下の通りです。

 

<div class="table-res-form">

お名前 <span class="requied">必須</span>
[text* your-name placeholder "例)ALEX"]

メールアドレス <span class="requied">必須</span>
[email* your-email placeholder "例)alex@alexandcompany.net"]

メールアドレス(再入力)<span class="requied">必須</span>
[email* your-email_confirm]


メッセージ本文<span class="requied">必須</span>
[textarea your-message x4]

[submit "送信"]

</div>

 

そして、style.cssに追加するタグは以下の通りです。

.table-res-form .requied {
    font-size: 0.8em;
    color: #FFF;
    display: inline-block;
    padding: 0.3em 0.3em 0.2em;
    background: red;
    border-radius: 2px;
    margin-bottom: 8px;
}
.wpcf7 input[type="submit"]:hover {
 box-shadow: 0 0 1px rgba(0,0,0,.2) inset;
}

 

上記の二つをコピペして頂いても結構です。

ただし、テーマによってはこの記事の通りに表示されない可能性がありますので注意してください。

 

まとめ

今回は、EFOのためにContact Form 7に

・必須項目を目立たせる

・フォームにプレースホルダーを設置する

・オンカーソルで色を変化させる

を導入しました。

そこそこ、使いやすくなりつつあります。

 

次回は

「Contact Form7 Googleアナリティクスの目標に設定する」について解説します。

 

ありがとうございました。

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

 

 

WORDPRESS | Contact Form 7でEFO

みなさんこんにちはALEXです。

ウェブマーケティングにとってお問い合わせページの送信数の向上は再重要課題です。とランディングページからいかにお問い合わせページに誘導するか、お問い合わせページでいかに離脱率を押さえ「お問い合わせ」送信をしていただくかがウェブサイトのもっとも重要な動線です。現在はEFO(Entory Form Optimization)という用語も使われて各社有料のフォームページを提供しています。

当社も実際にEFOがコンバージョン率に直結する重要な指標であり、当社のクライアント様にもこの部分はもっとも投資費用対効果が高い部分であることをご説明して改善をご提案しています。

ですが、ここで問題があります。

 

有料EFOサービスの問題点

「どこのEFOサービスも結構お高い」

「どこのEFOサービスも似たり寄ったり」

それにさらに悩ましい問題があります。当社が推進しているのはウェブサイトのDIY化です。そのためにはウェブサイトはWORDPRESSでの制作をご提案しています。構築当初は社内にインハウス制作に対応できるエンジニアがいなくても、導入部分を外注で対応し実務を通してスキルアップいただき、自社で制作できるように支援させていただいております。ですので、お問い合わせページは基本的にContact Form7を推奨しています。

今回、とある案件でContactform7を使用したお問い合わせページをリニューアルしてEFOを改善することになりました。某EFOベンダーから売り込みを受けていたこともあり、このEFOフォームを導入することとして準備をしていたのですが、なんと。

Contact form 7と連携した実績がない?

Contact form 7と連携したことはないので、タグを送るからそっちで組み込んでくれ、というなんとも信じがたい連絡がありました。

というのも、現在のEFOベンダーはJQueryを使用しているために、JapascirptをHTMLに埋め込んで使っています。なので、contact form 7 ,Wordpressと連携してこなかったのだと推察できます。

えー?困るよそれじゃリアルタイムバリデーションできないし、フォームは基本Contactform7で構築しているし今更ゼロから始められないという深刻な問題にぶつかってしまいました。

 

自分で作るしかない

こうなったら、Contactform7を使ったフォームをカスタマイズしてDIYでEFOを改良するしかない!と思い立ちました。

デフォルトでは味もそっけもないフォームです。とてもではありませんが、有料サービスに仕えた代物ではありません。ですが、プログラムなのでCSSとJsを改良すれば、しっかりしたフォームになりEFOを向上させることが出来るはずです。

今後、改良の経緯を本ブログに連載形式でアップしてまいります。今回はまず決意表明といったところです。

有難うございました。

 

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する