Comscore analytics package

🗣 Feature Discussions Released
, ,
1

Description

The Comscore analytics package should allow to integrate Comscore with your site by just adding the client id. It’s one of the most used analytics services, especially for big publishers.

User Stories

As a Frontity user
I want to integrate Comscore in my project
so that I can use Comscore to monitor pageviews in my site.

Possible solution

The implementation would be very similar to the current beta of @frontity/google-analytics. It would need a component that adds the Comscore’s code snippet in SSR and a sendPageview action that would use the Comscore library to send pageviews.

The only difference is that Comscore doesn’t send events.

Possible implementation

3

Possible implementation

roots.comScore

The component that renders the ComScore library. It would be something like this:

import React from "react";
import { Head, connect } from "frontity";

const ComScore = ({ id }) => (
  <Head>
    <script async src="https://sb.scorecardresearch.com/beacon.js" />
    <noscript>
      {`<img alt="comScore" src="https://sb.scorecardresearch.com/p?c1=2&c2=${id}&cv=2.0&cj=1" />`}
    </noscript>
  </Head>
);

export default connect(ComScore);

state.comScore.ids

Array of strings with ComScore tracking ids.

actions.comScore.sendPageview

Action that sends the pageview data to ComScore. This is how we implemented this for the old framework version (relevant lines of code are marked): https://github.com/wp-pwa/wp-pwa/blob/dev-stable/core/packages/analytics/shared/stores/comscore.js#L32-L37

It could be something like:

const ComScore = {
  actions: {
    comScore: {
      sendPageview: ({ state }) => () => {
        if (window.COMSCORE) {
          state.comScore.ids.forEach(id => window.COMSCORE.beacon({ c1: '2', c2: id }));
        } else {
          window._comscore = window._comscore || [];
          state.comScore.ids.forEach(id => window._comscore.push({ c1: '2', c2: id }));
        }
      }
    }
  }
}
4

The Comscore package (@frontity/comscore-analytics) was implemented and merged in dev, and it will be released soon.

A couple of things have changed though, regarding the proposed implementation:

  • The namespace for the package is comscoreAnalytics
  • The ids property in the state was renamed to trackingIds, which is more meaningful.

Also, the @frontity/analytics library was modified to support packages that do not implement the sendEvent action.

:bulb: Just mention too that these packages are still in beta and probably their API will change.

3 Likes
6

Hey @david, are you planning to include a trackingId (singular) as in other analytics packages?

7

Yes, we are going to do so before releasing the first stable version.

8

The first stable version for the @frontity/comscore-analytics package is ready!

There are not breaking changes for this package, as the settings for the frontity users remain the same, but it now uses the new version of the analytics library under the hood.

2 Likes
9

This has been included in the latest release :tada:: Read the full Release Announcement.

10

@david could you please add the final implementation here, for future reference? Maybe you can use the TSDocs to some extent.

11

Pull Request

Final implementation

The package was adapted to use the new version of @frontity/analytics and the following changes were made:

  • sendPageview were renamed to pageview.

  • Its namespace is comscoreAnalytics.

  • The properties state.comscoreAnalytics.trackingId or state.comscoreAnalytics.trackingIds properties are used to specify the tracking IDs used by the package.

    {
  state: {
    comscoreAnalytics: {
      // If you only specify a single tracking ID
      trackingId: "34567890",
      // If you want to use a list of tracking IDs
      trackingId: ["34567890", "56789012"]
    }
  }
}

  • The pageview action doesn’t receive any property, it sends the current link and title to all traking IDs defined in the properties mentioned before. The @frontity/analytics library ensures this action is called when the title is ready for the current page.

    actions.comscoreAnalytics.pageview();

    This action is called automatically if state.analytics.pageviews.comscoreAnalytics is set to true.