Setting up Field Testing

In this guide, we will show you how to set up Field Testing on your website by adding a piece of JavaScript code. We will cover how to implement the script in Google Tag Manager as well as the most popular Content Management Systems (CMS), such as WordPress, Joomla, Drupal, Wix, and Squarespace. Lastly, we will also provide a general approach that will work for any CMS.

What is Field Testing?

Field Testing is a type of performance monitoring that collects and analyzes website performance metrics, as seen from the perspective of real traffic. This data allows you to get insights into how well your site is performing and identify any issues that your audience might experience.

What's unique about PageVitals Field Testing is that it doesn't monitor or track user or their behavior. We solely send technical information about how fast the website loads, how the 3rd party scripts behave (if they introduce loading or processing delays) and if the website exhibits unwanted layout shifts. We don't set cookies, track user information, behavior or browsing journeys. This makes our tool a good choice in a post-GDPR/CCPA world.

PageVitals offers Field Testing as a part of the product suite. We recommend using Field Testing together with other data sources such as Chrome UX Report (CrUX) and Lighthouse tests.

Does the script impact my page speed?

The PageVitals Field Testing script is loaded asynchronously and takes around 8 KB to download. Being super passionate about page speed, we're using all best practices to make sure the impact is completely unnoticeable.

Are there any privacy concerns?

PageVitals Field Testing was built with a privacy-first and data minimalist approach. The script does not use cookies or other browser storage mechanisms. It does not send any personal information, does not track user behavior, only browser performance data. The IP address that is sent as a part of the data calls made to our platform is discarded upon entry. See Section 4 of our Privacy policy for more detailed information.

How to set up Field Testing on your website

To set up Field Testing, first go to the menu item "Field Testing" in your PageVitals account. A modal will guide to to the script. Copy this script to the clipboard or save it elsewhere.

PageVitals Field Testing script

Google Tag Manager

Google Tag Manager is one of the most common ways to manage and add scripts (or tags) to your site. If you're already using GTM, it may be the easiest way to get started with Field Testing:

  1. Sign in to your Google Tag Manager account: Navigate to Google Tag Manager and sign in to your account. If you haven't set up an account yet, create one and follow the steps to set up a new container for your website.

  2. Create a new tag: In your GTM container dashboard, click on the "New tag" button.

Google Tag Manager - add tag

  1. Name the tag: Write the name of the tag (like "PageVitals Field Testing") and click the "Tag Configuration section"

Google Tag Manager - configuration

  1. Choose Custom HTML: From the list of tag types, select "Custom HTML."

Google Tag Manager - custom HTML

  1. Add the PageVitals script: In the "HTML" input box, paste the script. You can include the <script> tags or exclude them; GTM will handle it correctly either way.

Google Tag Manager - add script

  1. Set up a trigger: Scroll down to the "Triggering" section and click on the "Choose a trigger to make this tag fire..." area. You can either select an existing trigger or create a new one. For example, you can choose the "All Pages" trigger if you want the custom script to load on every page of your website.

Google Tag Manager - add trigger

  1. Save and publish: After configuring the tag and its trigger, click "Save" on the top-right corner and return to your workspace. Click "Submit", write a version name and description, and then hit "Publish" to make the script live on your website.

Google Tag Manager - publish

WordPress

  1. In your WordPress dashboard, go to the Appearance > Theme Editor menu.
  2. Find and click the header.php file in the right sidebar under the Theme Files section.
  3. Look for the opening <head> tag or the closing </head> tag in the header.php file.
  4. Before the closing </head> tag, paste your custom JavaScript script.
  5. Click the Update File button to save your changes.

Alternatively, you can use a plugin, such as "Insert Headers and Footers" or "Header and Footer Scripts," to insert the custom JavaScript script.

Joomla

  1. In your Joomla admin panel, go to the Extensions > Templates menu.
  2. Click on your active template to open the template manager.
  3. On the Edit screen, click the index.php file to open the file editor.
  4. Look for the opening <head> tag or the closing </head> tag in the index.php file.
  5. Before the closing </head> tag, paste your PageVitals script.
  6. Click the Save button to save your changes.

Drupal

  1. In your Drupal admin panel, go to the Appearance menu.
  2. Locate your active theme and click on the Settings button for that theme.
  3. In the settings page, scroll down to the 'Advanced' section and look for the 'Custom JavaScript' or 'Custom JS' option. If not available, you may need to edit your theme's template files directly.
  4. In the 'Custom JavaScript' or 'Custom JS' field, paste your PageVitals script.
  5. Click the 'Save configuration' button to save your changes.

If your theme does not have a 'Custom JavaScript' or 'Custom JS' option, you can manually edit the template files:

  1. Go to your Drupal installation's root directory and navigate to themes/your_theme_name/templates.
  2. Open the html.html.twig file or the page.html.twig file in a suitable text editor.
  3. Look for the opening <head> tag or the closing </head> tag.
  4. Before the closing </head> tag, paste your PageVitals script.
  5. Save and upload the modified file back to the server.

Wix

  1. In the Wix Editor, click 'Site' in the top menu bar and choose 'Custom Code'.
  2. Click the '+ Add Custom Code' button that appears in the custom code manager.
  3. In the 'Add Custom Code' window, give your code a name (e.g., 'PageVitals Field Testing') and paste your PageVitals script in the 'Paste the code snippet here' field.
  4. Select 'Load code on each new page' in the 'Add Code to Pages' section.
  5. Set the 'Place Code in' option to 'Head'.
  6. Click the 'Apply' button to save your changes.

Squarespace

  1. In your Squarespace dashboard, go to the 'Settings' menu.
  2. Click on 'Advanced' in the left sidebar.
  3. Select the 'Code Injection' option.
  4. In the 'Header' field, paste your PageVitals script.
  5. Click 'Save' to save your changes.

General Approach

If you are using a different CMS or a custom-built website, follow these guidelines to add the PageVitals script to your site:

  1. Locate your website's files, either on your local machine or your web server.
  2. Identify the file responsible for the <head> section of your site. It is usually named header.php, index.html, index.php, or default.html.
  3. Open the identified file in a text editor.
  4. Look for the opening <head> tag or the closing </head> tag.
  5. Before the closing </head> tag, paste your PageVitals script.
  6. Save the modified file and upload it back to the server (if necessary).

After adding the script to your website, it is recommended to validate the implementation by checking for the presence of the script in the source code of your website.