Configuring media/section through snippet

General information

We offer convenient tools to resolve Media and Sections from URL, however, there are cases, when it can not be achieved. There are a few examples:

  • A website has multiple languages on the same domain, and current language is not reflected in the website address (for instance stored in a cookie)
  • A website has a lot of visitors and a lot of different content. For instance big Forum with different categories (from cooking to car-fixing guides) and subcategories in each. Content and audience is different, so each category can be defined as defined
  • Website's Content Management System (CMS) allows content categories, however, a category is not present in page address. For instance, the page address is example.com/news/123 and content belong to Sports category, on page example.com/news/456 to Politics

Cases like this require programmatic media setting in UserReport script implementation. There are two ways:

  1. Using meta header displayed on the Advanced tab
  2. Using JavaScript API

The first approach is straightforward and should be implemented on server-side. However more often UserReport is deployed through various Tag managers, like Google Tag Manager, Permutive etc. So here is small API how to set media/section:

<script>
  window._urq = window._urq || [];
  window._urq.push(["setMediaId", "MEDIA_ID"]);
  window._urq.push(["setSectionId", "SECTION_ID"]);
</script>

 

You can find MEDIA_ID and SECTION_ID values in meta-tag snippet shown on the Advanced tab of Media/Section configuration. These methods must be invoked before SAK loaded and executed. Therefore complete snippet should have following look

<script>
  window._urq = window._urq || [];
  window._urq.push(["setMediaId", "MEDIA_ID"]);
  window._urq.push(["setSectionId", "SECTION_ID"]);
</script>
<script src="https://sak.userreport.com/your_company/launcher.js" 
  id="userreport-launcher-script" async></script>

 

Warning: pageview is assigned to one media, however, may be associated with multiple sessions. Therefore setMediaId must be called once, setSectionId may be called multiple times, so a pageview will count to impressions on these sections.

Setting Media ID

Once you have created you may not specify URL-based rules, obtain media ID and from meta tag shown on the Advanced tab, like on the example below

Having this value you can place a snippet

<script>
  window._urq = window._urq || [];
  window._urq.push(["setMediaId", "12345678-1234-4af6-8f32-2a97ab508426"]);
</script>
<script src="https://sak.userreport.com/your_company/launcher.js" 
  id="userreport-launcher-script" async></script>

This will run UserReport same survey regardless of a domain where the snippet is deployed.

Your website has multiple languages (English, Danish, and German) on the same domain (example.com) and current language is not reflected in the website address but stored in the cookie with name lang. You need to do following:

  1. Create three UserReport media for each language, don't enter media detection rules
  2. Get ID of each created media
  3. Modify UserReport snippet so it gets language from cookie, chooses correct media and sets it to snippet

Here is example, where website language is stored in cookie with name lang that has one of possible values - da, en, de. 

<script>
function initUserReport() {
  // Relation between language (key) and corresponding Media ID (value)
  var languageToMediaMapping = {
    "da": "DANISH_MEDIA_ID",
    "en": "ENGLISH_MEDIA_ID",
    "de": "GERMAN_MEDIA_ID"
  };

  // Read lang cookie. 
  var match = /(^|; )lang=([a-z]{2})($|;)/.exec(document.cookie); 

  if (match) {
    var language = match[2];
    var mediaId = languageToMediaMapping[language];
    if (mediaId) {
      window._urq = window._urq || [];
      window._urq.push(["setMediaId", mediaId]);
    }
  }
}
initUserReport();
</script>
<script src="https://sak.userreport.com/your_company/launcher.js" 
 id="userreport-launcher-script" async></script>

 

In order to test visit your website with ?__urp=test_invite parameter (e.g. http://example.com?__urp=test_invite) to make sure that invitation is shown in correct language. If script is unable to determine media - it will notify show notification in this regards.

Example. Choosing media based on JavaScript variable

Your website have a lot of users and focused in following subjects:

  • Cooking
  • Relations
  • Parenting
  • Housing

Each section have a lot of visits, different editors are responsible for content. So you want to have this sections as Medias, so you can ask different questions on each section and individual satisfaction reports. If CMS you are using to run website allow adds page category to its address (e.g. all articles for Cooking are located under example.com/cooking) then you can use Advanced rules to assign media to each section. 

However it is not always possible to do through URLs, then you need to set media ID in snippet. Most often CMS add some sort of meta object to the page that includes information about content, such as page category. For instance

<script>
window.PageData = {
  "mainCategory": "cooking",
  "labels": [ "pasta", "shrimps" ], 
  "author": "Luciano Markiso"
};
</script>

To detect media based on variable available in JavaScript object you need:

  1. Create three UserReport media for each website section you want to define as separate media, don't enter media detection rules
  2. Get ID of each created media
  3. Modify UserReport snippet so it gets page category from JavaScript object, chooses correct media and sets it to snippet

Based on example above, UserReport snippet can look like this. 

<script>
function initUserReport() {
  // Relation between website category (key) and corresponding Media ID (value)
  var categoryToMediaMapping = {
    "cooking": "COOKING_MEDIA_ID",
    "relations": "RELATIONS_MEDIA_ID",
    "parenting": "PARENTING_MEDIA_ID",
    "housing": "HOUSING_MEDIA_ID"
  };

  
  var mainCategory = window.PageData.mainCategory;
  var mediaId = categoryToMediaMapping[mainCategory];
  if (mediaId) {
    window._urq = window._urq || [];
    window._urq.push(["setMediaId", mediaId]);
  }  
}
initUserReport();
</script>
<script src="https://sak.userreport.com/your_company/launcher.js" 
 id="userreport-launcher-script" async></script>

In order to test visit each section of your website with ?__urp=test_invite parameter (e.g. http://example.com/cooking/?__urp=test_invite) to make sure that invitation is shown in correct language. If script is unable to determine media - it will notify show notification in this regards.

Setting Section ID

Unlike media that must be distinct for pageview, pageview may be attributed by multiple sections. For instance, when user is reading article about football match, it belongs to Sports and Football categories. Once you have created you may not specify URL-based rules, obtain section ID and from meta tag shown on Advanced tab, like on example below

Having this value you can place snippet

<script>
  window._urq = window._urq || [];
  window._urq.push(["setSectionId", "12345678-4567-4af6-8f32-2a97ab508426"]);
</script>
<script src="https://sak.userreport.com/your_company/launcher.js" 
  id="userreport-launcher-script" async></script>

This will measure section for Kits regardless of page address where snippet is deployed.

Example. Choosing section based on JavaScript variables

You run medium size website with cooking recipes. You have categories for different cousins (European, Asian, American) and featured authors (Gordon Ramsay, Jamie Oliver, Giada De Laurentees, Guy Fieri). You want to get audience of each cuisine and featured author to showcase advertiser audience on these sections.

Most often, information about content is added to page by CMS

<script>
window.PageData = {
 "cuisine": "american",
 "labels": [ "burger", "big food" ], 
 "author": "Guy Fieri"
};
</script>

You need to modify snippet so it gets section ID for cuisine, section ID for author and pushes them to JavaScript (sections must be created before-hands).

Here is an example of implementation

<script>
function initUserReport() {
  // Relation between website category (key) and corresponding Media ID (value)
  var cuisineMapping = {
    "american": "AMERICAN_SECTION_ID",
    "asian": "ASIAN_SECTION_ID",
    "european": "EUROPEAN_SECTION_ID"
  };
  var cuisineMapping = {
    "Gordon Ramsay": "Gordon_Ramsay_SECTION_ID",
    "Jamie Oliver": "Jamie_Oliver_SECTION_ID",
    "Giada De Laurentees": "Giada_De_Laurentees_SECTION_ID",
    "Guy Fieri": "Guy_Fieri_SECTION_ID"
  };

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

  var cuisine = window.PageData.cuisine;
  var cuisineSectionId = cuisineMapping[cuisine];  
  if (cuisineSectionId) {
    window._urq.push(["setSectionId",cuisineSectionId]);
  }

  var author = window.PageData.author;
  var authorSectionId = cuisineMapping[authorSectionId]; 
  if (authorSectionId) {
    window._urq.push(["setSectionId",authorSectionId]);
  }  
}
initUserReport();
</script>
<script src="https://sak.userreport.com/your_company/launcher.js" 
 id="userreport-launcher-script" async></script>

 

How did we do?

Configure Google Tag Manager to resolve media dynamically

Install UserReport script with Google Tag Manager

Contact