goatandsheep / aws-web-analytics

Privacy-focused alternative to Google Analytics on AWS Pinpoint

AWS Web Analytics

Tracking tag library for AWS Pinpoint as an alternative to Google Analytics using AWS Amplify.

Philosophy

Moving to AWS from Google Analytics is a way to maintain your users' privacy. Our blog post, Why you need to move off Google Analytics, explains more about it.

Amplify requires a lot of boilerplate to be able to setup a useful Analytics setup quickly and effectively.

Initialize your account

1. Create an AWS account
2. Create your Pinpoint account and Cognito Federated user pool
3. Add the following tag to your code (with your own values for data-id-pool and data-pinpoint-id):

<script
    data-id-pool="us-east-1:abcd1234-abcd-1234-5678-abcd12345678"
    data-pinpoint-id="1234abcd5678abcd7890abcd1234"
    id="aws-web-analytics"
    src="https://goatandsheep.github.io/aws-web-analytics/dist/aws-web-analytics.js"
    type="text/javascript"
></script>

Click Events

Based on Amplify Page Event Tracking

Use data-aws-analytics- to indicate:

• on: event listening
• name: what will analytics event be named?
• attrs: any needed associated info

<!-- you want to track this button and send an event when it is clicked -->
<button
    data-aws-analytics-on="click"
    data-aws-analytics-name="submitButtonClick"
    data-aws-analytics-attrs="attr1:attr1_value,attr2:attr2_value"
>Continue</button>

If you need other events than click, open a ticket

Custom events

Based on Amplify Analytics record.

window.Amplify.Analytics.record({
    name: 'albumVisit', 
    // Attribute values must be strings
    attributes: { genre: '', artist: '' }
});

AWS Cloud setup

IAM Role

Setup the Federated Cognito pool allowing unauth roles with the following permissions:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "mobiletargeting:PutEvents",
                "mobiletargeting:UpdateEndpoint"
            ],
            "Resource": "arn:aws:mobiletargeting:us-east-1:<account-number>:apps/<pinpoint-project-id>/*"
        },
        {
            "Sid": "VisualEditor1",
            "Effect": "Allow",
            "Action": [
                "mobiletargeting:GetUserEndpoints",
                "mobileanalytics:PutEvents"
            ],
            "Resource": "*"
        }
    ]
}

CloudFormation coming soon...

aws-web-analytics's Issues

Eslint

Setup on a proper CDN

Documentation, README could use more detail on setting up AWS Amplify

I was thinking it might be worth creating a "walk through" of setting it up in AWS. Although using the library is as simple as putting in a CDN based tracking code, I believe the bulk of the work for setting up this library happens on the AWS side.

At minimum, it would be good to at least include a direct link to the pinpoint product right in the README file.

I've attached screenshots of the process that might be helpful to include in the README or documentation, even as a background, not necessarily the main instructions.

Generic "where to click" style screenshots:

This screen was particularly confusing:

AWS is giving alternative instructions, takes mental work to figure out which steps to include and which steps to ignore in order to use this library instead.

Also, I would change include a nice dashboard style screenshot in the README file as well, just to show people what's possible with AWS too:

Cloudformation Template

Easy Cloudformation template

Cross origin errors

I setup pinpoint where the Identifies receive the following role:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "mobiletargeting:PutEvents",
                "mobiletargeting:UpdateEndpoint"
            ],
            "Resource": [
                "arn:aws:mobiletargeting:us-east-1:<aws-user-id>:apps/<pinpoint-id>/*",
            ]
        },
        {
            "Sid": "VisualEditor1",
            "Effect": "Allow",
            "Action": [
                "mobileanalytics:PutEvents",
            ],
            "Resource": "*"
        },
        {
            "Sid": "VisualEditor2",
            "Effect": "Allow",
            "Action": "mobiletargeting:GetUserEndpoints",
            "Resource": "arn:aws:mobiletargeting:us-east-1:<aws-user-id>:apps/<pinpoint-id>/*"
        }
    ]
}

However, I'm getting the following error:

Better testing

• is cognito I'd really optional?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update dependency @aws-amplify/core to v6
• Update dependency webpack-dev-server to v5
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @aws-amplify/auth to v3.4.34
• Update dependency @aws-amplify/core to v3.8.24
• Update dependency webpack-dev-server to v3.11.3
• Update dependency babel-loader to v8.3.0
• Update dependency webpack to v4.47.0
• Update dependency @aws-amplify/analytics to v7
• Update dependency @aws-amplify/auth to v6
• Update dependency babel-loader to v9
• Update dependency webpack to v5
• Update dependency webpack-cli to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• @aws-amplify/analytics ^3.3.6
• @aws-amplify/auth ^3.4.6
• @aws-amplify/core ^3.6.0
• babel-core ^6.26.3
• babel-loader ^8.1.0
• webpack ^4.46.0
• webpack-cli ^3.3.12
• webpack-dev-server ^3.11.0

---

• Check this box to trigger a request for Renovate to run again on this repository

Monetization Events

GTM type event push aws-amplify/amplify-js#4775

Optimize webpack

Clarify instructions in readme

Include instructions on

• how to obtain cognito ID
• how to obtain pinpoint ID
• cognito configuration

How can I build aws-web-analytics.js from source?

<script data-id-pool="us-east-1:abcd1234-abcd-1234-5678-abcd12345678" data-pinpoint-id="1234abcd5678abcd7890abcd1234" id="aws-web-analytics" src="https://goatandsheep.github.io/aws-web-analytics/dist/aws-web-analytics.js" type="text/javascript">

Hi I am not sure how to use the repo to build "aws-web-analytics.js".
Unfortunately I can't load external scripts in my environment. Is there any documentation on how to re-create the scripts? Is it identical to "aws-amplify.js" or?
Thanks.

Automated builds