mixpanelとangular2を統合する方法

Question

index.htmlで、mixpanelコードをhttps://mixpanel.com/help/reference/javascriptから追加しました。誰かがこの上で私を助けることができる

Cannot find name 'mixpanel'. 
    mixpanel.init("sdfsdf", '', "development"); 

：私の

export class MixpanelService { 

    constructor() { 
    mixpanel.init("sdfsdf", '', "development"); 
    } 

    public track() { 
    mixpanel.track('click', {pageName:'login'}) 
    } 
} 

で

は、次のエラーを取得します。

Answer 1

• タイピングをグローバルレベルでインストールすると、JSライブラリの定義をインストールするのに役立ちます。 -gタイピング
• が NPMがインストールmixpaneljsをインストール NPMをインストールmixpanel --save-devの
• 
  タイピングがインストールDT〜mixpanel --save --global typings.jsonにタイピングのdefincationを作成するには、以下のコマンドを実行します。あなたのmixpanelService.tsで

"mixpanel" からmixpanelとして

インポート*ファイル。

this.mixpanel = Mixpanel.default.init（token、properties）;

Answer 2

うまくいけばうまくいきます。

Mixpanel.comページの指示に従っている場合は、アプリケーションのindex.htmlに "Head"タグの間に大きなスニペットを貼り付ける必要があります。

ここで、スクリプトの最後の部分であるmixpanel.init（ "TOKEN"）;あなたのプロジェクトにあるものに置き換えられます。 歯車アイコン（レポートまたは<> Mixpanelのページ）をクリックして、「管理」タブをクリックして、「トークン」のコードをコピーして貼り付けてから、コピーしたindex.html。プロジェクトのオーナーでない場合は、同じ場所にある[招待する]をクリックして、同じ手順に従います。あなたの「ボディ」タグの間

<script type="text/javascript"> 
    mixpanel.track("Page Loaded", { "Page Name": "Landing Page"}); 
    </script> 

：何かを追跡するために、今すぐ

は、誰かがランディングページに入るたびに、このコードを貼り付けることができ、言うことができます。

ウェブアプリをロードしてから（または起動してください） mixpanel.comページに行き、ライブビュータブをクリックしてください魔法

うまく動作します！

Answer 3

角度プロジェクトでmixpanelを統合しようとすると、これで1日を節約することができます。 Angular mixpanel

あなたのコードにインストールして使用するための良いドキュメントがあります。

Answer 4

もう1つの良いオプションはangulartics2です。それはMixPanelと他の追跡サービスをサポートします。あなたのindex.htmlをでmixpanelスクリプトが含まれていますが、oをmain.tsに続いて

mixpanel.init('token').

を省略しなければならない

Answer 5

は、変数としてmixpanelライブラリを宣言することができapp.component.ts：

import { enableProdMode } from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment'; 
declare const mixpanel: any; 

if (environment.production) { 
    enableProdMode(); 
} 

mixpanel.init(environment.mixpanel.apikey); 
platformBrowserDynamic().bootstrapModule(AppModule); 

私は複数のMixpanelプロジェクトを使用して、devデータとprodデータが混在しないようにします。