Capturing the behaviour of your users and customers is the best way to understand how they are using your product by tracking their adoption, highlighting expansion opportunities, and monitoring retention risks. In this guide you will learn how to begin capturing that data.

Valued offers you ways to capture behaviour from the front and back ends of your application.

Pre-requisites

It’s worth familiarizing yourself with the guides on authentication and SDKs as they will both be used in the following steps.

Front end

Our valued.js library will automatically capture all the pageview events that occur on your application.

1. Add valued.js

To include the valued.js script in your application, add the snippet below between the <head> ... </head> section of your page.

<script async 
  api-key="{api-key}"
  customer-id="{customer-id}" <!only when available>
  user-id="{user-id}" 
  src="https://cdn.valued.app/libs/js/latest/valued.js">
</script>

You can also do this in one line:

<script async api-key="{api-key}" customer-id="{customer-id}" user-id="{user-id}" src="https://cdn.valued.app/libs/js/latest/valued.js"></script>

Make sure to change the api-key to match the settings on your Integrations page, as well as the customer-id and user-ids to match the user using your application, and the customer they belong to.

2. Adjust your Content Security Policy (CSP)

Your website might use a Content Security Policy (CSP) to secure it.

In this case, you need to add Valued to your trusted sources of script execution, in connect-src:

  • cdn.valued.app
  • ingest.valued.app
Content-Security-Policy: connect-src 'cdn.valued.app' 'ingest.valued.app';

In which cdn.valued.app is the Valued JavaScript library measuring Pageviews, and ingest.valued.app stores them.

3. Check live data coming in

Once you’ve set up the Frontend Analytics Library, you can head back to https://highly.valued.app/, open your project and see pageview events and sessions coming through from your Users and Customers.

Back end

In the following guide we are going send an event for when a new user is created on a customers installation

1. Setup the client

import os
import valued

client = valued.Client(api_key=os.environ['VALUED_API_KEY'])

2. Send the event

### ^ YOUR CODE CREATING THE USER

client.action('user.created', {
  'user': {
    'id': '2134-1241-kmgl-6547',
    'name': 'Lyra Silvertongue',
    'email': 'lyra@jordancollege.edu',
    'location': {
      'country': 'GB', 
      'city': 'Oxford'
      }
    }
  'customer': {'id': '2984-asdm-4302-kmdf'},
})

3. Check the data

In this example we created a user, so you should be able to head back to https://highly.valued.app/, open your project and the new user from the Users menu.