HTML script tag integration

This method is recommended for static web pages and server-side rendering scripts like PHP.

Install script

In order to load the Page Actions, you need to add these 2 script tags inside your head tag:

<script>
  window.pageActionsConfig = {
    siteId: "yoursite.com",
    accountId: "your-account-id"
  };
  window.pageActionsQueue=[];
  function pageAction(){window.pageActionsQueue.push(arguments)}
</script>
<script async type="module" src="https://cdn.page-actions.com/page-actions.js"></script>

This is just an example code. The code for your account can be found in the dashboard settings after you create an account.

The first script tag configures Page Action client and creates a stub pageAction() function. The stub function is needed in case there are some actions registered before page-actions.js is loaded.

The second script asynchronously loads page-actions.js script. This can be moved to the end of the body tag to improve page performance.

When these scripts are loaded, the page view action is reported and sent to the collector. It also registers a pageActions() function to report your custom actions.

Configuration

Verbose

You can enable a verbose mode to see in the browser's console logs when actions are reported. Just set verbose property to true.

  window.pageActionsConfig = {
    // ...
    verbose: true
  };

Collector

In some cases, you may need to override the default collector URL. Use a collector property with a valid URL.

  window.pageActionsConfig = {
    // ...
    collector: 'https://app.page-actions.com/test-collector'
  };

Report custom actions

For example, you can report a page action when a link is clicked:

<a href="/contact" onclick="pageAction('contact_click')">Contact</a>

The pageActions() function supports the same parameters as action() function in page-actions-js library. Documentation is available here: https://github.com/pageactions/page-actions-js#report-an-action

<a href="/contact" onclick="pageAction('contact_click', { conversion: true })">Contact</a>