[英]How to integrate mixpanel with angular2
在index.html中,我添加了https://mixpanel.com/help/reference/javascript中的 mixpanel代碼。
在我的
export class MixpanelService {
constructor() {
mixpanel.init("sdfsdf", '', "development");
}
public track() {
mixpanel.track('click', {pageName:'login'})
}
}
收到以下錯誤:
Cannot find name 'mixpanel'.
mixpanel.init("sdfsdf", '', "development");
有人可以幫我這個。
在您的mixpanelService.ts文件中
import * as Mixpanel from "mixpanel";
this.mixpanel = Mixpanel.default.init(token, properties);
首先, 為瀏覽器安裝mixpanel。 這個很重要。
npm install --save mixpanel-browser
安裝相應的類型:
npm install --save @types/mixpanel
並將您的trackingscript添加到index.html 而不使用 mixpanel.init()
:
<!-- start Mixpanel -->
<script type="text/javascript">
(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]);
</script>
<!-- end Mixpanel -->
我強烈建議您創建自己的服務,這可能非常簡單:
import { Injectable } from '@angular/core';
import * as mixpanel from 'mixpanel-browser';
@Injectable({
providedIn: 'root'
})
export class MixpanelService {
/**
* Initialize mixpanel.
*
* @param {string} userToken
* @memberof MixpanelService
*/
init(userToken: string): void {
mixpanel.init('your-project-token');
mixpanel.identify(userToken);
}
/**
* Push new action to mixpanel.
*
* @param {string} id Name of the action to track.
* @param {*} [action={}] Actions object with custom properties.
* @memberof MixpanelService
*/
track(id: string, action: any = {}): void {
mixpanel.track(id, action);
}
}
注意,我從userAuthService調用init()
函數,但你可以做任何你想做的事情。 只需確保在開始跟蹤之前調用init()
。
然后,從其余代碼中,您可以使用:
constructor(private mixpanelService: MixpanelService) { }
someFunction() {
this.mixpanelService.track('Some action', {
customPropertyOne: 'customValueOne',
customPropertyTwo: 'customValueTwo'
});
}
您必須在index.html中包含mixpanel腳本,但省略
mixpanel.init('token').
然后在main.ts o 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數據混淆。
另一個不錯的選擇是angulartics2 。 它支持MixPanel和其他跟蹤服務。
希望這有效。
如果您按照Mixpanel.com頁面提供的說明進行操作,則應將大代碼段粘貼到“Head”標記之間的aplication的index.html中。
現在,仔細檢查腳本的最后一部分mixpanel.init(“TOKEN”); 被項目中的替換。 通過單擊齒輪圖標(在Mixpanel的報告或<>頁面中)確保這一點,然后單擊“管理”選項卡並復制粘貼“令牌”代碼,然后將其替換為您在索引中復制的代碼html的。 如果您不是項目的所有者,可以在同一位置單擊“邀請人員”,然后按照相同的步驟操作。
現在,為了跟蹤某些內容,比方說,每當有人進入目標網頁時,您都可以粘貼以下代碼:
<script type="text/javascript">
mixpanel.track("Page Loaded", { "Page Name": "Landing Page"});
</script>
在你的“身體”標簽之間。
保存所有更改,加載Web應用程序(npm start / npm run / ng serve),然后轉到(或重新加載)mixpanel.com頁面,單擊實時視圖選項卡,應該發生魔術。
希望有效!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.