AdsGram

Русский

English
中文

Русский

English
中文

Appearance

Примеры кода ​

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='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_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("onBannerNotFound", (event) => {
  alert(`Не найден баннер для блока ${event.detail}`);
});

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="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="done" className={styles.button_done}>
        готово
      </div>
    </adsgram-task>
  );
};