Workflow

Get familiar with the sequence of plugin procedures from initiation to completion.

1. Fill out the application form.

Complete the application form provided on the landing page of Qt Digital Advertising.

2. Install the plugin for your Qt version through the installer. Accept the license agreement.

Qt Digital Advertising plugin is a separate component in the Qt installer. You install the plugin like any other Qt product. Select the plugin from the list of products to download it.

Note: Qt Digital Advertising can be, on request, built on top of every Qt version. Need specific one? Contact us.

Qt 5

Qt 5 installations do not contain the additional libraries entry.
The Qt Digital Advertising plugin is available in the list right under the selected Qt version.

Qt 5 applications require Web Engine plugin to be installed as well.

Qt 6

Qt 6 applications require Web View and Qt Multimedia plugins to be installed as well.

Embedded

For embedded devices, Qt Digital Advertising cannot be installed from the online installer.

Please contact us for the plugin corresponding to your hardware.

3a. Set up ads on your devices with Qt Design Studio.

Qt Digital Advertising plugin user can create ad setup environment directly from the Qt Design Studio.
By simply using the WYSIWYG environment, user can set up ad campaigns for mobile, desktop and embedded applications.
Download Qt Design Studio from the online installer, if you do not have Qt Design Studio yet.

Follow a set up instruction for the Qt Design Studio.

3b. Set up ads on your devices with Qt Creator.

Qt Digital Advertising plugin user can create ad setup environment directly from the Qt Creator.
By simply writing the QML code, user can set up ad campaigns for mobile, desktop and embedded applications.
Download Qt Creator from the online installer, if you do not have Qt Creator yet.

Follow a set up instruction for the Qt Creator.

4. Enabling Advertisements in a Qt Application

As a developer, you can enable advertisement in your

  • Mobile device application
  • Embedded device application

4a. Enabling Advertisements on Mobile Devices

Currently Qt Digital Advertising plugin could be used to enable ads in Qt apps targetted to run on devices with Android and iOS operating systems.

Broadly QML API consists of 2 phases.

  • Initialisation
  • Enabling ads

Initialisation

This is a mandatory step needed to initialise Qt Digital Advertising plugin. This sets up an Application for displaying digital Advertisements. As an application developer, qdaApiKey - you need to set the key received via E-mail post registration (1st Step in this workflow).

Take a look at a QML Snippet which demonstrates MobileConfig {} parameter -

MobileConfig {
        id: qdaConfig
        qdaApiKey: "xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
        networkId: "4147"
        appName: "Board Games"
        bundleId: "io.qt.boardgames"
        siteId: "473387"
}

siteId would be generated once after you have signed platform agreement with The Qt Company. appName should be set to the name of your application. bundleId should be set to the application id.

Note: networkId and the value 4147 could be used as is - this does not change.

This could be initialised at the beginning of your application..

import QtQuick.Controls 2.2
import QtQuick.Controls.Material 2.3
import QtQuick.Layouts 1.15
ApplicationWindow {
    id: window
    visible: true
    height: 900
    width: 400
    color: "#303031"
    Material.theme: Material.Dark
    Material.accent: "#41CD52"

    property bool builtWithQtButtonVisible: true

    MobileConfig{
        ..
    }
.
.
.

Enabling ads

Once after initialisation, you can choose to place ads at your will depending upon the type of ad. Plesae check the below QML snippet which demostrates the same

MobileAd {
  anchors {
          top: label1.bottom
          left: parent.left
          right: parent.right
          leftMargin: margins
          rightMargin: margins
          topMargin: 30
  }

  id: ad1
  mediaWidth: 320
  mediaHeight: 250
  playMode: QtDigitalAdvertising.AutoPlay
  displayMode: QtDigitalAdvertising.Loop
  pageId: "1515277"
  formatId: "104693"
}

Here you can see pageId and formatId. pageId represents different pages within your application. formatId represents the format of an ad, i.e the type of the ad that you intend to show in an appropriate page. Values of these would be made available after platform agreement (for more details you can contact us) is signed with us.

Note: The values mentioned here - 1515277 for pageId and 104693 for formatId could be used for testing/demo purposes only.

Note: mediaWidth and mediaHeight values should match the artifacts available in the ad platform. Hence a developer needs to make sure appropriate values (of mediaWidth & mediaHeight) are used in MobileAd{}

For more details about playMode, displayMode and other types, take a look here https://doc.qt.io/QtDigitalAdvertising/qml-mobilead.html

4b. Enabling Advertisements on Embedded devices

Qt Digital Advertising plugin also enables developers to put up advertisements on embedded devices. The API is very similar to mobile ads with some differences.

Broadly QML API consists of 2 phases.

  • Initialisation
  • Enabling ads

Initialisation

This is a mandatory step needed to initialise Qt Digital Advertising plugin. This sets up an Application for displaying digital Advertisements. As an application developer, qdaApiKey - you need to set the key received via E-mail post registration (1st Step in this workflow).

Take a look at a QML Snippet which demonstrates EmbeddedConfig {} usage -

EmbeddedConfig {
        qdaApiKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
        venueId: "Qt_Demo_Evaluation_Venue1"
}

This could be initialised at the beginning of your application..

Note: venueId: "Qt_Demo_Evaluation_Venue1" could be used for testing/demo purposes.

import QtQuick 2.5
import QtQuick.Window 2.2
import QtDigitalAdvertising 1.1
import QtQuick.Controls 2.2
import QtQuick.Controls.Material 2.3
Window {
    id: window
    visible: true
    color: "#303031"
    flags: Qt.FramelessWindowHint
    Material.theme: Material.Dark

    Material.accent: "#41CD52"
    height: 800
    width: 1800
    x:100
    y:100

    EmbeddedConfig{
     ..
    }
        .
        .

Enabling ads

Once after initialisation, you can choose to place ads at your will depending upon the type of ad. Please check the below QML snippet which demostrates the same

EmbeddedAd {
        anchors.fill: parent
        mediaWidth: 1920
        mediaHeight: 1080
        playMode: QtDigitalAdvertising.AutoPlay
        displayMode: QtDigitalAdvertising.Loop

}

For more details about playMode, displayMode and other types, take a look here https://doc.qt.io/QtDigitalAdvertising/qml-embeddedad.html

Note: mediaWidth and mediaHeight values should match the artifacts available in the ad platform. Hence a developer needs to make sure appropriate values (of mediaWidth & mediaHeight) are used in EmbeddedAd{}

© 2022 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.