Banner: How to integrate the code?

When inserting scripts, ensure that you replace the following unique values: ADCODE-ID, SPOT-ID, or URL.

VanillaJS / iframe

iframe

In the case of iframe, your account manager will provide an URL. 
Use it to insert into the code below:

 ...
 <iframe src="{URL}"></iframe>
 ...

for /body

Then insert this iframe within the site’s body element, where advertising content is intended to be shown.

VanillaJS

Your account manager will provide your ADCODE-ID, and SPOT-ID.  
Use ADCODE-ID and SPOT-ID to replace {ADCODE-ID} and {SPOT-ID} in the scripts below.

Head:
The commonly used name for the HTML file is Index.html. However, this name can vary depending on the project.

<script data-onclicka-banner="{ADCODE-ID}" async src="https://js.onclckmn.com/banner-admanager/oncbanner.m.js" data-onclicka-banner-ar="c"></script>

for /head in the HTML file

Body:
While inserting the following code, pay close attention to the SPOT-ID number. Each line with <div data-banner="{SPOT-ID}"></div> is dedicated to a specific spot.

 ...
 <div data-banner="{SPOT-ID-1}"></div>
 <div data-banner="{SPOT-ID-2}"></div>
 ...

for /body

React

Your account manager will provide your ADCODE-ID, and SPOT-ID.  
Use ADCODE-ID and SPOT-ID to replace {ADCODE-ID} and {SPOT-ID} in the scripts below.

Head:

<script 
  src="https://js.onclckmn.com/banner/oncbanner.m.js"
  data-onclicka-banner="{ADCODE-ID}"
  async
></script>

for /head in the HTML file

Ad show component for React

It is also crucial to create a file for the component that handles the ad show. Then insert it into the relevant section of the project.

Step 1. Please create a file named like “src/ComponentWithAdBanner.jsx” with the following code:

// src/ComponentWithAdBanner.jsx -- snippet location

import { useEffect, useState } from "react";

export default function ComponentWithAdBanner() {
    const [id] = useState({SPOT-ID});

    useEffect(() => {
        const handlerGo = () => {
          window.onclickaMini.goId(id);
        }
        
        if (window.onclickaMini?.isInit) {
            handlerGo();
        } else {
            document.addEventListener("onclickaMini", handlerGo);
            return () => document.removeEventListener("onclickaMini", handlerGo);
        }
    }, [id]);

    return <div data-banner-id={id}></div>;
}

for a file “src/ComponentWithAdBanner.jsx”

Step 2. Insert the newly created component into the relevant section of the project, such as: src/app.jsx

// src/app.jsx -- the place for the advertising content

import ComponentWithAdBanner from './ComponentWithAdBanner';

function App() {
  ...
  return <>
    ...
    <div>
      <ComponentWithAdBanner />
    </div>
  </>
}

for src/app.jsx

Other TMA formats for publishers

• Tg-Interstitial: How to integrate the code? →
• Video: How to integrate the code? →
• General article: How can I integrate code? →