Website implementation / Sections | AudienceProject Help Center

Website implementation - how to measure sections

Note that you must have implemented the Media Level measurement and have prepared your account with sections definitions before you can measure sections.

Introduction to sections

Sections allow you to measure and report usage/traffic at a more granular level across your different media properties. Sections could be “News” and “Sports” which are associated with each pageview logged. Every section has a unique ID. You can find your unique section IDs by following the steps outlined in the Where to find your measurement script and identifiers article.

While the AudienceProject measurement solution is capable of measuring media usage as soon as the Publisher Script is implemented, it will need additional information from the website/App/CMS in order to also add section traffic measurement. The reason for this is that sections are defined by individual Publishers and not a property that can be derived from the media itself.

The solution outlined will work for both traditional websites that trigger regular page loads for each content piece as well as Single Page Applications (SPA).

In the example below, the Publisher Script has been implemented, as well as a subscription to any page load events. By triggering the:

window._urq.push(["trackSectionPageView", sectionId]);

Everytime a page load is completed, we can provide the measurement script with a Section classification.

Publisher Script + Section label classification at page-load in a regular website (example)

window._urq = window._urq || [];

window._urq.push(["trackSectionPageView", sectionId]);

</script>

id="userreport-launcher-script" async></script>

The sectionId parameter needs to be one of the predefined Section ID’s outlined in the appendix. And it needs to be populated by the CMS system used on the various medias.

On single page applications (SPA) the function:

window._urq.push(["trackSectionPageView", sectionId]);

Needs to be invoked by CMS whenever a user navigates to a new piece of content.

A theoretical example

Below you can find an example that will look up the Section ID based on page information available in JavaScript variables that are provided by the CMS.

Section ID lookup from CMS (example)

function getAudienceProjectSectionId() {

// Mapping between CMS categories to section IDs

var categoryMapping = {

"lifestyle": "00000000-1111-4000-2222-333333333333",

"sports": "11111111-2222-4000-3333-444444444444",

};

// Your CMS output page category into PageData variable

currentPageCategory = window.PageData.category;

// Will return sectionId or undefined

return categoryMapping[currentPageCategory];

}

Lines 3-6 contains mapping between the logical section of your website and the Section IDs found in the appendix of this document.
Line 9 references the PageData variable and its category field. Consult your development team if in doubt.
Line 12 returns section ID if successfully mapped and undefined otherwise.

Combining the function getAudienceProjectSectionId() with your Publisher Script will look like this:

Publisher Script + Section ID lookup from CMS (example)

function getAudienceProjectSectionId(page) {

// Mapping between CMS categories to section IDs

var categoryMapping = {

"lifestyle": "00000000-1111-4000-2222-333333333333",

"sports": "11111111-2222-4000-3333-444444444444",

};

// Will return sectionId or undefined

return categoryMapping[page.category];

}

// Subscribe to page load event

App.onPageLoaded(function(page) {

window._urq = window._urq || [];

var sectionId = getAudienceProjectSectionId(page);

window._urq.push(["trackSectionPageView", sectionId]);

});

</script>

Implementation directly on a website

If you have implemented your Publisher Script directly on your website(s) you should also implement section tracking directly on your website(s). The section category mapping should be placed before the main Publisher Script to ensure that the section information is available when the Publisher script is loaded.

Section tracking should be added together with the Publisher Script on the template of every page on your site right before the closing Html </body> tag.

Direct implementation (example)

<body>

function getAudienceProjectSectionId() {

// Mapping between CMS categories to section IDs

var categoryMapping = {

"lifestyle": "00000000-1111-4000-2222-333333333333",

"sports": "11111111-2222-4000-3333-444444444444"

};

// Your CMS output page category into PageData variable

currentPageCategory = window.PageData.category;

// Will return sectionId or undefined

return categoryMapping[currentPageCategory];

}

window._urq = window._urq || [];

window._urq.push(["trackSectionPageView", getAudienceProjectSectionId()]);

</script>

</body>

Implementation Through a Tag Manager (GTM example)

Setting up section tracking through Google Tag Manager is an easy process because it allows to set up section tracking without writing any JavaScript code. These are the steps involved:

Make sure that you have a GTM Variable with Section code (or name) from your CMS
Create a GTM Variable that will lookup AudienceProject Section ID by Section code
Create a custom HTML tag that will trigger section measurement
Set a trigger for this event (depending on your website type)

You can find an example below that guides you through steps 1-4

Go to Variables

2. If you don’t have a variable with section code? You need to create it.

In order to be consistent with our previous code example? We will create a Variable that points to the PageData.category. This variable will be different from case to case.

3. Create a new User-Defined Variable

4. Choose “Lookup Table” as variable type

5. Choose the Section code variable from step 2 as the Input variable and for every section from the Appendix you need to find the corresponding section code from the CMS and create a mapping table “CMS section code” to “AudienceProject Section ID”

Name this variable AudienceProject section ID.

6. Finally you need to create a Custom HTML tag and set trigger to All Pageviews (or Virtual Pageview, in Single Page Application cases).

HTML

window._urq = window._urq || [];

window._urq.push(['trackSectionPageView', {{AudienceProject section ID}}]);

</script>

Where {{AudienceProject Section ID}} is a variable created on step 5.

7. Please make sure to verify correct implementation of the section measurement using the guide How to check and verify your website implementation