Implementation requirements

• Insights script for historical statistics, AMP, FIA, and conversion tracking
• Tentacles script for real-time tracking, headline A/B testing, Waves, and Smartify

1. Insights script tracking
   1.1. Custom setup
   1.2. GTM setup
   Paywall setup
   SPA websites
   Testing the Insights script
2. Tentacles & Real timeTentacles (real-time) script tracking
   2.1 Tentacles A/B-testing - script implementation
   2.2.1 Tentacles Photo A/B-testing - requirements
   2.2.2 Tentacles Photo A/B-testing - flickering
   Real time - Feed
   Real time - Newsletter
   Real time - Facebook
   Real time - LinkedIn
   Real time - Push notifications
   Real time - YouTube
   Real time - Video analytics
3. AMP tracking
4. FIA tracking
5. Conversion script tracking
6. Mobile app tracking

Stage 1 - Insights script implementation

1.1. Custom setup

1.2. Google Tag Manager setup

Paywall setup

Stage 2 - Tentacles implementation

2.1 Tentacles script implementation

<script>window.tentacles = {apiToken:'API-TOKEN'};</script>
<script src="https://tentacles.smartocto.com/ten/tentacle.js"></script>

It can also be implemented using the GTM container.

Our Support team will provide the 32-character API_TOKEN which is unique for each website.

2.2.1 Tentacles Photo A/B-testing - requirements

<article>
 <a href="https://www.yourdomain.org/path/to/story/">
  <img src="https://www.yourdomain.org/path/to/teaser-image.jpg" />
  <h1>John builds largest replica of an octopus in LEGO</h1>
 </a>
</article>

<article>
<img src="https://www.yourdomain.org/path/to/teaser-image.jpg" />
 <a href="https://www.yourdomain.org/path/to/story/">
<h1>John builds largest replica of an octopus in LEGO</h1>
 </a>
 
</article>

We support current standards and best practices of displaying images in modern web browsers. Although we will always be working to expand the methods of image display we support, the sheer breadth of variables prevents us from being compatible with every method.

Image paths

In order to be able to A/B-test a photo, the image-tags need to contain the full location of the image(s):

<!-- Unsupported -->
<img src="/relative/path/to/teaser-image.jpg">

<!-- Supported -->
<img src="https://www.yourdomain.org/path/to/teaser-image.jpg">

Supported image formats

✅ We support testing on responsive <picture> elements with <source> and <img> children with srcset attributes.

Example: 

<picture>
    <div class="thumb-logo"></div>
    <source srcset="https://smartocto.com/images/large.jpg, https://smartocto.com/images/large-retina.jpg 2x" media="(min-width: 1200px)">
    <source srcset="https://smartocto.com/images/medium.jpg, https://smartocto.com/images/medium-retina.jpg 2x" media="(min-width: 976px)">
    <source srcset="https://smartocto.com/images/small.jpg, https://smartocto.com/images/small-retina.jpg 2x" media="(min-width: 576px)">
    <img srcset="https://smartocto.com/images/mobile.jpg" alt="A picture">
</picture>

✅ We support testing on responsive <img> elements with src and srcset attributes.

Example:

<img src="https://smartocto.com/images/image.jpg" 
  srcset="https://smartocto.com/images/image1x.jpg 1x, 
  https://smartocto.com/images/image2x.jpg 2x">

✅ We support testing on non-responsive <img> elements with a single src attribute defined on page load.

Example: 

<img src="https://smartocto.com/images/image.jpg">

✅ We support testing on images with lazy load source or source-set attributes for any of the above formats (i.e. data-src or any other attribute names that your website uses for this purpose).

Example:

<img data-src="https://smartocto.com/images/image.jpg"> 

<img data-img-sm="https://smartocto.com/images/image1.jpg"
  data-img-lg="https://smartocto.com/images/image2.jpg">

Unsupported image formats

❌ We do not support testing for <img> elements that are not descendants of an <a> tag (anchor element). Tests can only be initiated on <img> elements that are descendants of an anchor tag linking to the target article.

Example:

<!-- Unsupported -->
<article>
 <img src="https://www.yourdomain.org/path/to/teaser-image.jpg">
 <a href="test.com/article1">
  <h3>Headline Text</h3>
 <a>
</article> 


<!-- Supported -->
<article>
 <a href="test.com/article1">
  <img src="https://www.yourdomain.org/path/to/teaser-image.jpg">
 </a>
 <a href="test.com/article1">
  <h3>Headline Text</h3>
 <a>
</article> 


<!-- Also supported -->
<article>
 <a href="test.com/article1">
  <img src="https://www.yourdomain.org/path/to/teaser-image.jpg">
  <h3>Headline Text</h3>
 <a>
</article>

❌ We do not support testing for <picture> tags that do not properly have an <img> element as a child.

Example:

<picture>
 <div class="background-css-image-here"></div>
</picture>

❌ We do not support testing images that use the background-image CSS property.

Example:

<div style="background-image: url('https://www.yourdomain.org/path/to/teaser-image.jpg');"></div>

❌ We do not support testing on responsive <img> elements that have their src attributes dynamically altered by JavaScript.

• This can usually be determined by inspecting an <img> element at mobile and desktop breakpoints: if the srcs differ at each breakpoint, JavaScript is dynamically altering the src.

• smartocto code does not have a way to determine whether this is or is not the case as the markup is indistinguishable from supported elements. In the rare case that your site uses this as well as supported formats, use caution when making a test.

❌ We do not support testing on <picture> or <img> elements that are injected dynamically into the page by JavaScript dependent on user action.

Partial homepage compatibility

If your website uses both supported and unsupported formats for different positions on the homepage, the test will only run successfully on the supported formats. It will still be possible to run headline tests on positions with unsupported image formats. It is advisable for clients to do their own inspection of the page layouts to confirm if a image test can run in each section.

2.2.2 Tentacles Photo A/B-testing - flickering

When incorporating flicker handling into your website, make sure to insert the following code into the <head> section of your site's HTML. This code should be positioned among the initial scripts loaded within your <head> tags.

window.tentacles = { 
  apiToken: '###########',
  ...,
  flickerHandling: true
};

Real time - setup

Real time - Feed

Real time - Newsletter

Real time - Facebook

Real time - LinkedIn

• go to the Admin area of ​​the company page:
• go to the part where you can add administrators to your page.
• when adding the user, type 'SmartOcto' and add this user.
• save the changes and the connection is made.
• smartocto will follow up on the connection
• smartocto Support team will configure the crawler which will get the data from the client's LinkedIn page
• after that, you will start seeing the LinkedIn badges in the real-time dashboard for all stories that were published on LinkedIn from the moment the crawler becomes active

Real time - Push notifications

<item>
    <title>Title of the story 123</title>
    <link>https://yourdomain.com/story-123</link>
    <pubDate>Wed, 02 Nov 2022 13:31:00 +0100</pubDate>
</item>
<item>
   <title>Title of the story 456</title>
   <link>https://yourdomain.com/story-456</link>
   <pubDate>Wed, 02 Nov 2022 17:42:00 +0100</pubDate>
   <pushed>true</pushed>
</item>
<item>
    <title>Title of the story 789</title>
    <link>https://yourdomain.com/story-789</link>
    <pubDate>Thu, 03 Nov 2022 12:34:56 +0100</pubDate>
</item>

Example 2:

<item>
    <title>Title of the story 123</title>
    <link>https://yourdomain.com/story-123</link>
    <pubDate>Wed, 02 Nov 2022 13:31:00 +0100</pubDate>
</item>
<item>
    <title>Title of the story 456</title>
    <link>https://yourdomain.com/story-456</link>
    <pubDate>Wed, 02 Nov 2022 17:42:00 +0100</pubDate>
</item>

Example 3:

{
  "items": [
    {
      "title": "Title of the story 123",
      "link": "https://yourdomain.com/story-123",
      "pubDate": "Wed, 02 Nov 2022 13:31:00 +0100"
    },
    {
      "title": "Title of the story 456",
      "link": "https://yourdomain.com/story-456",
      "pubDate": "Wed, 02 Nov 2022 17:42:00 +0100"
    },
    ...
  ]
}

Custom video tracking