In order to improve the result of ad monetization for sites where a user has decided to enable ads, Vivaldi has now included support for ad attribution. You can read more about why this change was implemented here.

This page mainly aims to describe how Ad Attribution is implemented and explain the choices that led to this implementation. The goal is to be fully transparent about what may be allowed through and when.

As with the rest of the ad blocker code, this implementation is fully available as part of our released source code bundles. This allows you to fully verify that our implementation is as described here and in other articles.

Allow Ad Attribution rules

The main challenge with ad monetization is that many ad providers rely on known trackers in order to prevent click fraud and ensure that conversion has occurred before paying out. The only solution to this is unfortunately to allow such trackers to load, regardless of what our tracker blocking lists say. However, we also want to ensure that these trackers are not loaded as part of general browsing.

In order to satisfy all these requirements, I have extended the normal ad blocker rules format. This is the same format used by all popular ad-blockers and rules lists. The extended format consists of three new options that will be detailed below.

This implementation was chosen as it allows us to reuse most of the ad-blocker functionality to effectively accomplish the goal of ad attribution while also allowing us to use the automatic update mechanism coming with ad blocker rules lists. This ensures that we can promptly fix any mistake.

How it works

Ensuring that ad attribution works is a complex task that takes multiple steps to accomplish. In general, the focus is on the site which uses ads for support, however most of the work is done after clicking on a given ad. As part of the implementation, we go through the following states.

1. Navigating to a site which the user wants to support.

When this occurs, the ad attribution implementation records that it should be looking for ad clicks. We say that it is primed.

Ad attribution is normally primed on any site where the ad blocker is disabled, regardless of the state of the tracker blocker. Priming ad attribution means we will check whether the next navigation is an ad click. It has no other effect.

In order to be able to support ad attribution for our partner search engines even when ad blocking is enabled for all sites, we introduced the attribute-ads rule option:

@@||partner-site.example.com/page-i-want-to-Support$attribute-ads

This causes ad attribution to be primed on the matching page, regardless of the ad blocker status. In practice, we would also add a document option (identical to the document allow rules supported by AdBlockPlus), in order to allow the partner site to show ads:

@@||partner-site.example.com/page-i-want-to-Support$attribute-ads,document

2. Matching an ad when Ad Attribution is primed.

When this occurs, the ad attribution implementation will examine the URL being loaded as well as the URLs of any redirections which occurs as part of loading.

If none of those URLs matches a known ad, then ad attribution remains disabled. It may be primed again if the site where the user ends up is one the user wants to support.

If the URL matches a known ad, then ad attribution moves to the next stage and the process continues.

The ad-query-trigger option is used to indicate that a rule should be used to match ad URLs:

||advertiser.example.com/ad-URL$ad-query-trigger=&click-id-param=|&other-click-id-param=

The ad-query-trigger option takes a value that is composed of several query string fragments, separated by |.

Once a document matching the pattern for an ad-query-trigger rule was reached, directly or via redirect, further redirections will be examined. For those redirections, the query string of the URL will be examined. If it contains any of the strings provided as value to the option, ad attribution will be fully enabled and the origin of the matching URL will be stored as the ad landing origin for this tab.

The ad-query-trigger option requires a pattern that provides a domain name in the ad URL pattern. This means, the pattern should be host-anchored and the domain should be followed by ^,/ or ?

Once ad attribution is enabled for a specific tab and origin, that state is preserved so long as the tab navigates within this same origin. Navigating to a different origin will cause ad attribution to be disabled, but it’s state will be preserved for a half hour. Further navigations within the deadline extend it to a half hour. If the deadline passes, further navigations outside the original origin clear the state fully. Navigating back to the landing origin will re-enable ad attribution.

The ad attribution state is normally confined to the tab where it was enabled. However, a same-origin navigation to a new tab from a tab where it is enabled will preserve its state.

Ad attribution also always gets disabled seven days after being triggered.

3.Matching trackers when ad attribution is enabled

When ad attribution is enabled, it examines resources loaded on pages whose origin match the landing origin. In order to indicate which resources should be allowed for ad attribution, rules with the ad-attribution-tracker option are used.

@@||advertiser.example.org/track-click$ad-attribution-tracker=advertiser.example.com/&click-id-param=|advertiser.example.net/&ad_id=

The body of this rule matches the url of the resource itself, while the value of the ad-attribution-tracker option provides the context in which it should be allowed. The value of this option consists of a pairs of domain/query-fragment separated by |. The domain part is matched against the domain of the ad that was clicked (the ad itself, not its landing origin). The query-fragment is matched against the query fragment used to enable ad attribution. A pair matches if both components are a match. This rule matches if the resource url matches and any of the domain/query-fragment pair is a match. When a tracker is allowed this way, it bypasses blocking both in the ad blocker and the tracker blocker.

These rules are currently only available in the “Allow Ads from our Partners” list that is provided by Vivaldi. This is to avoid situations where they may be employed in malicious rules lists. You can examine our list to learn of which partner sites have ad attribution enabled and which trackers are allowed as a result here.

Pop-out Video, aka Picture-in-Picture, is a popular feature on desktop, but did you know it’s also available on Android and iOS? The main difference is that, on your mobile device, you can’t browse other tabs in Vivaldi while Pop-out Video is enabled, but you can use most other apps.

Enable Pop-out Video on iOS

1. While browsing with Vivaldi, find a video you want to watch.
2. Press play and enable full-screen view of the video.
3. Go to your phone’s home screen.

The video will continue playing in a small rectangle on your home screen. You can move the video by dragging it around and use the two-finger zoom gesture to change the size of the video.

Tap on the rectangle to see video controls. Pop-out Video includes controls for:

• Pausing the video.
• Fast forwarding or rewinding the video by 10 seconds.
• Closing the popped-out video.
• Returning to the main window.

Due to restrictions set by Google, the feature may unfortunately not work on YouTube’s website.

Store your account login credentials in the Vivaldi browser for faster browsing.

Save passwords

To save a password:

1. Log in to the account on the site you want to save the login credentials on.
2. Immediately after logging in, tap Save on the dialogue that appears at the top of the screen.

Tap on Settings > Never for this site, if you don’t want to save any passwords for the site you have open.

To toggle saving passwords on or off:

1. Open the Vivaldi menu > Passwords.
2. Tap on Settings in the bottom left corner.
3. Tap on the Offer to save passwords toggle.

---

View and manage passwords

To view your saved passwords:

1. Go to the Vivaldi menu > Password Manager.
2. Verify your identity.
3. Tap on the saved entry you want to view.
4. You’ll see the site link, username, password, and a note.

To view the password, tap on the eye icon.

To copy the password:

1. Tap on the Password field.
2. Select Copy.

To edit a saved password entry:

1. Go to the Vivaldi menu > Password Manager.
2. Verify your identity.
3. Tap on the saved entry you want to update.
4. Tap Edit in the top right corner.
5. Make the changes.
6. Tap Done.

Password Manager widget

You can add a shortcut to view your saved passwords in the form of a home screen widget.

To add the Passwords Manager widget:

1. Long-press on the home screen.
2. Tap on Edit in the top right corner and select Add Widget.
3. Find Vivaldi and tap on it.
4. Swipe to the Password Manager option.
5. Tap Add Widget.

---

Delete passwords

To delete a saved password:

1. Go to the Vivaldi menu > Password Manager.
2. Verify your identity.
3. Tap on the saved entry you want to remove.
4. Tap Edit in the top right corner.
5. Tap Delete password.

---

Log in in other apps with the help of Vivaldi’s Password Manager

You can use Vivaldi as a password manager to autofill login details in other apps you’ve installed on the device.

To start using Vivaldi as a password manager:

1. Go to your phone’s settings > General > Auto-fill & Passwords.
2. Enable Vivaldi.

To log in:

1. Tap on the username or password field on the login page.
2. Tap the key icon.
3. Select Vivaldi.
4. Verify your identity.
5. Select the login credentials you want to use.
6. Log in.

Vivaldi offers several options to customize your browsing flow in the iOS app. Continue reading to learn about a few of them.

Desktop view

To display a desktop version of the website, instead of the mobile version commonly displayed on smaller screens, open the  Vivaldi Menu and select Request Desktop Site.

To permanently display desktop versions of all websites:

1. Go to  Vivaldi Menu > Settings > Content settings > Default site view.
2. Select Desktop.

---

Homepage

On the bottom toolbar (when Tab and Address Bar are at the top of the screen), you have a choice between two buttons for the middle button. By default, it’s a search button, which will focus on the Address Field, so you can type in the next link or search keyword. The other option is to have a Home button, which will take you to either the Start Page or a website of your choice.

To enable the Home button:

1. Go to Vivaldi menu > Settings > General.
2. Enable Display Home Button.

To set a web page of your choice as the homepage:

1. Go to Vivaldi menu > Settings > General.
2. Select Specific Site.
3. Enter the web page link.

---

Web Apps and Home Screen shortcut

Learn about the feature on the Help page about Web Apps and Home Screen shortcuts on iOS.

The main Vivaldi Menu in Vivaldi on iOS gives you access to most of Vivaldi’s key features and tools.

Access the Main Menu

Whether you’re using the browser on a small phone screen or a large tablet screen, the menu can always be accessed from the right side of the Address Bar. Just tap on the  Vivaldi logo to open it. The options available in the menu depend on whether you have open a web page or the browser’s Start Page.

To close the menu, tap on the feature you want to use or on an area outside the menu.

---

Customize the menu

You can customize the order and visibility of the menu to make sure that the options you use most are always within easy reach.

To customize the menu:

1. Open the Vivaldi menu.
2. Long-press on one of the menu options in the top row to open a context menu.
3. Select Customize menu.

To reorder menu entries:

1. Long-press on the menu item you want to move. With items in the list, long-press on the three lines on the right side.
2. Drag and drop it to its new location.

To hide menu items:

• On the top row of menu items, tap on the Hide button in the top left corner.
• In the list, tap on the checkmark in front of the menu item.

The Webpage widget on the Dashboard loads a normal but slightly restricted webpage. You can make custom optimized widgets by creating a normal webpage.

Webpages loaded as Webpage widgets are loaded using a Mobile User-Agent.

The widget’s viewport is 394×380 pixels (an almost square 39∶38 aspect ratio).

All dialog interactions are disabled, including alert() and Permissions Prompts. The Webpage widget shares security-context and permissions across regular tabs. Your users can grant permissions, like geolocation, in a regular tab to grant that permission to your Webpage widget.

---

Ensuring Widget Performance

To make your widget performant, it’s important to deploy on-device caching using HTTP Caching. The stale-while-revalidate caching directive can help you achieve a compromise between an instantly-loading widget and up-to-date information.

The Start Page is designed to give you full control of your digital life in one centralized space. Its flexibility allows you to create a unique dashboard personalized just for you. Continue reading to learn how to customize the Start Page with Widgets.

Widgets

To add a new widget:

1. Click on Widgets at the bottom of the Start Page.
2. Click on the widget you want to add.
3. If relevant, go through widget-specific options, such as selecting an account or a folder to display.

Some widgets, like Date and Tip of the Day, can be added once, but most can be added multiple times. This allows you to display different content in each widget, such as different email accounts, calendars, bookmark folders, etc.

Calendar Agenda

View, add, and manage your upcoming events from the Start Page.

You can display events and tasks from all calendars in a single widget or add multiple widgets for different calendars.

To change which calendar(s) events are shown from:

1. Click on Open menu button in the top right corner of the widget.
2. Select Select Calendar.
3. Choose the calendar(s) from the dropdown menu.
4. Click Done.

Latest Emails

Get a glimpse of your latest incoming emails and open them directly from the widget. You can display emails from all your mail accounts in a single widget or add a widget for each account you want to keep an eye on.

To select the mail account:

1. Click on Open menu button in the top right corner of the widget.
2. Select Change Folder.
3. Select All messages or one of your mail accounts.
4. Click Done.

Sticky Note

Sticky Notes are for quickly jotting down reminders, ideas, and more. You can add as many little notes as you like. Please note that, Sticky Notes are not saved to Notes by default.

To save a sticky note as a more permanent note:

1. Click on Open menu button in the top right corner of the widget.
2. Select Save to a Note.

Bookmarks

Keep your favorite bookmarks at easy reach with the Bookmarks widget. You can display bookmarks from a selected folder and add multiple widgets to display different bookmark folders.

To select the folder:

1. Click on Open menu button in the top right corner of the widget.
2. Select Select Folder.
3. Click on the folder name in the sub-menu.

You can also customize how bookmarks are displayed from the widget’s menu. Decide, whether to show the bookmarks’ titles or not, and whether to display the bookmarks’ favicons or thumbnails.

Tasks

Just like in the Calendar widget, you can view, add, and manage your tasks easily from the Dashboard.

Tip of the Day

To learn something new about Vivaldi every day, add the Tip of the Day widget that features desktop tips and tricks from vivaldi.com/blog/tips/. Click on the widget to see the full tip with step-by-step instructions.

Feeds

With the Feeds widget, you can see the latest posts from all the feeds you are subscribed to or display the newest posts from a selected feed.

To select the feed:

1. Click on Open menu button in the top right corner of the widget.
2. Select Select Feed.
3. Select All Recent Feeds or one of the feeds you follow.

Top Sites

The Top Sites widget displays the websites you visit most frequently.

Privacy Statistics

Keep an eye on how many trackers and ads Vivaldi’s built-in Tracker and Ad Blocker has blocked as you’ve browsed online. Click on the widget to see more detailed statistics and a list of blocked trackers.

Webpages

With the Webpage widget, you can view a webpage of your choice on the Dashboard.

To change the link:

1. Click on Open menu button in the top right corner of the widget.
2. Select Change Webpage URL.
3. Enter the link.
4. Click Done.

Date

From the Date widget, you can quickly see the day of the week, the full date, the week number, and the current time.

Weather

With the weather widget, you can keep an eye on the local weather in the next 24 hours as well as the forecast for the next 7 days.

To customize the Weather widget:

1. Click on Open menu button in the top right corner of the widget.
2. Select Change Location to change the locale.
3. In addition, make your choice for the units of measurement:
   • Temperature (Celsius or Fahrenheit).
   • Wind speed (meters per second, kilometers per hour, or miles per hour)
   • Precipitation (millimeters or inches).

Currency

The Currency widget makes it easy to convert one currency into another, as well as follow the changes in exchange rates over time.

---

Customize the Dashboard

Columns

The number of columns you see side by side depends on the size of your browser window. You can decide on the maximum number of columns that will be displayed when there’s plenty of space.

To change the upper limit for columns:

1. Go to Settings > Start Page > Widgets.
   Alternatively, open Quick Settings from the top right corner of the Start Page.
2. Select a number between 1 and 4 for maximum columns.

Widget size

The height of some widgets can be changed.

To resize a widget:

1. Click on Open menu button in the top right corner of the widget.
2. Select Widget Size.
3. Choose whether to have a regular-sized widget or a tall one, which is twice the size of a regular widget.

Widget Background Style

To give widgets the aesthetic you like, you can adjust the transparency of the widgets’ backgrounds or give them a custom color.

To adjust the style:

1. Click on Open menu button in the top right corner of the widget.
2. Select Background Style.
3. Choose between:
   1. Solid
   2. Semi-Transparent
   3. Transparent
   4. Custom

Rearrange widgets

You can move widgets around and have them displayed in the order you like.

To rearrange widgets:

1. Click on the widget title area and hold down the mouse button.
2. Drag the widget to its new location.
3. Release the mouse button.

---

Disable Widgets

If you know you won’t be using Widgets, you can disable them.

To disable the Dashboard:

1. Go to Settings > Start Page > Widgets.
   Alternatively, open Quick Settings from the top right corner of the Start Page.
2. Untick the box for Enable Widgets.

Customization is one of Vivaldi’s strong suits. There are many ways you can alter the appearance of the browser, so let’s take a look at what you can change to make Vivaldi look the way you want it.

Layout Presets

The sheer range of settings can be overwhelming, especially to brand new users, so Vivaldi offers 6 layout presets you can choose as a starting point in your customization journey.

You can pick a layout, either:

• During onboarding when you’ve opened Vivaldi for the first time (revisit onboarding from the Vivaldi menu > Help > Vivaldi Welcome Tour).
• From Settings > Appearance > Layout Presets.

People, who used Vivaldi before the introduction of layouts in Vivaldi 8.0, will see an Autosaved layout they had before upgrading. The Saved layout is your custom configuration, which gets updated with each restart.

---

Website Appearance

If you prefer dark themes and want the web page content to match:

1. Go to Settings > Appearance > Website Appearance.
2. Select between:
   • Light,
   • Dark, or
   • Auto.

Some websites do not offer their site in dark mode. In that case, you can force dark mode, by selecting the “Dark” option and enabling Force a dark theme on all websites.

---

Window Appearance

To make small changes with a big impact take a look at the following settings.

Open Settings in a Tab

By default, Settings open in a little window of their own, but if you prefer to browse and change settings in a tab:

1. Go to Settings > Appearance > Window Appearance.
2. Enable Open Settings in a Tab.

Open Popups in Tabs

Pop-up windows in Vivaldi are blocked by default. If you’ve allowed them either globally or on select sites, you can decide whether to open popups in a new window or a new tab.

To open popups in tabs instead of windows:

1. Go to Settings > Appearance > Window Appearance.
2. Enable Open Popups in Tabs.

Use Animations

To make transitions smoother when opening Panels, reordering Speed Dials, etc. animation effects are applied. To disable animations:

1. Go to Settings > Appearance > Window Appearance.
2. Disable Use Animation.

Use Buttons in Range Controls

When using the Zoom feature or changing some settings, you can change the value using a slider. If you want to change the value step-by-step with more accuracy, you can replace sliders with button controls.

To switch from sliders to button controls:

1. Go to Settings > Appearance > Window Appearance.
2. Enable Use Buttons in Range Controls.

Use Native Window

To enable the Native Window:

1. Go to Settings > Appearance > Window Appearance.
2. Enable Use Native Window.
3. Restart the browser.

Using the Native window allows you to:

• Integrate Vivaldi with the rest of your operating system’s user interface.
• Use OS-based window controls.
• Display the Active Tab’s full title.
• Make use of macOS’ Split View feature.

Show Title Bar

When you have moved the Tab Bar to the left or right side of the browser window, you have the option to show the title of the active tab in a Title Bar, which will also include the Vivaldi Menu button as well as window controls for minimizing, maximizing and closing browser windows.

To enable the Title Bar:

1. Go to Settings > Appearance > Window Appearance.
2. Enable Show Title Bar.

Fade Colors in Background Windows

When you’re viewing browser windows side by side, it can be difficult to see, which one you’ve focused on. Fading colors of background windows helps to make it more obvious.

To enable background window color fading:

1. Go to Settings > Appearance > Window Appearance.
2. Enable Fade Colors in Background Windows.

Use Simple Scrollbars

Depending on the window size and the amount of content, you may see scrollbars here and there in the Vivaldi user interface, for example, in Panels, Mail lists and emails, Calendar views, etc. By default, the scrollbars are thicker and have clickable arrows at both ends. To get slimmer and more minimalistic looking scrollbars:

1. Go to Settings > Appearance > Window Appearance.
2. Enable Use Simple Scrollbars.

Use Monochrome Settings Icons

Settings categories in the column on the left are colored and grouped. If you prefer a more monochrome look on the category icons:

1. Go to Settings > Appearance > Window Appearance.
2. Enable Use Monochrome Settings Icons.

User Interface Density

To change the UI density:

1. Go to Settings > Appearance > Window Appearance > User Interface Density.
2. Choose between:
   • Regular i.e. the more spacious layout, and
   • Compact layout.

Compact Menu Layout

While you’re deciding on the density of the user interface, you can also make a call on the density of menus.

To switch from spacious menus to compact ones:

1. Go to Settings > Appearance > Window Appearance > User Interface Density.
2. Enable Compact Menu Layout.
3. Restart the browser.

User Interface Zoom

If you have plenty of screen real estate to spare on a large monitor or your vision requires to have larger buttons and texts for comfortable viewing, you can increase (or decrease) the user interface size.

To change the UI zoom level:

1. Go to Settings > Appearance > Window Appearance > User Interface Zoom.
2. Use the slider or range control buttons to find a suitable UI size for you.

If you click on the current zoom value, you can also enter the desired zoom value by typing the number.

Status Bar

To hide the Status Bar or display it again:

1. Go to Settings > Appearance > Window Appearance > Status Bar.
2. Choose between the following:
   • Always show the Status Bar.
   • Only show status info overlay.
   • Hide it completely.

Toolbar Customization

To learn about moving, adding, and removing buttons on the user interface, go to the Help page about editing toolbars.

---

Menu

To learn about the options available for the menus, take a look at the Help page about the Vivaldi Menu, and if you want to customize the menus, check out the Help page about editing menus.

---

Themes

To change the color scheme and background image of the browser, schedule themes, and more, have a look at the Help page about Themes.

Vivaldi’s privacy and security settings give you solid control to safeguard your private data.

To make online transactions faster and free of mistakes, you can store your bank card and address information in the browser.

Payment Methods

When entering card details on a web page, you’ll be asked whether to save the card information in the browser and autofill similar forms with the stored information in the future. If you don’t plan to save payment information in Vivaldi, you can disable these requests in Settings > Privacy and Security > Payment Methods. Furthermore, you can block websites from checking whether any payment methods are stored in the browser.

For an added layer of security, you can enable a verification requirement whenever using the saved payment methods. Go to Settings > Privacy and Security > Payment Methods and enable Always Verify when Using Autofill. When enabled, you’ll be asked to enter your operating system’s PIN/password/etc. before filling out the form on the web page.

To add a new payment method manually:

1. Go to Settings > Privacy and Security > Payment Methods.
2. Click Add New Payment Card.
3. Enter your card’s details.
4. Click Save.

To edit a saved card’s info:

1. Go to Settings > Privacy and Security > Payment Methods.
2. Click on Edit Card.
3. Update the info.
4. Click Save.

To delete a card:

1. Go to Settings > Privacy and Security > Payment Methods.
2. Click on Edit Card.
3. Click Delete.

---

Addresses

As with Payment methods, you can also save your postal address, phone number, and email in the browser for ease of use. Requests to save this information is enabled by default, but you can disable it in Settings > Privacy and Security > Addresses and More.

To enter information manually:

1. Go to Settings > Privacy and Security > Addresses and More.
2. Click Add New Address.
3. Enter your address and other information.
4. Click Save.

To edit saved address info:

1. Go to Settings > Privacy and Security > Addresses and More.
2. Click on Edit Card.
3. Update the info.
4. Click Save.

To delete address info:

1. Go to Settings > Privacy and Security > Addresses and More.
2. Click on Edit.
3. Click Delete.