在纯JS应用中使用 Amazon Pinpoint 的 Analytics 用户行为分析

amplify-js-app % amplify init

Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project amplifyjsapp
The following configuration will be applied:

Project information
| Name: amplifyjsapp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: none
| Source Directory Path: src
| Distribution Directory Path: dist
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use MTProj
Adding backend environment dev to AWS Amplify app: d39nrrswky58lm
⠴ Initializing project in the cloud...

CREATE_IN_PROGRESS amplify-amplifyjsapp-dev-133145 AWS::CloudFormation::Stack Mon Nov 14 2022 13:31:50 GMT+0800 (GMT+08:00) User Initiated
CREATE_IN_PROGRESS DeploymentBucket                AWS::S3::Bucket            Mon Nov 14 2022 13:31:54 GMT+0800 (GMT+08:00)
CREATE_IN_PROGRESS AuthRole                        AWS::IAM::Role             Mon Nov 14 2022 13:31:55 GMT+0800 (GMT+08:00)
CREATE_IN_PROGRESS UnauthRole                      AWS::IAM::Role             Mon Nov 14 2022 13:31:55 GMT+0800 (GMT+08:00)
CREATE_IN_PROGRESS AuthRole                        AWS::IAM::Role             Mon Nov 14 2022 13:31:56 GMT+0800 (GMT+08:00) Resource creation Initiated
CREATE_IN_PROGRESS DeploymentBucket                AWS::S3::Bucket            Mon Nov 14 2022 13:31:56 GMT+0800 (GMT+08:00) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole                      AWS::IAM::Role             Mon Nov 14 2022 13:31:56 GMT+0800 (GMT+08:00) Resource creation Initiated
⠇ Initializing project in the cloud...

CREATE_COMPLETE AuthRole   AWS::IAM::Role Mon Nov 14 2022 13:32:13 GMT+0800 (GMT+08:00)
CREATE_COMPLETE UnauthRole AWS::IAM::Role Mon Nov 14 2022 13:32:14 GMT+0800 (GMT+08:00)
⠧ Initializing project in the cloud...

CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Mon Nov 14 2022 13:32:17 GMT+0800 (GMT+08:00)
⠧ Initializing project in the cloud...

CREATE_COMPLETE amplify-amplifyjsapp-dev-133145 AWS::CloudFormation::Stack Mon Nov 14 2022 13:32:19 GMT+0800 (GMT+08:00)
✔ Successfully created initial AWS cloud resources for deployments.
✔ Help improve Amplify CLI by sharing non sensitive configurations on failures (y/N) · no
✔ Initialized provider successfully.
✅ Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

amplify add analytics

amplify push

const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_cognito_identity_pool_id": "us-east-1:c923c1f1-285a-4b1d-acad-c19c61c2287f",
    "aws_mobile_analytics_app_id": "1e4f01b0a02c495d96c9c8410eac246e"
};
export default awsmobile;

import { Amplify, Analytics, Auth } from "aws-amplify";
import awsExports from './aws-exports'

Amplify.Logger.LOG_LEVEL = 'DEBUG' // 开启debug，生产环境建议删掉这一行
const config = {
  Auth: {
    region: awsExports.aws_project_region,
    identityPoolId: awsExports.aws_cognito_identity_pool_id
  },
  Analytics: {
    // OPTIONAL - disable Analytics if true
    disabled: false,
    // OPTIONAL - Allow recording session events. Default is true.
    autoSessionRecord: true,

    AWSPinpoint: {
      appId: awsExports.aws_mobile_analytics_app_id,
      region: awsExports.aws_project_region,
      mandatorySignIn: false,
      // endpointId: '1234',
      endpoint: {
        address: 'aws-amplify-jsapp-123', // 只有 SMS、Email中有意义
        attributes: {
          hobbies: ['piano', 'hiking'] // 用户在该通道的属性
        },
        channelType: 'IN_APP', // 渠道类型，如果要通知，则需要设置相应类型
        metrics: {
          // Custom metrics that your app reports to Amazon Pinpoint.
          age: 39
        },
        optOut: 'NONE',
        // Customized userId，一个用户可以有多个 endpoint
        userId: 'mav_123',
        // User attributes
        userAttributes: {
          interests: ['football', 'basketball', 'AWS'],
          FirstName: ['Mavlarn']
        }
      }
    }
  }
}
Amplify.configure(config);
const currentAuthConfig = Auth.configure();
console.log('amplify auth config:', JSON.stringify(currentAuthConfig))

// 将这两对象放在window，可以作为全局对象使用，而无需通过 import。
window.Amplify = Amplify
window.Analytics = Analytics

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Amplify Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <body>
    <div class="app">
      <div class="app-header">
        <button onclick="recordEvent()">Record Event</button>
      </div>
    </div>
    <script src="main.bundle.js"></script>
    <script>
      function recordEvent() {
        // 由于我们已经通过 window.Analytics = Analytics 将它作为全局对象，所以可以直接调用它的方法。
        Analytics.record({ name: 'Custom_event' }); // 记录自定义事件 Custom_event
      }
    </script>
  </body>
</html>

<html lang="en">
  <body>
    <div class="app">
      <div class="app-body">
        <h1>Update Endpoint</h1>
        <button onclick="updateEndpoint()">Update Endpoint</button> 
      </div>
    </div>
    <script src="main.bundle.js"></script>
    <script>
      function updateEndpoint() {
        Analytics.updateEndpoint({
          attributes: {
            registeredDate: [new Date()]
          }
        })
      }
    </script>
  </body>
</html>

Analytics.updateEndpoint({
    attributes: {
        registeredDate: [new Date()]
    },
    userAttributes: {
        lastOrderProducts: ['football', 'iphone', 'TV'],
        userType: ['vip']
    },
    metrics: {
        age: 35
    }
})