読者です 読者をやめる 読者になる 読者になる

アレっぽいやつ

web系エンジニアがカチャカチャ書く

Facebookキャンバス広告の特徴

ざっくり説明

Facebookキャンバス広告とは

Facebookの画面上で作成する、ランディングページみたいなもの。

モバイルのFacebook広告のリンク先として使用する。

モバイル前提なので、表示速度(10倍って書いてる)や見た目が最適化されている。

ja-jp.facebook.com

主な特徴

・無料

Facebookの画面上で作成する

・PCでは表示できない(プレビューすらできない)

Facebookのサーバー上に置くので、サーバー料金がかからない

・キャンバスを表示するまでの時間が短い(標準の10倍らしい)

 

作成

ページ管理>投稿ツール> キャンバス から作成画面にいける(2017年5月現在)

ページの構成要素

 -ボタン

 - カルーセル

 - 写真(画像)

 - テキスト

 - 動画

 - ヘッダー

を組み合わせて作成する。

f:id:pechokan:20170516230359p:plain

テーブルを作成したり、細かい調整はできないので、

そういうのことやりたいときは画像を組み合わせて使えばいいと思う。

SEOも関係ないし、モバイル広告経由でしかアクセスできないので、

コピペすることもあまりないはずである。

 

f:id:pechokan:20170516232205p:plainf:id:pechokan:20170516232237p:plain

f:id:pechokan:20170516232231p:plainf:id:pechokan:20170516232240p:plain

 f:id:pechokan:20170516232220p:plain

 

プレビュー

先も貼ったけどここでいくつか見れる。

ja-jp.facebook.com

まとめ

こんな人におすすめ

・広告をだしたい

スマホのページがいけてない(見た目、表示速度)

・既存のウェブサイトに手を加えるのはしんどい

・新しくページを作成するのがしんどい

 

Facebook キャンバスは色々制限はあるものの、

手軽にできるし、作成自体は誰でもかんたんにできるようにつくられてるから、

とりあえず一度触ってみてもいいと思う。

自社のサイトで実験的にやってみて、広告の効果が良ければPCのランディングページを作ったり、リスティング広告をだしてみるなど、初心者におすすめ。

 

海外と比べて日本であまりFacebook Canvas を見かけないのは、なんでだろう。

中途半端だからかな。

 

Facebook広告の詳しい説明はまた今度。

FacebookのOGP画像サイズについてまとめる

Facebookでシェアされたときに表示される画像を

<meta property="og:image" content="https://example.com/exmample-image.png">

で設定した場合の、サイズについてまとめる(下記を参照)

developers.facebook.com

最低限守るべきこと

最小画像サイズ : 200 x 200ピクセル

最大ファイルサイズ : 8MB

最適化

アスペクト比 : 1.91:1
(PC,モバイル共通で、アスペクト比が違う場合はこのアスペクト比に切り取られる)

推奨画像サイズ 1200 x 630 以上 (600 x 315未満の画像だと大きい画像で表示されない)

f:id:pechokan:20170218133435p:plain

f:id:pechokan:20170218133724p:plain
引用:ベストプラクティス - シェア機能 - ドキュメンテーション - 開発者向けFacebook

ちなみに画像サイズのシュミレーションは

OGP画像シミュレータ | og:image Simulator

で確認できる。

注意点

og:image が正しく反映されているか、

https://developers.facebook.com/tools/debug/og/object/
で確認する。

(初心者向け)JavaScript, cssのキャッシュ削除できないとき

キャッシュを読み込んでいるせいで、CSSが反映されなかったり、JavaScriptのファイルが変な読み込まれ方をしたりすることがある。
原因はブラウザ側のキャッシュか、サーバー側でのキャッシュであることが多い。
開発を初めたばっかりの人だったり、デザイナーさんとかに、とりあえず試してほしいことを書く。

ブラウザ側でキャッシュを読み込まないようにする

ChromeのDeveloper Toolsで設定したり、Hard Reloadすることで毎回リセットされる。
読み込むときに、クエリを適当につけて毎回違うソースから読んでる感じにする方法もある。
調べたら、色々でるので、適当に試してもらいたい。

サーバーサイドでキャッシュを吐かないようにする

webサーバーにnginx を使っている場合を例に出すと、confファイルに

location ~ \.(css|js)$ {
  proxy_no_cache 1;
  proxy_cache_bypass 1;
  sendfile off;
}

って書いてreloadすれば、nginx が 〜.js, 〜.css に関して、キャッシュを返さないようになる。
もちろん、.(css|js)$ の正規表現を変更すれば、jsファイル,css以外にも適用される。

Apacheはこのページビューが多かったら書く。

※使っているframworkによっては、framewarkでキャッシュを管理してるものがあるので、 ↑で解決されないときは、さらにそのへんもチェックする必要がある。

自分で開発環境を作成するときに、サーバーの設定はとりあえず動けばいいみたいな人は、 ↑で書いたように、キャッシュを全部切ってもいいと思うが、
レスポンスが〜みたいな人は、ちゃんと設定してください。

一行一行の意味とかは下のサイトとかでまとめてくれてる人がいるので、参考に。

参考サイト

qiita.com

EFOとは?EFOを分解して、ちゃんと説明できるようになる

EFO(Entry Form Optimization)という言葉を自分でウェブサイト持ってたり、 ウェブ広告に携わってる人なら聞いたことあると思う。

普通に自分のウェブサイトを改修して行う場合もあれば、 外部ツールをつかうこともある。

とりあえず、 EFOをバラして書いてみる。

validation

入力内容をチェックすること。

例えば、制限以上に文字を入力されていたり、 数字のところにそれ以外のものをが入力されているのを弾いたりすること。 validationのパータンを列挙してみる。

htmlでチェック

emailアドレスの入力欄に

<input type="text">

じゃなくて、

<input type="email">

と書くことで、@の有無などをチェックできたりする。 他にも

<input type="text" maxlength="10">
<input type="text" required>

とか色々ある。

JavaScriptでチェック

かんたんに説明すると、 入力欄の編集したり、入力欄からフォーカスが離れたときに、 JavaScriptが動いて、入力内容を精査する。 入力内容に対して動的にチェックしたい場合などに有効。

例えば、開始日と終了日と入力させるときに、 前後が正しいかどうかチェックしたりできる。

サーバーサイドでチェック

入力内容を送信させてからチェックする方法。 JavaScriptやhtmlはユーザー側で書き換えられるので、 上記のvalidationをやっていても、 サーバーサイドでチェックするのは必須である。

ajaxでチェック

例えば、登録する名前がかぶっていないかどうかチェックするときは、 データーベースと照合する必要がある。 ajaxはページ遷移させずにデータの送受信ができるので、 何度も他のページ遷移で消える項目を再入力させる必要がなくなる。

auto complete

入力項目の補完機能。 validationと同じで、 htmlだけでやったり、ajaxでやったり色々できる。

EFOで一番やりたいこと

EFOは問い合わせフォームやECサイトの入力フォームで離脱率を下げることが目的である。 そのためには、

  • 入力項目が少ないこと
  • 入力が簡単に行えること
  • 入力エラーをすぐに判断できること

が重要である。

上記のことを念頭において、 EFOを考えてもらいたい。

非エンジニアが、cookieをフワッと理解するために

f:id:pechokan:20160925162407p:plain

ウェブマーケティングを専門としている企業でも、
教育の問題なのか、社員の定着率の問題なのか定かではないが、

「これはcookie単位なのでブラウザごとに〜」とかの会話が成り立たない時がある。

 

というわけで、フワッと理解しよう。

 

自分についてるcookieを確認する方法(chrome)

f:id:pechokan:20160925143930p:plain

  •   chromeでdeveloperツールを開く
    (windowsはF12, macの場合は command+option+i)
  • Applicationタブ、Storage, Cookiesの順で対象のURLに対する、
    そのブラウザが持っているcookieを確認できる

 cookieが持っている情報

上の画像のカラム名からわかるように

  • name
  • path
  • value
  • max-age, expire
  • secure
  • HTTPOnly

といった情報を持っており、ウェブサイトへアクセスするときに、
cookieもいっしょにリクエストを送信する。
その後、サーバー側でvalueを見て、ログイン状態を判断したりして、
ユーザー(クライアント)側にレスポンスを返す。

cookieを自分でつけてみる

cookiejavascript で追加、編集、削除ができるので、
chromeのdeveloperツールで追加してみる。 

chromeのdeveloper toolの console で
document.cookie = 'testName=testValue;max-age=99999999';

と入力すると

f:id:pechokan:20160925153158p:plain

f:id:pechokan:20160925153300p:plain

(反映されないときは、developer toolをもう一回開き直したり)

 

ちなみに

document.cookieとconsoleでうつと、
持ってるcookieを全部文字列として出せる。
これを分解して使ったりする。
(HTTPOnly がついている場合は、javascriptでアクセスできない)

cookieとsession

cookieはクライアントサイド、sessionはサーバーサイドに情報を残している」という表現を時々するが、例にあげると、

  1. ウェブサイトにアクセスするとき、cookieの情報をいっしょに送る
  2. サーバーはcookieの情報を見て、
    ユーザー情報などをデータベースから持ってくる
  3. ユーザーにユーザー情報などを持って、レスポンスを返す

cookieはクライアントサイドで情報を持っているため、
ユーザーが情報を書き換えることができることは ↑ で書いたが、
cookieに直接ユーザー情報を持たせているとどういうことになるか、
おおよそ想像がつくと思う。

もちろん、どうでもいい情報はcookieに直接書くこともある。

 

 

 

 

 

Facebookの投稿でOGPの変更が反映されないとき

ウェブサイトのOGPを変更したあと、
Facebookの投稿でうまくOGPが反映されない場合がある。

原因の一つにFacebook側で持っているキャッシュが古いままで、
それを更新すると解消される。

 

https://developers.facebook.com/tools/debug/sharing/

上記のURLで調べたいURLを入力すると、
Facebook側から見たウェブサイトの状況が確認できる。

https://developers.facebook.com/tools/debug/og/object/

またこのURLで

f:id:pechokan:20160925135701p:plain

URL入力後、「Fetch new scrape infomation」をカチカチしていくと、
古い情報をアップデートできる。
(何回も更新しないと反映されないときもある)

メディアを運用している会社や広告代理店でよく起こりそうな問題で、
OGPやFacebook以外のメディアに関しては後で書く。

 

追記:OGPの画像に関してはこちらを参照

pechokan.hatenablog.com