⚠️ This article refers to Pico Version 1.17 and will be removed or updated in the future once we release Pico Version 2.0.

Pico Document Objects require prior knowledge

⚠️ NOTE: This is an advanced Pico feature that requires familiarity with JavaScript to fully utilize. We recommend working with a developer if you are unsure how to proceed.

When the plugin is first loaded, it will fire a pico.init event. This signifies that the plugin has successfully loaded and is ready to work. After initialization is complete, the plugin will fire a pico.loaded event to indicate the user's information has been fully loaded. The global Pico object now has a user object that is available to access.

Here's a breakdown of the Pico object user properties:

  • email: Email address of the user if available - defaults to null
  • first_name: First name of the user if available, defaults to null
  • last_name: Last name of the user if available, defaults to null
  • membership_type: Type of recurring payment if available, available options ["subscription", "single-donation", "recurring-donation", null], defaults to null
  • tier: Name of the tier they have purchases, If no name was provided defaults to null
  • group_name: Name of the group they are associated to, defaults to null
  • total_paid: Lifetime total of all purchases, defaults to null
  • recurring_payment: Current recurring payment amount, defaults to null

This is typically how you would listen to an event fired at the document:

document.addEventListener('pico.loaded', function() { console.log(window.Pico.user) })

Lifecycle Events

In addition to the data on the Pico user object, we also offer a number of lifecycle events that can be used for tracking actions that a user takes on the site with Pico. These are for communities that want to analyze their visitor behavior and interaction with the Pico plugin on site. These events can then be used to notify any analytics tracker or conversion tracker that a user has converted.

These fire on the following conditions:

pico.user.registered: A new signup occurs for the community. This includes email or social sign-in for a contact that was not previously a member of the community.

pico.user.authenticated: A contact that existed already logs in. This will help to distinguish campaigns that did not create new users but did prompt logging in (like registration walls).

pico.payment.paid: A new payment is made on site. This helps track conversions that lead to new payments, including gift purchases.

pico.paymentMethod.added: This is useful for measuring the conversion funnel of the checkout flow. If a user adds a payment method but ultimately does not pay, it may indicate hesitation around the total pricing amount.

<script type="text/javascript"> 
document.addEventListener('pico.user.registered',
(event) => {
console.log('a new user registered with event details: ', event.detail)

});
document.addEventListener(
'pico.user.authenticated',
(event) => {
console.log('a returning user authenticated with event details: ', event.detail)

});
document.addEventListener(
'pico.payment.paid',
(event) => {
console.log('a user paid with event details: ', event.detail)

});

document.addEventListener(
'pico.paymentMethod.added',
(event) => {
console.log('a user added a payment method with event details: ', event.detail)

});
</script>

In the above examples, these log console events, but could just as easily send conversion calls to Google Tag Manager, or other tracking pixels to measure campaign effectiveness.

For an example of these in action, please open a developer console and visit:

https://example.trypico.com/

Note: These events will not fire until the Pico plugin has loaded fully on-site.

Did this answer your question?