WordPress

This guide adds Blotout to a WordPress site. You create a site in the Blotout platform, add one snippet to your site’s header, and then choose how to send events. You do not need to install anything on WordPress.

The Blotout platform is where you set things up. Qinto is the engine behind it, which receives your events.

Step 1: Create your site in the Blotout platform

1. Sign in to the Blotout platform and follow the onboarding steps with your site’s domain.
2. On the DNS step, set up the First party domain and add the DNS record. This gives your site a hostname on your own domain, such as q.example.com.
3. Finish Deploy and open the Snippet step. Once DNS is verified, the Browser tab shows the snippet for your first party hostname. You can find it again under Settings → Capturing data.

Step 2: Add the snippet to your site’s header

WordPress has a built-in hook called wp_head. Whatever you attach to it is printed inside the <head> of your site’s pages, so one entry in one file loads the snippet everywhere.

1. In your WordPress admin, go to Appearance → Theme File Editor.
2. Under Select theme to edit, choose your theme. Use a child theme if you have one, because WordPress removes changes made directly to a theme when that theme updates.
3. In the list of theme files, select functions.php.
4. Add this code at the end of the file and replace the comment with your snippet. If the file ends with ?>, add the code above that line.
5. Select Update File, and check that WordPress confirms the file was edited.

add_action('wp_head', function () {
  ?>
  <!-- Paste your Blotout snippet here -->
  <?php
}, 1);

The 1 at the end runs this before most other code in the <head>, so Qinto starts early.

Caution

The editor makes no backup, and a mistake in a PHP file can take your site down. Copy the file’s contents somewhere safe first. If the editor is not available to you, or you need to undo a mistake, change the same file over FTP.

Step 3: Turn on page views

In the Blotout platform, go to Settings → Capturing data, turn on Page load and save. It is off by default. With it on, Qinto records a PageView each time a visitor opens a page, and you write no code for it.

Step 4: Send your other events

A page view is the only event Qinto records for you. Purchases, sign-ups and other actions need to be sent, and you can do that in two ways. You can also use both.

Write the code yourself

The snippet makes qinto available on every page, so your theme can call it directly. This example sends a Lead when a visitor submits a form. It goes in functions.php, the same way as the snippet.

add_action('wp_footer', function () {
  ?>
  <script>
    document.querySelector('#newsletter-form')?.addEventListener('submit', () => {
      qinto.track('Lead', { category: 'newsletter', name: 'Newsletter sign-up' })
    })
  </script>
  <?php
});

Standard events lists the events and what each one contains. User data shows how to tell Qinto who a visitor is, and Browser covers the full qinto API.

Use the Tag Manager app

The Tag Manager app is a good way to get started without writing code. You set everything up in a panel in the Blotout platform, and it runs through the snippet you already added.

• A trigger says when something happens, such as a page view, a click, a form submit, a scroll depth or your own JavaScript.
• A tag says what to do then: send an event, identify the visitor or run your own JavaScript.

Install Tag Manager from the app store on your site, then open its panel to add your triggers and tags.

Leave page views to the Page load setting from Step 3. A tag that also sends PageView counts every page twice.

Check that it works

1. Open your site in a new private window. If your host caches pages, clear that cache first so the pages include the snippet.
2. In the browser’s network panel, look for /q.js and an /open WebSocket on your first party hostname.
3. In the Blotout platform, open Analytics → Real time and confirm that a PageView arrives.
4. Trigger one of your events and confirm that it arrives too.