A recommendation widget is a text-graphic block in which creatives are arranged among other content useful to the user. This arrangement allows you to attract the user's attention and present the advertisement in the form of a recommendation.
The recommendation system inside the media looks like a “Read also” or “You will also be interested” block.
How the recommendation system works
The recommendation widget uses several algorithms to match users with relevant content.
1. Collaborative filtering (main algorithm)
- selects articles that may be of interest to readers of the current text
- analyzes user behavior by identifying similar interests
- works on the principle of “other users reading this were also interested in...”.
2. Algorithm “Popular”
- shows the most popular materials for a certain period
- takes into account not only the number of views, but also the rate of popularity growth (bursts of interest)
3. Time on page
If a user reads an article for a long time, the system realizes that the content is really interesting.
Recommendations are updated every 20 minutes.
Articles are selected from the same site where the widget is installed. At the same time, there is a rotation of articles - content is constantly changing, competing for users' attention.
As a result, the recommendation system makes the selection dynamic, relevant and focused on the interests of the audience.
How to add a recommendation widget
In the “Sites” section → “Placements” tab click “Add placements”.
- Enter a name for the new ad block.
- Select the “Recommendation widget” block option.
- Set the design settings.
- Select the slots where your ads will be placed.
- Set block settings:
- CPM floor
- Limit of impressions to a unique user per period
- Interval between impressions
Most of the settings are optional. You can leave the initial values.
Design settings
Grid
- Columns (from 1 to 10)
- Rows (from 1 to 10)
- Minimum column width, px (you can set an eigenvalue)
- Maximum column width, px (you can set an eigenvalue)
- Gap, px (you can set an eigenvalue)
Banner title
- Title color (can be set as custom)
- Hover link style (you can set your own)
- Font (you can set your own value, default is Arial)
- Font size (you can set your own value, default is 20)
- Underlining (options “Links are underlined” or “Links are not underlined”)
Banner text
- Text color (you can set your own)
- Font (you can set your own value, default is Arial)
- Font size (you can set your own value, default is 16)
Images
- Aspect ratio height (you can set your own value)
- Aspect ratio width (you can set your own value)
- Boundary rounding (from 0 to 200)
- Animation in viewport
Setting blocks
This section displays columns and rows selected at the “Grid” stage. In each block you can choose what will be displayed in it:
- ads
- recommendation
A recommendation widget should have at least 1 ad block.
Meta-tags
How to set my own image for recommendation articles?
To install an image, add tags to the page: <meta property="og:image" content="path_to_image"> (more details below, in the Open Graph section).
Excluding articles
To exclude some articles from recommendations (for example, promotional articles), add the tag: <meta property="vkadnet:recommendations" content="false">
In articles that should be in the recommendations, specify the tag: <meta property="vkadnet:recommendations" content="true">
What should I do if the recommendation widget shows a deleted article?
1) Add a recommendation widget to the 404 page
2) Add a script in <head>:
<meta property="og:type" content="0">
<script>
const ogUrl = document.createElement('meta');
ogUrl.setAttribute('property', 'og:url');
ogUrl.setAttribute('content', window.location.href);
document.head.appendChild(ogUrl);
</script>
After that, the 404 page will be removed from indexing and the deleted article will not be shown in the recommendations.
How to mark up recommended articles
In order to display recommended articles correctly and aesthetically, you need to use the Open Graph protocol. It allows you to make your web page part of the social graph by allowing platforms to automatically adjust the display of content.
What is Open Graph
Open Graph is a set of meta tags that turns any web page into a rich object for social networks and platforms. This protocol makes your content look attractive and neat on platforms such as VK, Odnoklassniki, Telegram and others.
Basic metadata
To make a web page an object in the social graph, you need to add basic metadata to the <head> of your document.
4 mandatory properties:
- og:title — the title of the object, how it will be displayed in the social graph. It is important that this title is not equal to the <title> tag, so you do not need to write the name of the site in it (see example below).
- og:type — for correct work of recommendation algorithms, it is recommended to use og:type with the value article only on pages with articles. This will help to clearly identify content for data collection and recommendation generation.
On category pages, lists or other types of pages that are not intended to be displayed in the recommendation block, the og:type value should not be set at all. If the value is set incorrectly, such pages may be downloaded by the system and included in the list of recommendations, which may negatively affect the relevance of the content. - og:image — URL of the image that will represent the object.
- og:url — canonical URL of the page, which will be used as a unique identifier of the object.
You can read more about Open Graph in the official documentation.
- Example of basic metadata for an article about the movie “The Rock” (1996)
<html>
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/">
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg">
</head>
</html>
Rules for the application of recommendation technologies
In order to select advertising materials that will be of interest to each user, VK Ads applies technologies for selecting individual advertising content.