如何使用 javascript 或 angular 捕獲用戶活動

Question

我有一個任務是使用 angular 創建一個聊天機器人插件，並且該應用程序可以導入到其他網站框架。

有一個目標是我需要在頁面上（而不是在聊天機器人插件上）獲取用戶活動，例如如果用戶單擊/懸停任何特定標簽（ a標簽或img標簽），該標簽將發送到服務器

想象一下網站所有者在他們的網站中有這個代碼

<a class="view-products" target="_self" href="https://alfaprav.com/shop/"><span>Shop More</span></a>

當用戶單擊/懸停該標簽時，它將作為字符串發送到服務器

我已經遵循了幾個 stackoverflow 解決方案，但不適合我的需要。 這是最接近的解決方案http://jsfiddle.net/94dd343y/但我不知道如何在我的應用程序中實現它，是否需要將其插入到我的 angular 應用程序中，或者我需要新的.js文件。 任何想法都會很有幫助

編輯

這是這個插件的樣子

在此處輸入圖像描述

編輯 2

感謝朱利安現在我有這個代碼

  ngOnInit() {
    this.document.body.addEventListener('click', (e) => {
      // console.log(e.target);
      console.log(e.target);
      
    }, false);
    }

我得到了標簽，但是當用戶點擊正文時出現問題，它顯示了所有標簽，如何防止這種情況發生？

編輯 3

閱讀pooya的回答后，我將其更改為

const elements = this.element.nativeElement.querySelectorAll('div');
elements.forEach(element => {
  element.addEventListener('click', (e =>{
    console.log(e.target);
  }))
})

Answer 1

您可以將事件偵聽器添加到您打算遵循的標簽：

  <body>
    <a href="https://google.com/">google</a>
    <img src="https://i.imgur.com/zT36YJ3.jpg" />
    <script>
      const aTags = document.querySelectorAll("a");
      const imgTags = document.querySelectorAll("img");

      aTags.forEach((aTag) => {
        aTag.addEventListener("mouseover", (e) => {
          console.log(e.target);
        });
        aTag.addEventListener("touchstart", (e) => {
          console.log(e.target);
        });
      });
      imgTags.forEach((imgTag) => {
        imgTag.addEventListener("mouseover", (e) => {
          console.log(e.target);
        });
        imgTag.addEventListener("touchstart", (e) => {
          console.log(e.target);
        });
      });
    </script>
  </body>

這只是如何完成事情的一個示例，您可以將數據發送到服務器而不是控制台記錄它們，該解決方案絕對可以根據特定需求進行優化。

我還建議使用sendBeacon方法發送數據，以避免中斷到不同頁面的平滑過渡。

PS：我認為這是一項任務，但在實際使用的情況下，您還應該考慮到用戶隱私，並與機器人用戶以及直接或間接地與最終用戶明確這一點。

由 Naoval 編輯

這是在 typescript 中實現的方法

將public element: ElementRef添加到constructor ，然后您可以使用此代碼

const div = this.element.nativeElement.querySelectorAll('div');
const button = this.element.nativeElement.querySelectorAll('button');
const img = this.element.nativeElement.querySelectorAll('img');
const a = this.element.nativeElement.querySelectorAll('a');
div.forEach(element => {
  element.addEventListener('click', (e => {
    console.log(e.target.outerHTML);
  }))
})
button.forEach(element => {
  element.addEventListener('click', (e => {
    console.log(e.target.outerHTML);
  }))
})
img.forEach(element => {
  element.addEventListener('click', (e => {
    console.log(e.target.outerHTML);
  }))
})
a.forEach(element => {
  element.addEventListener('click', (e => {
    console.log(e.target.outerHTML);
  }))
})

如何使用 javascript 或 angular 捕獲用戶活動

問題描述

1 個解決方案

解決方案1
0 已采納 2021-05-07 04:08:32

如何使用 javascript 或 angular 捕獲用戶活動

問題描述

1 個解決方案

解決方案1 0 已采納 2021-05-07 04:08:32

解決方案1
0 已采納 2021-05-07 04:08:32