Google Tag Manager (GTM) setup

Google Tag Manager implementation specifics

Introduction

SmartOcto Insights (SOI) tracking code is a piece of JavaScript code that will send information about your articles to our servers. The code is asynchronous and it shouldn’t affect the speed of the website in any way.

The code should only run on article pages. It shouldn’t run on the homepage, category, tag, search results, 404 pages, and so on.

The code works like this: you populate the global _ain object with the metadata of the article.
Our tracking code picks that data and for each visit, it sends the data to the smartocto ingestion server.

Google Tag Manager setup instructions

You need to have access to your Google Tag Manager account in order to create a tag, a trigger, and several custom JavaScript variables.
You also need permission to preview and publish all changes that you make during the following setup.

If you have Admin permissions you can import this JSON configuration file and use it as a starting point for the setup. You will need to check and modify some variables according to your website structure, to get all the required information for the Insights tracker.

Custom HTML Tag

The first thing to do is to create a new custom HTML tag. You can name it Smartocto Insights.

<script type="text/javascript">
/* CONFIGURATION START */
var _ain = {
  id: "1234",
  maincontent: "article",
  article_type: "article",
  access_level: "free",
  reader_type: "anonymous",  
  url: {{CI url}},
  postid: {{CI postid}},
  title: {{CI title}},
  authors: {{CI authors}},
  pubdate: {{CI pubdate}},
  sections: {{CI sections}},
  tags: {{CI tags}}
};
/* CONFIGURATION END */
(function (d, s) {
  var sf = d.createElement(s);
  sf.type = 'text/javascript';
  sf.async = true;
  sf.src = (('https:' == d.location.protocol)
    ? 'https://d7d3cf2e81d293050033-3dfc0615b0fd7b49143049256703bfce.ssl.cf1.rackcdn.com'
    : 'http://t.contentinsights.com') + '/stf.js';
  var t = d.getElementsByTagName(s)[0];
  t.parentNode.insertBefore(sf, t);
})(document, 'script');
</script>

'https://d7d3cf2e81d293050033-3dfc0615b0fd7b49143049256703bfce.ssl.cf1.rackcdn.com'

id

This is a required property that will be sent by our Support team via email support@smartocto.com.
Each domain within Smartocto Insights must have a unique domain ID that remains unchanged.

maincontent

It’s also a required property that will be sent by our Support team.
Smartocto Insights tracker needs to know exactly where the actual content resides on the page so it can count the words and calculate the height and position relative to the window.

maincontent property value is actually a CSS selector or a comma-separated list of CSS selectors that shows the tracker where to look for the content.

For example, the content usually has the title (within a <h1 class="article_title"> tag), some introduction text or a description (<div class="article_intro">) and full content (<div class="article_body">).

maincontent would look like this in this example:

maincontent: ".article_title, .article_intro, .article_body"

access_level and reader_type

Those two properties are used if your site uses some kind of paywall system, so they should be set accordingly.

Please read the Paywall Setup page from our documentation for more details.

Trigger setup

The trigger type should be Page View - DOM Ready.

Please note that the script should only load on article pages you want to track so it has to be
conditioned.

For example, if every article has the /article/ in the Page Path (built-in GTM variable), the easiest way would be to put a condition for a trigger to fire 'on Some DOM Ready Events', and then set the Page Path "starts with" /article/ slug.

Alternatively, if you have some Data Layer variable representing the Article ID, you can set this
trigger to fire only when that variable exists.
It’s only important not to fire it on non-article pages (home, search, category, tag, 404 and similar).

Variables setup

Each parameter in your smartocto Insights (SOI) tag should be populated with a proper value.

There’s a chance you already have most of the required variables defined in your dataLayer which you can just re-use for the smartocto Insights tag.

If not, you need to define a Custom JavaScript variable for each property.

SOI url

Returns the canonical URL of an article.

function () {
  return document.querySelector("link[rel='canonical']").href;
}

SOI postid

Returns a unique ID for each article.
Every CMS generates a unique ID for every piece of content that you want to publish.
For example, in WordPress, you may use the postID from the shortlink tag:
<link rel='shortlink' href='https://www.example.com/?p=1234' />

function () {
  var ciUrl = document.querySelector("link[rel='shortlink']").href;
  var ciPostid = ciUrl.split('=').pop();
  return ciPostid;
}

SOI title

Returns the value from the og:url property:

function () {
  return document.querySelector("meta[property='og:title']").content;
}

SOI pubdate

Returns the published date in ISO 8601 format:
<meta property="article:published_time" content="2019-01-23T15:16:11+00:00" />

function () {
  return document.querySelector("meta[property='article:published_time']").content;
}

The following example returns the current date in ISO 8601 format:

function() {
  var currentDate = new Date();
  return currentDate.toISOString();
}

SOI authors

Returns an author name or comma-separated list of authors.

When multiple authors contributed to the article, it’s important that you send us authors as a comma-separated string.
You cannot use a different separator.

If authors sign articles differently each time (e.g. John Smith, J. Smith, J.S.) then it would be best if we find a way to always send us just one version.
There is an option in the system to manually group them afterward, but it’s best if the data is clean from the start.

For example, if you have this information in the meta tag, like this:
<meta property="article:author" content="Jack London" />

function () {
  return document.querySelector("meta[property='article:author']").content;
}

SOI sections

The Data layer variable, called 'CI Sections' - information about the section (or the category) article belongs to.

Sections are the primary way of organizing content in Smartocto Insights.

We use sections as "containers" for comparing one article against each other.
This parameter should be filled with a single section, sections with the hierarchy, or multiple sections as comma-separated strings.

Sections usually reflect the main menu structure on a site:
• Politics
• Economics
• Technology
• Sport
• Lifestyle
• ...

All of the sections can have one or more subsections, which should be grouped (nested) with the > separator.

For example, if an article belongs to section Football, which is part of Sport section, the final value should contain this value: Sport>Football.

If you have a dedicated category tag, this would be the simplest solution:
<meta property="article:category" content="Economics" />

function () {
  return document.querySelector("meta[property='article:category']").content;
}

SOI tags

Values from the tags parameter are called Topics in Smartocto Insights. Most CMS solutions provide an option to enter tags or keywords for each article. If there are more tags, they should be comma-separated, just like authors and sections.

For example, tags can be shown in the page source like this:

<a href="http://example.com/search/tag1" rel="tag">Tag 1</a>
<a href="http://example.com/search/tag2" rel="tag">Tag 2</a>
<a href="http://example.com/search/tag3" rel="tag">Tag 3</a>

This would be a custom JavaScript function that returns "Tag 1,Tag 2,Tag 3":

function () {
  var tags = [];
  var tagElements = document.querySelectorAll('[rel="tag"]');
  for (i=0; i<tagElements.length; i++) {
    tags.push(tagElements[i].innerHTML);
  }
  return tags.join();
}

 

If you have any questions or concerns please contact us via email at support@smartocto.com