13

Facebook ピクセル トラッキングを Angular アプリに追加しようとしています。

最初のステップとして、ベースの Facebook ピクセル コードを次のようにベースの html ファイルの 1 つに追加しました。

!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');

pixel を初期化するとすぐにfbq('init', '1234567890');、PageView イベントが暗黙的に送信されていることがわかりました。

これは、平均的な標準アプリにとってある程度は便利ですが、URL 構造が fbq によって適切に処理されない Angular などのフレームワークを扱う場合には望ましくない動作です。例えば。www.hi.com/#/helloとして登録されていwww.hi.comます。

この問題に遭遇した人はいますか、または Facebook Pixel を Angular と統合するためのより良い方法を見つけましたか? Angular と FBQ に言及しているいくつかの例と、やや時代遅れの Angular プラグインを見てきました。誰もこれについて言及していないようです。

4

2 に答える 2

14

Facebook ピクセルはpushState()、ブラウザー履歴 API のメソッドをリッスンし、PageView イベントを自動的に追跡しているようです。

これを無効にするには、オブジェクトでdisablePushStateパラメーターをに設定します。truefbq

したがって、コードは次のようになります。

!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');

fbq('init', '1234567890');
fbq.disablePushState = true;

その後、Angulartics Facebook Pixel プラグインwindow.fbq('track', 'PageView');を使用するか、コードで手動で呼び出すことができます。

これは文書化されていない方法であり、将来的に機能することは保証されていないことに注意してください! うまくいけば、Facebook は将来これを行うための文書化された方法を提供します。クレジットは、「Josh」のこのブログ投稿に移動します。

2017 年 7 月の更新。これは Facebook のブログで対処されているので、正式にサポートされていると思います: Tagging Single Page Applications with the Facebook Pixel。

于 2016-07-01T11:20:19.017 に答える
1

FB ピクセルを使用して追跡する場合は、angularjs コンポーネントをお勧めします。

角度学 facebook ピクセル

ページ トラッキングは、Angulatrics によって自動的に実行されるため、気にする必要はありません。

npm install angulartics-facebook-pixel

次に、アプリの依存関係として angulartics.facebook.pixel を追加します。

require('angulartics')

angular.module('myApp', [
  'angulartics', 
  require('angulartics-facebook-pixel')
]);

参照: https://github.com/angulartics/angulartics

お役に立てば幸いです。

于 2016-04-11T21:59:05.463 に答える