This is really useful if you want to aggregate all the reports from different platforms in one place (like Google Loocker Studio).

Google Cloud Storage prerequisites:

1. Create a Storage Bucket (or use an existing one). Use default settings like Storage class: Standard, Public access prevention: On, …

2. Create a Service Account (IAM)

Input the name/account id for the new service account

Select a Role: Cloud Storage -> Storage Object Admin

Add IAM Condition so that this service account will have the access ONLY to the specified Storage Bucket

Click DONE to create the service account

Next create a JSON key for this account. Click Manage keys -> ADD KEY -> Create new key

The JSON file with the key will be downloaded to your PC.

Open the JSON file with the text editor and copy the key

Copy and paste this key along with the bucket name into Bannernow Report Builder

Select Scheduled report, Upload report to Google Cloud Storage bucket

Now all your reports will be stored automatically in the Google Cloud Bucket.

Table of Contents

Snapping

Snapping happens when you drag on a layer. When you get close to the item you are snapping to, the element moves to ‘snap’ into place, as if it is magnetic to the other element.

There are several options for snapping, to see them all choose View > Snapping  and select one or more options from the submenu:

• Guides: Snaps to guides.
• Grid: Snaps to the grid. You can only select this option when the grid is visible.
• Canvas: Snaps to the edges of the canvas.
• Objects: Snaps to the images, texts, buttons and shapes.

If you don’t need snapping, you can turn it off by holding down the CTRL key.

Resize

Use the Selection tool to choose the element. You can now resize it proportionally to fit your design by dragging any corner of the element.

To freely resize, Shift-drag a corner handle of the element.

Resize from center

Holding down Alt while clicking and dragging a handle will resize an object proportionally from its center.

Rotate

The Rotate tool lets you turn your image, text, button, shape, or even a group of elements from any angle.

Thanks and happy designing!

Table of Contents

Microsoft Entra ID (ex Azure Active Directory) can serve as the identity provider to provide single-sign-on (SSO) user login to Bannernow.

Bannernow supports SSO via SAML, a standard in wide use by enterprises and companies to provide authentication services to products that otherwise require separate accounts and logins.

Setting up Microsoft Entra ID to use SSO for Bannernow takes about 10 minutes. There are two main steps involving the Azure and Bannernow web interfaces.

Set Up the Identity Provider “IdP” Side (Microsoft Entra ID)

As an admin, log into your Azure Portal, browse to Microsoft Entra ID, then follow the following steps:

Step 1

Go to Enterprise applications in the sidebar.

Step 2

Create a New Application

Step 3

Give your application a name and select Integrate any other application you don’t find in the gallery (Non-gallery). Then click Create.

Step 4

First assign users that will have access to Bannernow through SSO then click on Set up single sign on

Step 5

Select SAML option

Step 6

Click Edit for the first Step then add Identifier and Reply URL and open Bannernow in a separate tab to get those values.

Step 7

Go to Organization Settings in Bannernow then go to Settings tab as shown below. Then choose SAML/SSO Settings. (keep in mind that these settings are available only for the Organization owner)

Step 8

Click Enable SAML

Step 9

Then copy all related fields to Azure SAML settings as shown below. Then click Save in Azure dashboard and Continue in Bannernow.

Step 10

Finally in the last step copy urls from Azure SAML settings Step 4 to Bannernow SAML settings. Download Certificate from Azure SAML settings Step 3 in Base64 format and upload it to Bannernow SAML settings as shown below.

Check Enforce SSO so all users in your organization will be forced to log in into Bannernow only through Microsoft Entra ID. (keep in mind that you would need to have 2FA enabled in your account first).

Click Submit in Bannernow and that should be it. You can test SSO from Bannernow login page.

Using SSO, an employee logs into Bannernow using your identity provider’s interface instead of the Bannernow login page. The employee’s browser redirects to Bannernow to authenticate. With SSO enabled, Bannernow’s own login mechanism is disabled, meaning that authentication security shifts to your IdP, and coordinated with your other service providers.

Identity Providers with Built-in SSO support for Bannernow

The following major IdPs provide built-in support for Bannernow. To set up SSO for these IdPs, follow the instructions on the vendor’s site.

• Azure / Microsoft Entra ID

SSO Setup for Other SAML 2.0-Compliant IdPs

Most SAML 2.0-compliant identity providers require the same information about a service provider to set up SSO. In the case of Bannernow, relevant values are available in the Settings tab of the Bannernow Organization you want to enable SSO for:

You must be organization owner to see this information and to enable SSO.

After configuring SSO on your IdP, fill Entity ID, Idp SSO login url and copy base64 x509 certificate or upload it on the next step.

If you want organization members to access Bannernow only through SSO please check Enforce SSO before submitting (keep in mind that you need 2FA enabled for your account to enforce SSO).

When setup is successful you can test SSO from Bannernow SSO login page https://bannernow.com/auth/login/sso

Here is the step-by-step tutorial about enabling SAML with Microsoft Entra Id/Azure that can be used with any other SSO provider: Set Up Microsoft Entra ID SSO with Bannernow

Constraints Panel

Constraints indicate how layers/elements should respond when you resize their frames. This helps you control how designs look across different screen sizes and devices.

There are Horizontal and vertical constraints.

Horizontal constraints define how a layer behaves as you resize the frame along the x-axis.

• Left maintains the layer’s position, relative to the left side of the frame.
• Right maintains the layer’s position, relative to the right side of the frame.
• Left and right maintains the layer’s size and position relative to both sides of the frame. This may cause layers to grow or shrink along the x axis, when resized.
• Center maintains the layer’s position, relative to the horizontal center of the frame.
• Scale will define the layer’s size and position as a percentage of the frame’s dimensions. It will then maintain those proportions as you resize it.
• Relative means that these constraints depend on the relative positioning, or comparison with other layers

Vertical constraints define how a layer behaves as you resize the frame along the y-axis.

• Top maintains the layer’s position, relative to the top of the frame.
• Bottom maintains the layer’s position, relative to the bottom of the frame.
• Top and bottom maintains the layer’s size and position relative to the top and bottom of the frame. This may cause layers to grow or shrink along the y axis, when resized.
• Center maintains the layer’s position, relative to the vertical center of the frame.
• Scale will define the layer’s size and position as a percentage of the frame’s dimensions. It will then maintain those proportions as you resize it.
• Relative means that these constraints depend on the relative positioning, or comparison with other layers

Horizontal : Left Vertical: Top

Horizontal : Right Vertical: Bottom

Horizontal : Scale Vertical: Scale

Horizontal : Left and Right Vertical: Top and Bottom

Relative position

Let’s now explore the Relative feature, which enables you to create constraints based on relative positioning in comparison with other layers.

Consider a product price feed. Each price consists of three elements: currency, product cost, and payment frequency. When the price changes, it should retain its relative structure.

Let’s connect each element of the price to the data feed.

Connect payment frequency:

Connect product cost:

Connect currency:

Next, let’s set Constraints to each layer.

Let’s say we want the price to be always positioned to the right bottom corner of our creative.

First set the “per MO” text to the right bottom and also the text container – Dynamic Width and Height. In case there is more text, the container will resize.

The second price element “499” should remain adjacent to the “per MO” text, maintaining a 2px distance between them.

Set the Relative option for both horizontal and vertical axes.

For horizontal and vertical select the anchor points: left X position and bottom Y position relative to “per MO”.

For horizontal, set offset -2px, separating “499” element from the “per MO”.

The third currency element “$” should remain adjacent to the “499” text, maintaining a 2px distance between them and aligned to the top.

Set the Relative option for both horizontal and vertical axes.

For horizontal and vertical select the anchor points: left X position and top Y position relative to “499”.

For horizontal set offset -2px, separating “$” element from “499”.

Let’s see the result.

This feature is very useful for creatives connected to feeds because it ensures that ads are always well-structured and prevent elements from sliding out of place or becoming misaligned.

Publish Responsive HTML5 ads

To publish the Responsive banner always select the Responsive Width & Height option and place the AdTag/Embed code in a responsive div container on your page or use a responsive placeholder in DSP/SSP:

They provide a structured format, that allows you to organize and store various attributes associated with creative ads, such as image URLs, image files, product IDs, product descriptions, etc.

Data tables can be also used as an alternative to Google Spreadsheets for managing the dynamic data for the Feeds.

To create a new Data Table go to Data > Data Tables > click New Data Table button.

To rename your Data table click on the top menu and select Rename.

To import a CSV file, just click on Import CSV button in the top menu.

To add a new column, click on Add button and select from the dropdown menu the type of column you want to add.

To add a new row, click on Add button at the bottom left of your table.

To select a row, hover over it and click on it.

To view all the actions (like Rename, Delete, …) for a specific column, click on the drop-down arrow.

Let’s insert a new Text column on the left.

For the Text you have additional tools to fully customize it (including the Font Size).

For the image column, upload your images to your feed by clicking the Import File button or simply Drag the images directly from your PC to the Data table.

A thumbnail will be displayed for each uploaded image.

Now, let’s add a Color column.

To select a color, simply double-click inside the column, and the color picker will automatically appear.

A color thumbnail will be displayed for each added color.

Right-click to Copy/Paste/Delete color. You can also remove color by pressing Delete on your keyboard.

If you want to select more rows, select a row from the top and hold down the Shift key and select the bottom row. That selects all rows in between.

Use keyboard shortcuts to enhance productivity.

For Windows:

Undo last command – Ctrl + Z;

Redo last command – Ctrl + Shift + Z;

Cut – Ctrl + X;

Copy – Ctrl + C;

Paste – Ctrl + V.

For MacOs:

Undo last command – Cmd + Z;

Redo last command – Cmd + Shift + Z;

Cut – Cmd + X;

Copy – Cmd + C;

Paste – Cmd + V.

Prerequisites:

1. a product catalogue in XML, JSON, CSV, or API format
2. the DSP, SSP, or a recommendation system

Here is an example of the product catalog that we will be using in this tutorial. It has the product ID column, product description, product image, landing URL, etc.

Now, let’s create a BigTable connection for our product catalog. The BigTable is used when you have more than 100 products (it can even be used if you have 100 million products in your catalog).

Enter the product catalog URL (in our case, it will be the CSV file that is hosted on a website). Select CSV, refresh once per day (BannerNow will update all the product info daily). In the Advanced Settings, enter the Item Primary Key that matches the product ID column in your product catalog.

Our BigTable connection is now active, and it will automatically update the product data daily

Now, let’s create a Data Feed

Select BigTable as the source

Select the BigTable that we have just created

Select all the fields that will be used in the banner (like price, image, …)

Next, create a banner

Select a Bannerset

Select the Feed that we have just created

Next, bind all the items in your banner to the feed data

In this tutorial, we will be creating a banner that displays 2 different products.
For the first product, we will set Fixed Line to ON and the Row Number = 1

The same for the image, button, description and the landing URL:

And for the second product, simply set the Row Number = 2

Save the Banner and click Preview

In the Preview panel, you can input different product IDs to test the banner.
For example, entering 2,3 will load the products with ID 1 and ID 2 from the BigTable

Then click Publish

Next:

Select the Ad Network (in this tutorial, we’ll be using Google Ad Manager).
If you don’t need any Ad Network simply select the BannerNow from the Ad Networks list

In the Ad Tag generation panel, there is an additional input called Feed Items IDs where you can input the product IDs separated with the comma (,) or use the macros from the Ad Network.

For the Google Ad Manager, this macro will be %%PATTERN:key%% where the key can be replaced with the “product” if you’re targeting products or “segment” if you’re targeting a specific audience segment.
For another Ad Network, it will have a different format.

Next, copy/paste the Ad Tag in the Ad Network (DSP/SSP).
Here is a tutorial for the Google Ad Manager third-party Ad Tag publishing:

For the Google Ad Manager Unit, the setTargeting method needs to be added after addService():

googletag.defineSlot("/1234/adunit1/adunit2", [728, 90], "div-gpt-ad-123456789-0")
.addService(googletag.pubads())
.setTargeting("product", "5,8");

Obviously, the setTargeting method values should be dynamic (usually this is managed by the recommendation system), so simply update the Google Tag JavaScript code to use the product IDs from the recomendation system (or simply read the first-party cookies or the Local Storage where the product IDs that the user visited are stored).

Feel free to contact us if you you need any help with the retargeting setup.

Google Ad Manager step-by-step remarketing integration:

Here is a quick overview of how this feature works:

1. The user opens a website with the banner. The website (or the DSP/SSP platform on the website) loads the BannerNow Ad Tag and passes the segment this user belongs to.
   For example, &segment=age18-20 (where the segment value will be different for each website user).
   Basically, the website or DSP/SSP should know the segment the user belongs to before the banner starts rendering
2. Once banner is rendered using the additional Ad Tag parameter, it tries to search for the segment value match in the Feed connected to the banner.
3. If a match is found, it will display the data from the same feed/table row where the match was found.

Let’s create a Google Spreadsheet and use it as a data source for this tutorial.
The Age column will represent the Segment values

Next, click the Share button located in the top right corner.
Choose the Anyone with the link option to make your feed public, then click Done.
Now, this spreadsheet can be used as a feed data source in BannerNow.

Let’s return to BannerNow -> Data -> Feeds tab. Click Create new feed button.

Select the Google Spreadsheet option.

Next, copy/paste the spreadsheet URL (the link from Google Sheets), and enable the targeting option.

Choose the columns from the feed that you want to display in your ad.

In the Targeting tab, click Add New Rule.
Rule Type: INCLUDE
Rule match type: SEGMENT ( string, = )
Column from our table to match: age

Now it’s time to build a creative.

Select the Bannerset format.

In the pop-up modal, select the feed that we have just created and click Create.

After creating your design, you need to bind the feed data to the element values (images, texts, landing URLs).

To do this, select the text element and click on the feed icon to bind the text value to the feed data.

Select the column you want to display for a specific text element.
Also, select the Fixed Line option and set the Row Number = 1
This will ensure that if no match is found, it will take only the first row from our feed (which in our case is the default one).

Perform the same action for each dynamic element in the design.

Don’t forget to bind the Landing Page URL (Global settings) to the Landing URL from the Feed

Save your creative and click Publish.

Select the sizes you want to publish and click Next

Pick the Ad Network where the banner should be published.
If you just plan to use it on your website (without SSP/DSP), then select the BannerNow Ad Network

The Ad Tag is now generated for your banner.
Next, we need to add the &segment= to our Ad Tag:

Because the segment will be dynamically replaced for each end-user, we suggest you to use the Macros.
A Macro is a special string that can be easily replaced in the code with the real value.
For example, &segment=%%segment%% (where the %%segment%% is the string macro that will be replaced by the SSP/DSP or your website).
Each Ad Network has its own format for the segment macros, so please check the Ad Network documentation to find the right macros format.

If you plan to replace it with the code on your website, then just use the default %%segment%%

For example, the BannerNow Ad Tag will look like:

<script src="https://storage.bannernow.com/MVDq2PxpdlGOk5Axgea8ryZeQb7LWBwKgMqbFFb2Gk/embed.js?responsive=0&bnTag=&segment=%%segment%%" async></script>

And on your website, once the %%segment%% is replaced with the real value, it should look like this:

<script src="https://storage.bannernow.com/MVDq2PxpdlGOk5Axgea8ryZeQb7LWBwKgMqbFFb2Gk/embed.js?responsive=0&bnTag=&segment=age18-22" async></script>

or like this for another website end-user:

<script src="https://storage.bannernow.com/MVDq2PxpdlGOk5Axgea8ryZeQb7LWBwKgMqbFFb2Gk/embed.js?responsive=0&bnTag=&segment=age55-60" async></script>

In this guide, we’ll walk you through the steps to protect your Google Sheets, ensuring your data remains private and secure.

Let’s begin by setting up access permissions for your Google Sheets. In the top-right corner click Share button.

Enter the email address provided by BannnerNow:

private-spreadsheets@bannernow-gcloud.iam.gserviceaccount.com

Click the Share button to share the spreadsheet. Viewer permission is sufficient. The platform will now have access to your Google Sheet based on the permissions you have set.

Let’s return to BannerNow and set up a new feed. Navigate to the Data menu, open the Feeds tab, and click on New feed.

Next, from the Data Source options select Google Spreadsheet.

In the modal:

1. input the name of your feed;

2. copy the link of your google spreadsheet and insert it in the Spreadsheet ID field;

3. check the Private Spreadsheet option.

And there you have it! Now your private Google Spreadsheet is serving as a dynamic feed source and you can easily manage and update the content displayed on your ads in real-time. Happy advertising!

To access the Analytics page, in the top menu click Analytics.

The first thing you’ll notice on this page is the summary of clicks, impressions, and CTR (click-through rate) information.

Below that, you’ll find a chart illustrating the performance of your ads within the selected date range. You can also view the analytics map, which indicates the countries where your ads have been viewed. This map provides valuable insights into the geographic reach of your campaigns.

Next to the analytics map, you’ll find information about how your ads perform across different devices, along with the corresponding CTR (click-through rate), impressions and rollovers.

The analytics pie chart provides a clear breakdown of the devices where your ads have been viewed.

Let’s generate an analytics report to access details regarding creatives, projects, decision trees, A/B tests, and every aspect of your campaign. Go to the Reports tab and click New Report.

With our customizable report, you have the power to tailor your analytics to suit your specific needs. Choose from a variety of analytics options including heatmaps, feeds, and decision trees. Additionally, you can select specific ad sizes from your creative set to include in your report.

Select specific schedules placeholder for your report, allowing you to track performance over specific time when the ads were displayed. Incorporate decision trees, to analyze the data-driven decisions.

Gain valuable insights by adding feeds. For example, if you have a feed with products, the report allows you to analyze which ads featuring specific products from your feed received the most clicks.
Below, you’ll find an option to schedule your report. By setting the frequency to “monthly,” you’ll receive an email with your report on a monthly basis.

Once your customized report is created, you will receive it directly in your email inbox. The report is conveniently packaged into a downloadable zip file, providing you with detailed analytics.

Here’s what you’ll find in your report:

Heatmap, allowing you to identify which areas of your ad are capturing the most attention;

Ad Performance: Detailed analysis of each banner, including impressions, clicks, click-through rates, and conversions. Understand which banners are performing best and optimize accordingly;

Date Range Analysis: Track performance over specific date ranges to identify trends and patterns in your ad campaigns;

Browser Analysis: Insight into the browsers your audience is using to view your ads;

Impressions: Get a clear picture of how many times your ads have been displayed across different platforms and devices;

Product Performance: See which products are getting the most attention from your ads;

Geographic Data: Understand where your audience is located geographically;

Domain: Track performance across different domains;

A/B Testing: A/B tests are created to compare the performance of different ad variations and determine which ones yield the best results;

Decision Trees: Utilize decision trees to understand the factors influencing ad performance and make data-driven decisions to optimize your campaigns.

and more…