Does your site have a standard WordPress setup? Get up and running in a minute by installing the Pico WordPress plugin:

 

If you're not using WordPress (or if you have a headless WordPress setup), you can install Pico by following the 3 steps below. Before getting started, please make sure that you have a Primary URL saved in your account's Publication settings at Settings ► Account. If you have a Staging URL and/or Development URL, you will need to save those as well in order for Pico to successfully load on those versions of your site.

⚠️ NOTE: The installation method below is still in beta. Please contact Pico support if you need assistance.

 

1. Install the Widget Snippet

Copy the following JavaScript snippet and paste it inside the <head> code of your website.

⚠️ NOTE: Replace INSERT YOUR PUBLISHER ID in the snippet with your Pico Publisher ID, which you can find under the Website section of the Integrations settings at https://publisher.pico.tools/settings/integrations. Do not remove the quotation marks surrounding the Publisher ID.

<script>
(function(p,i,c,o){var n=new Event("pico-init");i[p]=i[p]||function(){(i[p].queue=i[p].queue||[]).push(arguments)},i.document.addEventListener("pico-init",function(e){var t=i.Pico.getInstance(e,{publisherId:o,picoInit:n},i);t.handleQueueItems(i[p].queue),i[p]=function(){return t.handleQueueItems([arguments])}},!1);var e=i.document.createElement("script"),t=i.document.getElementsByTagName("script")[0];e.async=1,e.src=c,e.onload=function(e){return i.Pico.getInstance(e,{publisherId:o,picoInit:n},i)},t.parentNode.insertBefore(e,t)})("pico",window,"https://widget.pico.tools/wrapper.min.js","INSERT YOUR PUBLISHER ID");
</script>


 

2. Send information about each page to Pico using the Page Properties Snippet

Copy the following JavaScript snippet and paste it before the closing </body> tag of each page. (We recommend inserting it as the last element before the closing </body> tag.) On each page of your site, set a value for each of the properties in the snippet.

<script>
var pageInfo = {
article: bool,
post_id: num,
post_type: string,
resource_ref: unique_reference_string, // optional
taxonomies: { tags: [...], categories: [...], some_custom_taxonomy: [...] },
url: window.location.href
};

window.pico('visit', pageInfo);
</script>

 

Required Properties

article boolean

  • true if this is a post, article, story, or something equivalent. Note: a page must have article set to true to be subject to regiwall or paywall settings.
  • false if this is a contact page, taxonomy index, section/topic index of posts, or generally, a page that would never have content set behind a regiwall or paywall.
  • This value will determine whether or not we can track taxonomy info. We only track what your visitors are reading based on the taxonomies being passed and only when article is true.

post_id number

  • A unique numeric post identifier. We use this to uniquely identify whether something has been read by a user or not.

post_type string

  • Below are recommended post types. If you want to refer to a “post” as a “story” instead, go for it! Just make sure that the article boolean is set appropriately for each content type.
  • home
  • post
  • page
  • author
  • category
  • tag
  • tax
  • search
  • date
  • 404

taxonomies object

  • An object with keys of taxonomy types and values of arrays.
  • Requires article to be true in order to track reader activity (i.e. this user likes to read posts with the category of "pets").
  • In the example below, we are passing three taxonomy types of tags, categories, and some_custom_taxonomy — each with an array of values.

Example value:

{  
   "tags":[  
      "puppies",
      "kittens"
   ],
   "categories":[  
      "pets"
   ],
   "some_custom_taxonomy":[  
      "cute things"
   ]
}

 
url
string

  • The current URL

Example value:

window.location.href

 

Optional Properties

resource_ref string

  • Unique string identifier ie:

Example value:

page=fun-hats-for-cats

 
3. Wrap page content for things you want to be considered lockable

For pages that are article: true, wrap content in <div id="pico"></div>

<div id=”pico”>
   <p>Content you want to track users reading.</p>
   <p>Potentially limit access based on whether readers are registered and/or paying.</p>
</div>

 

Helpful tips

A note on infinite scroll and dynamic routing sites

If you have a site that on each page load, has all of the needed information for the pico tracking snippet, autotracking works fine. 

If you have a single page app that uses something like react-router to navigate from page to page (where the app manages the URL and view without a full app refresh), you will need to hydrate that info on each page view about the current URL. This means autotracking is incompatible with your site. No problem! Just make sure you insert a Pico tracking snippet that is called to track every navigation event a user takes otherwise you won’t see more than the initial app load info.

Also this will need to be handled on websites with infinite scroll (where as you scroll, the URL changes).

 

A note on staging sites and test environments

At this time, we don’t provide a separate sandbox publisher ID for you to use on your staging or test environment. We allow you to use the same publisher ID for testing your integration on your non-production website. Therefore any users created while testing your integration will need to be manually removed from your CRM to ensure you aren’t being billed for that record.
 

Did this answer your question?