$ cd moesif-email
$ npm init -y && npm i express moesif-nodejs

如果一切順利，輸出應(yīng)該包含以下幾行：

- express@4.17.1

- moesif-nodejs@3.0.0

我們將在 Node.js 和 Express 的基礎(chǔ)上構(gòu)建我們的 API 和注冊(cè)網(wǎng)站。Moesif SDK for Express 將把 API 監(jiān)控?cái)?shù)據(jù)發(fā)送到 Moesif 服務(wù)。

使用 Moesif 瀏覽器 SDK 創(chuàng)建網(wǎng)站

首先，我們需要?jiǎng)?chuàng)建一個(gè)網(wǎng)站。我們將使用 Moesif 瀏覽器 SDK 發(fā)送具有特定用戶 ID 的客戶端事件。這將在 Moesif 服務(wù)上創(chuàng)建帶有元數(shù)據(jù)的新用戶，稍后，我們將允許將該用戶鏈接到我們將從網(wǎng)站發(fā)送的 API 請(qǐng)求。moesif-email/index.html 的代碼如下所示：

<script src="http://unpkg.com/moesif-browser-js@^1/moesif.min.js"></script>



<h1>Demo API</h1>

<button id="start">Send client event</button>

<button id="api">Send API request</button>

<pre id="target"></pre>



<script type="text/javascript">

  moesif.init({ applicationId: "<YOUR_MOESIF_APP_ID>" });

  const userId = "demo-user-123";

  moesif.identifyUser(userId, {

    email: "<YOUR_EMAIL>",

    firstName: "Jane",

    lastName: "Doe",

  });

  document.getElementById("start").addEventListener("click", () => {

    moesif.track("clicked_start");

    document.getElementById("target").innerHTML = "clicked_start";

  });

  document.getElementById("api").addEventListener("click", async () => {

    const response = await fetch("/api", {

      headers: { Authorization: userId },

    });

    const json = await response.json();

    document.getElementById("target").innerHTML = JSON.stringify(json, null, 2);

  });

</script>

我們包含了 Moesif 瀏覽器 SDK，創(chuàng)建了兩個(gè)按鈕并將它們與兩個(gè)操作關(guān)聯(lián)起來(lái)，發(fā)送一個(gè)客戶端事件和一個(gè) API 請(qǐng)求。SDK 配置了 userId，因此 Moesif 知道是誰(shuí)發(fā)送了客戶端事件。不要忘記將其替換<YOUR_MOESIF_APP_ID>為您的實(shí)際 Moesif 應(yīng)用程序 ID 和<YOUR_EMAIL>您自己的電子郵件。

客戶端操作使用瀏覽器 SDK 來(lái)告知 Moesif 網(wǎng)站上發(fā)生的事情。在本例中，就是單擊按鈕。這與我們的 API 無(wú)關(guān)，但以后可能會(huì)很有趣。例如，當(dāng)用戶通過(guò)網(wǎng)站注冊(cè)，但隨后沒(méi)有發(fā)送任何請(qǐng)求時(shí)。

API 請(qǐng)求將使用 Authorization 標(biāo)頭告知 API 用戶 ID。這樣，Moesif 稍后可以將客戶端事件與 API 請(qǐng)求關(guān)聯(lián)起來(lái)。

使用 Moesif Express SDK 創(chuàng)建 API

下一步是 API 服務(wù)器。我們將使用Express 框架

moesif-email/index.js 的代碼應(yīng)包含以下內(nèi)容：

const fs = require("fs");

const express = require("express");

const moesif = require("moesif-nodejs");

const website = fs.readFileSync(__dirname + "/index.html");



const app = express();

app.use(

  moesif({

    applicationId: "<YOUR_MOESIF_APP_ID>",

    logBody: true,

    identifyUser: ({ headers }) => headers.authorization,

  })

);

app.get("/", (request, response) => response.end(website));

app.get("/api", (request, response) =>

  response.end(JSON.stringify({ timestamp: Date.now() }))

);

app.listen(8888, () => console.log(Running at http://localhost:8888));

首先，我們加載 index.html，然后創(chuàng)建一個(gè) Express 應(yīng)用并將其配置為使用 Moesif Express SDK 作為中間件。您需要將其替換YOUR_MOESIF_APP_ID為您的實(shí)際 Moesif 應(yīng)用 ID。

測(cè)試 API

為了測(cè)試 Express API，我們必須使用以下命令啟動(dòng)服務(wù)器：

$ node .

這應(yīng)該輸出以下行：

Running at http://localhost:8888

如果一切順利，我們可以http://localhost:8888通過(guò)瀏覽器導(dǎo)航到我們的網(wǎng)站并點(diǎn)擊按鈕。一個(gè)將發(fā)送客戶端事件，另一個(gè)將發(fā)送 API 請(qǐng)求。

圖 1：實(shí)時(shí)事件日志

如果您現(xiàn)在導(dǎo)航到 Moesif 儀表板（來(lái)自此處YOUR_MOESIF_APP_ID），然后單擊頂部的“事件”選項(xiàng)卡，您應(yīng)該會(huì)看到四個(gè)不同的事件，如上圖 1 所示。

用戶操作事件是客戶端事件。GET /api 事件是我們發(fā)送給 API 的請(qǐng)求。它們都帶有用戶名和公司注釋。另外兩個(gè)事件與加載網(wǎng)站和網(wǎng)站圖標(biāo)的瀏覽器請(qǐng)求有關(guān)。之所以包含它們，是因?yàn)槲覀兿?API 一樣使用相同的 Express 服務(wù)器來(lái)提供網(wǎng)站，但由于請(qǐng)求缺少授權(quán)標(biāo)頭，因此我們無(wú)法獲得用戶或公司注釋。

圖 2：用戶摘要

如果您點(diǎn)擊該用戶，您會(huì)看到他們的“用戶摘要”，其中包括該用戶的電子郵件地址，如圖 2 所示。

設(shè)置行為電子郵件

現(xiàn)在我們創(chuàng)建了 API 并知道它可以收集數(shù)據(jù)，我們可以設(shè)置行為電子郵件

創(chuàng)建群組

發(fā)送電子郵件的第一步是創(chuàng)建一個(gè)群組，即符合特定條件的一組用戶。這些條件可以包括地理位置等人口統(tǒng)計(jì)信息，也可以包括已執(zhí)行的事件。

為此，我們需要轉(zhuǎn)到用戶查找。要轉(zhuǎn)到該頁(yè)面，請(qǐng)點(diǎn)擊頂部導(dǎo)航欄中的“用戶”鏈接，然后點(diǎn)擊第一個(gè)導(dǎo)航欄下方第二個(gè)導(dǎo)航欄中的“用戶查找”鏈接。

圖 3：用戶查找

您現(xiàn)在看到的視圖應(yīng)該像圖 3 中的屏幕截圖那樣。

我在屏幕截圖中已經(jīng)為我們的群組添加了一些標(biāo)準(zhǔn)。該群組中的用戶應(yīng)該有電子郵件，并且在過(guò)去 7 天內(nèi)沒(méi)有 API 調(diào)用。您可以復(fù)制該設(shè)置，點(diǎn)擊“創(chuàng)建群組”，并將其命名為“無(wú) API 調(diào)用的用戶”。