2017-09-22 1 views
0

私はいくつかのフォームとサービスコールを使ってアプリケーションを作っています。私は、Adobeのアナリティクスでボタンのクリックを追跡できるようにしたいと考えています。私はユーティリティメソッドを持っています..それを "trackClicks()"と呼んでみましょう。カスタムボタンを作成してアプリ全体に使用すると、カスタムのボタンコンポーネント(Angular 2/4 with analytics)

<button (click)="submitForm()"> 

も実行されます(trackClicks()も実行されます)。

また、trackClicks()関数を呼び出すディレクティブや、それを呼び出すカスタムイベントを作成することはできますか?

答えて

0

あなたはそれのためにディレクティブを作るために優れています。

@Directive({ 
    selector: "[adobe-analytics]" 
}) 
export class AdobeAnalytics{ 

    @HostListener("click", ["$event"]) 
    public onClick(event: any): void { 
     //handle your track clicks things here 
    } 
} 

とテンプレートで

:私はそれを行うと(クリック)イベントに機能を追加した場合

<input adobe-analytics type="button" /> 
+0

omeralperこんにちは..あなたに感謝...私は.. ..フォローアップの質問を持っている1最初に実行されますか?それらを同期させる方法はありますか? –

0

rxjsの例。お役に立てれば。

// Code goes here 
 

 
window.onload = init; 
 

 
function init() { 
 
    
 
    const trackbtn = document.querySelector('#trackbtn'); 
 
    const counter = document.querySelector('#counter'); 
 
    
 
    const observable =Rx.Observable.fromEvent(trackbtn, 'click'); 
 

 
    const subscriber = observable 
 
    .scan((acc,x) => acc+1,0) 
 
    .subscribe(x => counter.innerHTML = x); 
 
    
 
    
 
    
 
}
<script data-require="[email protected]" data-semver="4.0.6" src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script> 
 
<button id = 'trackbtn'>Click me</button> 
 
<span id = 'counter'>0</span>