How to setup ads on Newsifier V2

Setting Up Ads on Newsifier V2

Adding ads to headless webpages based on client-side rendering and JavaScript, such as those built with Newsifier V2, is more complex than server-side rendered webpages. This guide explains the integration process to help publishers and ad agencies manage ads efficiently.

For Publishers:

If third-party access is needed, create a user account (type -> advertiser) with rights to change global, page, and body scripts. This limits access to ad management only, not the website design or content blocks.

Integration of Ads: Four Key Areas

1. Global Scripts and Page Scripts (Head)
2. Body Tags
3. In-Article Ads
4. Additional Customizations

1. Global Scripts and Page Scripts (Head)

Ad agencies often require scripts in the head of all pages. To integrate these:

Navigate to:

• Admin Panel > Ads > Go to Buildifier (Site Builder)

Options:

• Global Scripts: For scripts on every page.
• Current Page Scripts: For scripts on specific pages.

Add Script:

• Click on Global Scripts or Current Page Scripts.
• Click the Add Script button.

Form Fields:

• ID: Unique technical identifier. Every script must have a unique ID.
• Strategy: Defines when the script is loaded:
  • beforeInteractive: Script runs before the page body loads. Use sparingly as it can delay page loading.
  • afterInteractive: Script runs after the page is processed. Recommended for most scripts.
  • lazyOnload: Script runs after all resources are loaded. Ideal for heavy or lower-priority scripts.
• Type:
  • Content: Directly add JavaScript (without <script> tags).
  • Link: Load external JavaScript via URL. Can use async.

2. Body Tags

To add body tags for visual ad positions:

Access Buildifier:

• Admin Panel > Ads > Open Buildifier

Add a New Block:

• Navigate to a specific page from the left sidebar.
• Click on the + sign on the desired location.
• Choose to add above or below the selected component.
• Options for Ads:
  • Container: Adds a multi-column layout for flexible ad and content placement.
  • Misc > _RAWHtml: Allows adding HTML, CSS, and JavaScript.

Save Changes:

• Click Actions > Save Page.
• Changes take roughly 30 seconds to reflect.

3. In-Article Ads

To add in-article ads dynamically between content blocks:

Navigate to:

• Admin Panel > Ads > Add Ads

Form Fields:

• Name: Recognizable name for the ad (e.g., IN_ARTICLE_1).
• Content: Primarily JavaScript, but HTML and CSS are allowed.
• Published: Set to Yes to activate.
• Position: Specify where to place the ad (e.g., ‘Article > After block X’).
• Min-Height: Define a size to prevent Cumulative Layout Shift (CLS).

4. Additional Customizations

For custom CSS:

Access Custom CSS:

• Buildifier > Settings > Custom CSS

Deployment:

• Click Actions > Deploy Tenant to apply changes.

Managing Ads Using Buildifier

Add New Ad Position:

Select a Component:

• Choose a component above/below which to add the ad position.
• Click + and select to add above or below the component.

Add Raw HTML Component:

• From the list of components, select _RAWHtml.
• Add ad codes and define a minimum height.
• Click Add and Save Page.

Deploy Changes:

• Contact Newsifier to deploy changes (deployment option is not available in Buildifier).

Manage Existing Ad Position:

• Select Component:
  • Select the _RAWHtml component.
  • Make changes using the options in the right-side menu.

Delete Ad Position:

• Delete Component:
  • Select the _RAWHtml component.
  • Click the trash icon and confirm deletion.

Showing Ads Within Article Content

• Dynamic Ad Positions:
  • Managed via CMS.
  • Use ad positions of the type ARTICLE_IN_X (where X is the number of paragraphs after which to show the ad).

Adding Scripts

Global Scripts:

• Use for scripts on all pages.

Current Page Scripts:

• Use for scripts on specific pages.

Script Strategies:

• beforeInteractive: For critical scripts needed before the page is interactive.
• afterInteractive: For scripts that run after the page is interactive.
• lazyOnload: For scripts that load during idle time.

Reload Ads on URL Change Without Page Reload (deprecated)

Include the following code to re-initialize ads on URL change:

console.log("Ad INIT");

ad.initialize();

Advanced Concepts on Buildifier Layout

• Containers:
  • Organize components on the page. Width of ad positions depends on the container.
  • To show multiple ad positions in the same row, add containers first and then add _RAWHtml components inside them.
  • Choose the layout of the containers before adding components inside them.

This is a comprehensive guide on setting up and managing ads on Newsifier V2. For further assistance, contact support@newsifier.com.Type your content here.