Starting with Vistag

  1. Terminology

    1. Dashboard - a web panel at https://vistag.com containing registration, settings and stats.
    2. Webscript - a script pasted into the client's website code. It enables you to place and view vistags.
    3. Domain - domain of the website in which the script has been placed.
  2. Registration

    1. Parts of the registration include

      1. Domain (url address) where the script will be pasted and where we will verify the correct placement of the script
      2. Registration email and the password. Upon registration, you are able to add further users with access to your account, the first email however will always remain as the administrator. All invoices (for the full version) and other documents are also sent to this email address.
    2. In the second step of the registration, you will be presented with a script

      <script defer src=“https://cdn.vistag.com/script.js#1”></script>
      
      1. It is a link to a javascript file that contains the entire Vistag application.

      2. The defer attribute makes the browser load the Vistag app after the entire content has been loaded.

      3. The value after # in the URL marks the account ID.

      4. You must insert the script into the HTML code of your website before the </head> tag. It is however possible to input this script into other convenient places in the code as well.

      5. Upon inserting the script, the system will automatically detect a correct connection and updates the dashboard. Data for the particular website will now be visible in the dashboard.

      6. You will now be able to see a small “+” button on images on your website when you view it in your browser. Therefore, all the tagging happens on your own website, not in any kind of a dashboard.

      7. In the dashboard / Websites settings you can set the following:

        1. The color of the vistags and CTA buttons
        2. The default CTA of buttons
        3. Default currency
        4. The z-indexu level. Useful for fixed header bars on your website etc.
        5. Your own CSS which can be applied to the vistags however you need
        6. UTM parameters that will add to all URLs across the board
        7. Google Analytics implementation
        8. IP address 'do not track' exclusions
  3. Using Vistag on your website

    1. Based on an authentication cookie, the system recognizes a user that is logged in to Vistag, the admin. Admin may place vistags and view stats without influencing the data gathered. Regular visitors do not have the option to place any tags, they can only see them. However regular visitors are included in the stats.

    2. The authentication cookie lasts for 30 days or less (depends on your browser settings).

    3. If the cookie times out, it's renewed simply by logging in to https://vistag.com

    4. Cookie may be issued for more computers / users.

    5. The same script may be used on more domains of the client (if your subscription package includes this service). Domains are then automatically separated in your dashboard.

    6. How we identify images and apply vistags.

      1. Upon loading the script, our app goes through all ideal <img /> elements of the site while simultaneously tracking changes, thus supporting lazy load, dynamically loaded content and so on.
      2. The pictures are differentiated by their src attribute (and account id). If you place vistags onto a picture that is being used on multiple placements with the same src attribute, it will contain the same vistags, regardless of placement.
      3. The src attribute is compared to our database and if there's any record, corresponding vistags will be shown.
      4. Parameters in the src address are ignored. Address img.jpg?parametr=x is the same as img.jpg. We also do not differentiate between http://... and https://... or www.domain.com/img.jpg and domain.com/img.jpg.
      5. The application is thoroughly optimised for maximum javascript performance and the number of requests.
    7. 'Ideal' images for tagging criteria

      1. Elements <img />.
      2. Images larger than 200x150.
    8. Images excluded from the identification

      1. Images including the class = “vistag-off” attribute are ignored by the script.
      2. Images in CSS elements background-image.
      3. Images with animations (carousel, zoomy, hover events etc.).
      4. Images with a changing aspect ratio.
    9. Photogalleries (lightboxes) are supported, but it's neccessary to properly set up the z-index level for the bottom layer (website) and top layer (lightbox). Both layers can be set up via a CSS inheritance in dashboard / Websites settings, for instance:

      .content .vistag-container {z-index: 100 !important;}
      .lightbox .vistag-container {z-index: 2147482000 !important;} 
      .vistag-container-lightbox {z-index: 2147482000 !important;} /*alternative*/
      
    10. The Vistag app supports responsive loading of images, provided that:

      1. The <img /> element has a src attribute set as its key attribute (which is crucial for our script) and the srcset attribute for responsivity (crucial for the browser only).
      2. If the src attribute is being changed through javascript (jQuery etc.), the new value of src is considered as a new, different image. Except for differences values in resolution – these images for instance would be considered identical by the script:
        http://domain.com/images/1024/768/image.jpg
        http://domain.com/images/640/480/image.jpg
        
        or
        http://domain.com/images/image_1024x768.jpg
        http://domain.com/images/image_640x480.jpg
        
      3. The script dynamically reacts to changes in the size of the element (change of windows size, change off classes or in-line style).
  4. Google tag manager

    1. The Vistag application supports inputting the script through GTM. Start by setting up a “new tag”, input the Vistag script through “Custom HTML”, check “Triggering in all websites” and you're done.
  5. WordPress

    1. The Vistag application supports inputting the script through WordPress.
    2. Script may be inputted into the template as an HTML or
    3. You may also use the Vistag plugin https://wordpress.org/plugins/vistag/
    4. For setting up the WordPress plugin:
      1. Open Plugins > Add New
      2. Search Vistag
      3. Install
      4. Activate Vistag plugin through the Plugins tab
      5. Open Vistag from the left panel
      6. Click on Log in. You will be redirected to our site where you'll need to Sign up or Log in. The authentication cookie will be saved and you'll be redirected back to WordPress. Now you're ready to start tagging.
  6. The tagging process

    1. Provided the authentication cookie is active, the process starts on your website. Click the “+” button placed on the rigt side of images that comply with the criteria above. .

    2. Choose a position where you want to place the vistag. Feel free to edit the position afterwards.

    3. Choose one of the vistag types

      1. Product - Link to a product with a picture, title, manufacturer and price. CTA button can include animated text.
      2. Link - Link with a picture, title and text. CTA button can include animated text.
      3. Text - A text field with up to 200 characters.
    4. In case you choose product or link, the URL is analysed with Vistagbot that pulls useful pictures and headline for the particular link. If the target URL contains appropriate metatags, other parameteres are also loaded. To make the automation as smooth as possible, it's vital that the target site contains the following tags in the detail of each product:

      <meta property=“vistag:type” content=“product” />
      <meta property=“vistag:image” content=“http://example.com/images/sample.jpg” />
      <meta property=“vistag:title” content=“Big pocket” />
      <meta property=“vistag:price” content=“99.50” />
      <meta property=“vistag:currency” content=“EUR” />
      <meta property=“vistag:manufacturer” content=“Sony” />
      <meta property=“vistag:url” content=“http://example.com/productpage/” />
      
      1. Meta tags are loaded immediately when you input the target URL
      2. All product vistags are being queued for scanning every hour or so. The bot checks the target URL of 'each' featured product for meta tags. If the bot doesn't find meta tags, all vistags from that particular domain are excluded from the scanning process, as the assumption is that the client either applies metatags to all images or that they chose not to do so at all. If the metatag vistag:price is found, we'll update all vistags with the particular URL
      3. The bot is marked with this user agent: Mozilla/5.0 (compatible; Vistagbot/1.0; +http://www.vistag.com/)
      4. Metatag vistag:price is type float. All others are type string.
      5. Metatag vistag:currency must contain a currency code following ISO 4217. If it isn't filled out, Vistag will use the default currency from dashboard / Website settings.
      6. No metatags are mandatory.
  7. Stats – Vistag collects the following data:

    1. Page - number of pageviews of every page containing at least one vistag

    2. Medium (image) - all stats or each image containing at least one vistag.

      1. Number of views of the given image. If at least 75% of an image is viewed for at least 500ms, that constitutes a view. During one pageview, only one view will count.
      2. Time spent viewing the picture – we simply add up the time spent on the picture that complies with the criteria in point no. 1.
    3. Vistag

      1. Number of opening a vistag detail (mouse over vistag, multiple openings count as well)
      2. Number of clicks on the CTA in product and link vistags
      3. Time spent on an opened vistag.
    4. UTM parameters may also be added to the target URL. You can set these in the dashboard / Websites settings. These parameters are global for every domain.

    5. In dashboard / Websites settings you can set up the Google Analytics UA and connect your Google Analytics account. Vistag then sends these events to the account:

      1. Show - view of a vistag (the target URL is a part of the event).
      2. Click - proklik vistagu (the target URL is a part of the event).
    6. In dashboard / Websites settings you may also set up a list of IP addresses to exclude from the stats.

  8. Limits of the service

    1. Vistag offers three tiers of service:
      1. Free The basic free package
      2. Premium First month upon registration, it is possible to use the full advantage of this package in trial mode.
      3. Enterprise An individual package set to match your particular needs
    2. In the dashboard / Subscribe you may set the desired package for any given account. The payment happens annually or monthly, that is up to you to decide. The subscription may be cancelled at any time. We will invoice you automatically upon payment and we send the invoice to the registration email of the admin of the account. The system respects VAT payers in the EU.
    3. Limits
      1. Number of pages where you may use vistags. For instance domain.com and subdomain.domain.com are two different sites (we don't differentiate between sites that do and don't use www.. The scripts will be inactive for any page that goes above the limit for number of pages. The order of websites can be arranged in the dashboard / Websites settings.
      2. Number of users for any given account that can access the Vistag account on their own.
      3. Number of views the number of calls for the script from the target website. 1 visit = 1 refresh of the page (regardless of the number of images on site). Upon exceeding the limit, a "Vistag" watermark will be shown on the images.
      4. Other services include the possibility to change the color of vistag, switch the Vistag signature off in an opened vistag, the access to UTM, GA and other settings. For more see pricing.

 

Lookbook documentation

  1. Requirements

    1. You need to have a working webscript applied on your domain.
    2. In order to generate the lookbook, the following piece of code needs to be placed in the corresponding section of the website:
      <div class="vistag-lookbook"></div>
      
    3. It is possible to use different elements of the same class, the element however can be only one.
  2. The Lookbook function is available as a part of the Enterprise paid package.

  3. Functionality

    1. If the script detects a lookbook element, it will automatically generate a set of images tagged and saved within the given account (script). Only vistagged images are pasted into the lookbook. The order is set from 'most recent' and backward.
    2. The images are arranged into one or more columns, based on the visitor's viewing resolution.
    3. If the visitors scrolls all the way to the bottom of the page, another set of images is loaded. There is a limit for the maximum number of loaded images.
    4. You can manage the lookbook (adding / removing lookbook and settings) in the Dashboard (under construction at the moment).