Как интегрировать mixpanel с angular2

Question

В index.html Я добавил код mixpanel от https://mixpanel.com/help/reference/javascript.

В моей

export class MixpanelService { 

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

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

Получение следующей ошибки:

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

Может кто-нибудь помочь мне в этом.

Answer 1

• Установите Типики на глобальном уровне, который поможет нам установить определения библиотеки JS. НОЙ установка -g типизации
• Установите mixpaneljs НПХ установить mixpanel --save-DEV
• запустить следующую команду для создания набора текста defincation в typings.json
  типизации установить дт ~ mixpanel --save --global

В вашем mixpanelService.ts файл

импорта * в качестве Mixpanel из "mixpanel";

это.mixpanel = Mixpanel.default.init (токен, свойства);

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> 

Между тегах «тело».

Сохраните все изменения, загрузите веб-приложение (npm start/npm run/ng serve, если хотите) , а затем перейдите на страницу mixpanel.com, или перейдите на вкладку просмотра в реальном времени, и должно произойти магия.

Надеюсь, что работает!

Answer 3

Если вы пытаетесь интегрировать mixpanel в свой угловой проект, это может сэкономить ваш день. Angular mixpanel

У этого есть хорошая документация об установке и использовании его с вашим кодом.

Answer 4

Еще один хороший вариант - angulartics2. Он поддерживает MixPanel и другие службы отслеживания.

Answer 5

Вы должны включить сценарий mixpanel в вашем index.html, но опускаем

mixpanel.init('token').

Тогда в main.ts о app.component.ts вы можете объявить библиотеку mixpanel в качестве переменной:

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.