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

寺子屋 type-E

日々のあれやこれ

「Becky! 」でHTMLメールを表示させた時に、cssで指定した色が反映されなくてちょっと困った話。

HTMLメルマガのマークアップ中に気をつけなきゃいけないことのメモ。

Becky! 」という、Windows用のメールソフトがあるのですが、それで表示チェックをしたときに、なぜかcssで指定した色が反映されなくて、けっこう困りました。

 

で、結論から言うと、「Becky! 」は、#000のような記述の省略に対応していないため、ちゃんと、#000000のように、記述してあげないと色が反映されないようです。

 

普通のブラウザチェックだけだと見落とすことってあるんですね。

気をつけましょう。

FacebookピクセルでAnalyticsのイベントトラッキングタグみたいに、コンバージョンとる方法。

Facebookピクセルを使えば、Facebook広告からサイトに流入したユーザーが、サイト内の購入ボタンをクリックするのを計測できるという話を聞いて。

 

もしそれが可能ならば、Analyticsのイベントトラッキングタグでは、購入ボタンを押したユーザー全体を計測し、Facebookピクセルでは、Facebook広告からの流入者が購入ボタンを押したかどうか、というふうに役割を分けることができるので便利そうですよね。

実際に出来たので、やり方を書きます。 

(07/11追記)Facebookピクセルは稼働したのですが、なぜかイベントタグの方が動かなくなってしまったので、いったん保留。

 

下記の通りです。

  1. <head></head>の間に、共有タグをコピペ。
  2. イベントトラッキングタグの後に、標準イベントコードを記述。
    <a href="" target="_blank" onclick="ga('send','event','xxx','xxx','xxxx');fbq(‘track’, ‘Purchase’, {value: ‘1296.00’, currency: ‘JPY’});"></a>

以上です。とっても簡単ですね。。

 

以下、Facebookピクセルってそもそもどんなものかわかってなかったので、調べたことをまとめてみました。 

 

コンバージョントラッキングピクセルじゃダメなの?

Facebookピクセルは、コンバージョントラッキングピクセルの新バージョン。
2015年の10月にリリースされた機能なので、実例が少ない。

ただ、公式サイトには、

コンバージョントラッキングピクセルは、2016年後半に廃止されます。コンバージョンの追跡、最適化、リマーケティングには、Facebookピクセルの利用をおすすめします。詳しくはこちらをご覧ください。

 とあり、今のうちに対応してしまいたいので、調べることにしました。

 

Facebookピクセル」ってなんなの?

名前についている「ピクセル」とは1px×1pxの□のことです。(たぶん)

この□は、この中にコンバージョンをとるための情報をいれとく箱のようなもので、""普通は""設置したリンクの横に挿入されたりします。この方法はa8とかでもやってた気がします。

 

なんで名前を変えたの?

それまで「ウェブカスタムオーディエンスピクセル」「コンバージョンピクセル」という、それぞれ独立した機能があったのですが、その二つの機能を統合したのでFacebookピクセルという名前に変わったみたいです。

 

「コンバージョンピクセル」は広告の効果(興味のありそうなユーザーを)計測するためのもので、ウェブカスタムオーディエンスピクセル」は、リターゲティング(興味のありそうなユーザーに広告を再配信したりする)のために使うものです。

 

Facebookピクセルでは、1つのタグを埋め込むだけで、広告効果の計測も再配信もできるようになりました。

 

Facebookピクセルのコードはどうなってるの?

「コンバージョンピクセル」「ウェブカスタムオーディエンスピクセル」は、コード上も統合されました。

配布されているFacebookピクセルの(共通)コードを貼り付けるだけだと、ウェブカスタムオーディエンスピクセル(広告をクリックしたユーザーに広告を再配信)」の機能しか使えないので、
何かしらのコンバージョンをとりたい場合は、コードに「コンバージョンピクセル」の記述を加えなければいけません。

それが、「標準イベントコード」と呼ばれるもので、種類がいくつかあります。

 

標準イベントコード(コンバージョントラッキングタグ)の種類

一番私が悩んだ部分です。Facebookから流入して購入したユーザーに対して、どのタグを使うのがベストなのかよくわからなかったので。それぞれのタグの説明がにててわかりづらいんですよね。

 

名前説明イベントコード
ViewContent キーページビューをトラッキングします(例: 製品ページ、ランディングページ、または記事) fbq(‘track’, ‘ViewContent’);
Search あなたのウェブサイトで検索をトラッキングします(例: 製品検索) fbq(‘track’, ‘Search’);
AddToCart アイテムがショッピングカートに追加されるタイミングをトラッキングします(例: [カートに追加] ボタンのクリック/ランディングページ) fbq(‘track’, ‘AddToCart’);
AddToWishlist アイテムのウィッシュリストへの追加をトラッキングします(例: [ウィッシュリストに追加]ボタンのクリック/ランディングページ) fbq(‘track’, ‘AddToWishlist’);
InitiateCheckout ユーザーによるチェックアウトフローの入力のタイミングをトラッキングします(例: [チェックアウト]ボタンのクリック/ランディングページ) fbq(‘track’, ‘InitiateCheckout’);
AddPaymentInfo 支払い情報がチェックアウトフローに追加されるタイミングをトラッキングします(例: 請求情報のクリック/ランディングページ) fbq(‘track’, ‘AddPaymentInfo’);
Purchase 購入またはチェックアウトフロー完了のタイミングをトラッキングします(例: [ありがとうございました]ページまたは確認ページの表示) fbq(‘track’, ‘Purchase’, {value: ‘0.00’, currency: ‘USD’});
Lead ユーザーがあなたの提案に関心を示したタイミングをトラッキングします(例: フォームの送信、トライアルへの登録、価格ページの表示) fbq(‘track’, ‘Lead’);
CompleteRegistration 登録フォーム完了のタイミングをトラッキングします(例: 購読完了、サービスに登録) fbq(‘track’, ‘CompleteRegistration’);

 

Analyticsのイベントトラッキングタグでは、どんな情報を計測するのか細かく設定出来ましたが、Facebookの関数は、送れる情報は決まっているようですね。

 

アイテムが、商品に追加されたのを計測するには、AddToCart。

ウィッシュリストに追加したのを計測するには、AddToWishlistを記述してあげます。

 

確実に購入したユーザーを計測するには、ご購入ありがとうページに、「Purchase」入りのコードを設置するのが、良さそう。valueに商品の値段を入れて、通貨を設定(初期だと米ドル・USD)を渡すようになってるので、売り上げも集計してくれそうですね。

具体的な設置方法は下記です。

 

コンバージョンタグ入り、Facebookピクセル設置手順

  1. 標準イベントコードを、

    fbq('track', "PageView");

    のコードの下に記述
  2. 購入の場合、標準イベントコードの値(商品の値段を入れる)と通貨の設定をその国のものに書き換える
  3. <head></head>の間に貼り付ける

簡単ですね。

 

購入の時は、初期だと0円・USドルの設定になってるので、

fbq(['track', 'Purchase', {value:'0.00', currency:'USD'}]);

 

1200円・日本の商品の場合、

fbq(['track', 'Purchase', {value:'1200.00', currency:'JPY'}]);

をコードに入れてやる。

.00っているのかな?よくわからないのでとりあえず入れた。

 

通貨のISO 4217標準3文字アルファベットコードは↓で調べる。(Excelの資料をダウンロード)

Lists – ISO Currency

 

1ページの1商品だけのページなら上のコードでOK。複数商品がある場合、「ダイナミックコンバージョン値」というものを使います。

開発者ページが英語でやる気失ったので割愛。

 

下記に説明アリ

コンバージョンに対して値を設定したり通貨を変更したりするにはどうすればよいですか。 | Facebookヘルプセンター | Facebook

 

 

Facebookピクセルが正常に稼働しているか確認する

ピクセルが正常に機能しているかを確認するには、ピクセルが実装されたウェブページに移動します。正常に機能している場合、ピクセルからFacebookに情報が送信されるため、広告マネージャの[コンバージョントラッキング]タブでアクティビティを確認できます。機能している場合、ピクセルのステータスは[アクティブ]になります。

なお、[アクティビティ]列に表示されるコンバージョンイベント数には、広告に起因していないものもすべて含まれます。広告に起因するコンバージョンを確認するには、レポートを参照してください。

 

 

機能していない場合(ピクセルのステータスが「未認証」の場合)、Facebookピクセルヘルパーを使用して問題を解決します。ただし、このツールはChromeブラウザでのみ動作します。ピクセルヘルパーをインストールすると、小さいアイコン がアドレスバーの横に表示されます。次に、Chromeブラウザで自社のウェブサイトに移動し、ピクセルヘルパーアイコンをクリックします。

 

 

ページで見つかったピクセルや、そのピクセルが正常にロードしたかを知らせるポップアップが現れます。ピクセルが正常にロードしなかった場合、失敗した理由についてのヒントが表示されます。

 

よくあるエラーとトラブルシューティングの方法:

 

ピクセルがロードされない: Facebookピクセルがサイトにあるのに作動しない場合です。多くはコード内のエラーが原因ですが、ボタンをクリックするなどの動的なイベントでピクセルが作動するようになっていることが原因の場合もあります。そのような場合は、ボタンをクリックするとエラーが消えます。

ピクセルが何度も起動する: 同じIDとイベント名のピクセルFacebookに何度も送信される場合です。これは典型的なエラーで、Facebookでは1つのイベントとして数えます。

ピクセルのロードに時間がかかる: これはピクセルの軌道に長い時間がかかることを示すもので、ピクセルの配置場所が原因であると考えられます。ピクセルコードは、ウェブページの一番上、なるべくHTMLの閉じタグ</head>のすぐ前に配置することをおすすめします。これで、そのページがロードする際に一番にロードするようになります。ページの下部に配置すると、コンバージョンを追跡できないこともあります。

ピクセル以外にもコンバージョンがある: この原因はコンバージョンイベントが複数あることで、最適化や追跡が不十分になります。コンバージョンピクセルは複数の広告やキャンペーンで再利用してください。1つのコンバージョンピクセルを、追跡するすべてのページやイベントに使用することをおすすめします。利用者とウェブサイトとの交流(ボタンのクリックなど)に基づいて第2のコンバージョンイベントが起こる場合は、この警告を無視してかまいません。

 

参考ページ

コンバージョントラッキングで広告の成果を確認するにはどうすればよいですか。 | Facebookヘルプセンター | Facebook

Facebookピクセル - 標準イベントの追加 | Facebook for Business

 

 

おおまかな設置手順参考ページ

Facebookピクセルによるコンバージョン測定 | Facebook for Business

Facebookピクセル - 標準イベントの追加 | Facebook for Business