AdsGram

Українська

English
Русский
中文
Español
Português
Türkçe
العربية
فارسی
Français
Bahasa Indonesia
हिंदी

Українська

English
Русский
中文
Español
Português
Türkçe
العربية
فارسی
Français
Bahasa Indonesia
हिंदी

Тема

Приклади коду ​

Vanilla js ​

html
<adsgram-task data-block-id='task-7308' data-debug='true' class='task'>
  <p slot='reward' class='task__reward'>🪙 100</p>
  <div slot='button' class='task__button'>вперед</div>
  <div slot='claim' class='task__button task__button_claim'>отримати</div>
  <div slot='done' class='task__button task__button_done'>готово</div>
</adsgram-task>
css
.task {
  --adsgram-task-font-size: 16px; /* мінімум 14px */
  --adsgram-task-icon-size: 50px; /* мінімум 30px */
  --adsgram-task-icon-title-gap: 15px; /* мінімум 5px максимум 40px */
  --adsgram-task-button-width: 60px; /* мінімум 40px */
  --adsgram-task-icon-border-radius: 8px;

  display: block;
  width: 328px;
  padding: 8px 16px 8px 8px;
  border-radius: 16px;
  background-color: #1d2733;
  font-family: Roboto;
  color: white;
}

.task__reward {
  margin: 5px 0 0 0;
  font-size: 14px;
}

.task__button {
  margin-left: 10px;
  background-color: #50a8eb;
  border-radius: 5px;
  padding: 6px 12px;
}

.task__button_claim {
  margin-left: 0;
  background-color: #ee941c;
}

.task__button_done {
  margin-left: 0;
  background-color: #007539;
}
js
const task = document.querySelector(".task");
task.addEventListener("reward", (event) => {
  // в event.detail буде id вашого блоку
  alert(`Нагорода в блоці ${event.detail}`);
});

task.addEventListener("onError", (event) => {
  alert(`Помилка при завантаженні або рендері для блоку ${event.detail}`);
});

task.addEventListener("onBannerNotFound", (event) => {
  alert(`Не знайдено банер для блоку ${event.detail}`);
});

task.addEventListener("onTooLongSession", (event) => {
  alert('Занадто довга сесія, необхідно перезапустити додаток щоб отримувати рекламу');
});

React ​

Вставте наступний скрипт в тег <head> вашого HTML.

Створіть React-компонент Task ​

jsx
import { useEffect, useRef } from "react";
import styles from "./task.module.css";

export const Task = ({ debug, blockId }) => {
  const taskRef = useRef(null);

  useEffect(() => {
    const handler = (event) => {
      // в event.detail буде id вашого блоку
      alert(`Нагорода, detail = ${event.detail}`);
    };
    const task = taskRef.current;

    if (task) {
      task.addEventListener("reward", handler);
    }

    return () => {
      if (task) {
        task.removeEventListener("reward", handler);
      }
    };
  }, []);

  if (!customElements.get("adsgram-task")) {
    return null;
  }

  return (
    <adsgram-task
      className={styles.task}
      data-block-id={blockId}
      data-debug={debug}
      ref={taskRef}
    >
      <span slot="reward" className={styles.reward}>
        1000 монет
      </span>
      <div slot="button" className={styles.button}>
        вперед
      </div>
      <div slot="claim" className={styles.button_claim}>
        отримати
      </div>
      <div slot="done" className={styles.button_done}>
        готово
      </div>
    </adsgram-task>
  );
};
tsx
import { useEffect, useRef } from "react";
import styles from "./task.module.css";
import { JSX } from "react/jsx-runtime";

/**
  * Перевірте розділ Typescript
  * і додайте типи для типізації <adsgram-task>
*/

interface TaskProps {
  debug: boolean;
  blockId: string;
}

export const Task = ({ debug, blockId }: TaskProps) => {
  const taskRef = useRef<JSX.IntrinsicElements["adsgram-task"]>(null);

  useEffect(() => {
    const handler = (event: CustomEvent) => {
      // в event.detail буде id вашого блоку
      alert(`Нагорода detail = ${event.detail}`);
    };
    const task = taskRef.current;

    if (task) {
      task.addEventListener("reward", handler);
    }

    return () => {
      if (task) {
        task.removeEventListener("reward", handler);
      }
    };
  }, []);

  if (!customElements.get("adsgram-task")) {
    return null;
  }

  return (
    <adsgram-task
      className={styles.task}
      data-block-id={blockId}
      data-debug={debug}
      ref={taskRef}
    >
      <span slot="reward" className={styles.reward}>
        1000 монет
      </span>
      <div slot="button" className={styles.button}>
        вперед
      </div>
      <div slot="claim" className={styles.button_claim}>
        отримати
      </div>
      <div slot="done" className={styles.button_done}>
        готово
      </div>
    </adsgram-task>
  );
};