nuxtjs-vk-pixel 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) chemist-repo <larcev.dima@yandex.ru>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,260 @@
+# nuxtjs-vk-pixel
+
+Nuxt модуль для интеграции VK Pixel (Top.Mail.Ru счетчика) в Nuxt 3 приложения.
+
+## 📦 Установка
+
+```bash
+npm install nuxtjs-vk-pixel
+```
+
+## ⚙️ Настройка
+
+Добавьте модуль в `nuxt.config.ts`:
+
+```typescript
+export default defineNuxtConfig({
+  modules: [
+    'nuxtjs-vk-pixel',
+  ],
+  vkPixel: {
+    id: 'your-pixel-id', // Обязательный параметр
+    scriptSrc: 'https://top-fwz1.mail.ru/js/code.js', // Опционально
+    noscriptSrc: 'https://top-fwz1.mail.ru/counter', // Опционально
+    debug: false, // Опционально, по умолчанию true в dev режиме
+  },
+})
+```
+
+### Параметры конфигурации
+
+| Параметр | Тип | Обязательный | По умолчанию | Описание |
+|----------|-----|--------------|--------------|----------|
+| `id` | `string` | ✅ | `'xxx'` | ID вашего VK Pixel счетчика |
+| `scriptSrc` | `string` | ❌ | `'https://top-fwz1.mail.ru/js/code.js'` | URL скрипта счетчика |
+| `noscriptSrc` | `string` | ❌ | `'https://top-fwz1.mail.ru/counter'` | URL для noscript версии |
+| `debug` | `boolean` | ❌ | `NODE_ENV !== 'production'` | Включить режим отладки |
+
+## 🚀 Использование
+
+### Composable
+
+Используйте `useVkPixel()` для доступа к API счетчика:
+
+```vue
+<script setup lang="ts">
+const vkPixel = useVkPixel()
+
+// Отправка события просмотра страницы
+vkPixel.pageView({
+  url: window.location.href,
+  referrer: document.referrer
+})
+
+// Отправка произвольного события
+vkPixel.push({
+  type: 'reachGoal',
+  goal: 'purchase',
+  params: {
+    order_id: '12345',
+    amount: 1000
+  }
+})
+</script>
+```
+
+### Прямой доступ через NuxtApp
+
+Вы также можете получить доступ к счетчику через `$vkPixel`:
+
+```typescript
+const { $vkPixel } = useNuxtApp()
+$vkPixel.push({ type: 'pageView' })
+```
+
+## 📚 API
+
+### `useVkPixel()`
+
+Возвращает объект с методами для работы с VK Pixel.
+
+#### `pageView(payload: IPageViewPayload)`
+
+Отправляет событие просмотра страницы.
+
+**Параметры:**
+- `url: string` - URL страницы
+- `referrer: string` - URL реферера
+
+**Пример:**
+```typescript
+vkPixel.pageView({
+  url: 'https://example.com/page',
+  referrer: 'https://google.com'
+})
+```
+
+#### `push(payload: IPushPayload)`
+
+Отправляет произвольное событие в счетчик.
+
+**Параметры:**
+- `type: 'reachGoal' | 'pageView' | 'onready'` - Тип события
+- `goal?: string` - Идентификатор цели (для `reachGoal`)
+- `start?: number` - Время начала (timestamp)
+- `url?: string` - URL страницы
+- `category?: string` - Категория события
+- `action?: string` - Действие
+- `label?: string` - Метка события
+- `params?: Record<string, unknown>` - Дополнительные параметры
+- `callback?: (...args: any[]) => void` - Функция обратного вызова
+
+**Примеры:**
+
+```typescript
+// Отслеживание достижения цели
+vkPixel.push({
+  type: 'reachGoal',
+  goal: 'purchase',
+  params: {
+    order_id: '12345',
+    amount: 1000,
+    currency: 'RUB'
+  }
+})
+
+// Отслеживание просмотра страницы
+vkPixel.push({
+  type: 'pageView',
+  url: window.location.href,
+  start: Date.now()
+})
+
+// Отслеживание готовности страницы
+vkPixel.push({
+  type: 'onready',
+  callback: () => {
+    console.log('Pixel загружен')
+  }
+})
+```
+
+## 🔧 Типы
+
+Модуль экспортирует следующие TypeScript типы:
+
+```typescript
+interface IPageViewPayload {
+  id: string
+  url: string
+  referrer: string
+}
+
+interface IPushPayload {
+  id: string
+  type: 'reachGoal' | 'pageView' | 'onready'
+  goal?: string
+  start?: number
+  url?: string
+  category?: string
+  action?: string
+  label?: string
+  params?: Record<string, unknown>
+  callback?: (...args: any[]) => void
+}
+
+interface IVkPixelTmr {
+  pageView: (payload: IPageViewPayload) => void
+  push: (payload: IPushPayload) => void
+}
+```
+
+## 📝 Примеры использования
+
+### Отслеживание покупки
+
+```vue
+<script setup lang="ts">
+const vkPixel = useVkPixel()
+
+const handlePurchase = async (orderId: string, amount: number) => {
+  // Ваша логика покупки
+  await processPurchase(orderId, amount)
+  
+  // Отправка события в VK Pixel
+  vkPixel.push({
+    type: 'reachGoal',
+    goal: 'purchase',
+    params: {
+      order_id: orderId,
+      amount: amount,
+      currency: 'RUB'
+    }
+  })
+}
+</script>
+```
+
+### Отслеживание регистрации
+
+```vue
+<script setup lang="ts">
+const vkPixel = useVkPixel()
+
+const handleRegistration = async (email: string) => {
+  await registerUser(email)
+  
+  vkPixel.push({
+    type: 'reachGoal',
+    goal: 'registration',
+    params: {
+      email: email
+    }
+  })
+}
+</script>
+```
+
+### Отслеживание добавления в корзину
+
+```vue
+<script setup lang="ts">
+const vkPixel = useVkPixel()
+
+const addToCart = (productId: string, price: number) => {
+  // Ваша логика добавления в корзину
+  cart.add(productId)
+  
+  vkPixel.push({
+    type: 'reachGoal',
+    goal: 'add_to_cart',
+    params: {
+      product_id: productId,
+      price: price
+    }
+  })
+}
+</script>
+```
+
+## 🔍 Особенности
+
+- ✅ Автоматическая загрузка скрипта счетчика
+- ✅ Поддержка noscript версии для пользователей без JavaScript
+- ✅ TypeScript поддержка из коробки
+- ✅ Интеграция с `@nuxt/scripts` для оптимизированной загрузки
+- ✅ Автоматическая инициализация при готовности Nuxt приложения
+- ✅ Доступ через composable и через `$vkPixel`
+
+## 📄 Лицензия
+
+MIT
+
+## 👤 Автор
+
+Dmitrii Lartsev - [GitHub](https://github.com/chemist-repo)
+
+## 🔗 Ссылки
+
+- [Репозиторий](https://github.com/chemist-repo/nuxtjs-vk-pixel)
+- [VK Pixel документация](https://top-fwz1.mail.ru/js/code.js)

package/dist/module.d.mts

@@ -0,0 +1,12 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    id: string;
+    scriptSrc: string;
+    noscriptSrc: string;
+    debug: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "vk-pixel",
+  "configKey": "vkPixel",
+  "version": "0.0.3",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,36 @@
+import { defineNuxtModule, createResolver, addPlugin, addImports } from '@nuxt/kit';
+
+const defaultOptions = {
+  id: "xxx",
+  debug: import.meta.env.NODE_ENV !== "production",
+  scriptSrc: "https://top-fwz1.mail.ru/js/code.js",
+  noscriptSrc: "https://top-fwz1.mail.ru/counter"
+};
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "vk-pixel",
+    configKey: "vkPixel"
+  },
+  moduleDependencies() {
+    return {
+      "@nuxt/scripts": {}
+    };
+  },
+  defaults: defaultOptions,
+  setup(options, nuxt) {
+    nuxt.options.runtimeConfig.public.vkPixel = {
+      ...nuxt.options.runtimeConfig.public.vkPixel ?? {},
+      ...options,
+      ...defaultOptions
+    };
+    const resolver = createResolver(import.meta.url);
+    addPlugin(resolver.resolve("./runtime/plugin"));
+    addImports({
+      name: "useVkPixel",
+      as: "useVkPixel",
+      from: resolver.resolve("./runtime/composable")
+    });
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/composable.d.ts

@@ -0,0 +1 @@
+export declare function useVkPixel(): unknown;

package/dist/runtime/composable.js

@@ -0,0 +1,5 @@
+import { useNuxtApp } from "#app";
+export function useVkPixel() {
+  const { $vkPixel } = useNuxtApp();
+  return $vkPixel;
+}

package/dist/runtime/global.d.ts

@@ -0,0 +1,12 @@
+import type { IVkPixelTmr } from './types'
+
+declare global {
+  interface Window {
+    _tmr?: IVkPixelTmr
+  }
+  interface NuxtApp {
+    $vkPixel: IVkPixelTmr
+  }
+}
+
+export {}

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,7 @@
+import type { IVkPixelTmr } from './types.js';
+declare const _default: import("#app").Plugin<{
+    vkPixel: IVkPixelTmr;
+}> & import("#app").ObjectPlugin<{
+    vkPixel: IVkPixelTmr;
+}>;
+export default _default;

package/dist/runtime/plugin.js

@@ -0,0 +1,52 @@
+import { defineNuxtPlugin, useHead } from "#app";
+import { useScript } from "#nuxt-scripts/composables/useScript";
+export default defineNuxtPlugin({
+  parallel: true,
+  setup(nuxtApp) {
+    const { id, scriptSrc, noscriptSrc } = nuxtApp.$config.public.vkPixel ?? {};
+    const { proxy } = useScript(
+      scriptSrc,
+      {
+        trigger: "onNuxtReady",
+        use() {
+          (window._tmr || (window._tmr = [])).push({
+            id,
+            type: "pageView",
+            url: window.location.href,
+            start: (/* @__PURE__ */ new Date()).getTime()
+          });
+          return window._tmr;
+        }
+      }
+    );
+    useHead({
+      noscript: [
+        {
+          tagPosition: "bodyOpen",
+          textContent() {
+            return `<div><img src="${noscriptSrc}?id=${id};js=na" style="position:absolute;left:-9999px;" alt="Top.Mail.Ru" /></div>`;
+          }
+        }
+      ]
+    });
+    const vkPixel = {
+      push(payload) {
+        proxy.push({
+          ...payload,
+          id
+        });
+      },
+      pageView(payload) {
+        proxy.pageView({
+          ...payload,
+          id
+        });
+      }
+    };
+    return {
+      provide: {
+        vkPixel
+      }
+    };
+  }
+});

package/dist/runtime/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json",
+}

package/dist/runtime/types.d.ts

@@ -0,0 +1,25 @@
+export interface IBasePayload {
+    id: string;
+}
+export interface IPushPayload extends IBasePayload {
+    type: 'reachGoal' | 'pageView' | 'onready';
+    goal?: string;
+    start?: number;
+    url?: string;
+    category?: string;
+    action?: string;
+    label?: string;
+    params?: Record<string, unknown>;
+    callback?: (...args: any[]) => void;
+}
+export interface IPageViewPayload extends IBasePayload {
+    url: string;
+    referrer: string;
+}
+export interface IVkPixelTmr {
+    pageView: (payload: IPageViewPayload) => void;
+    push: (payload: IPushPayload) => void;
+}
+export interface IVkPixel {
+    tmr?: IVkPixelTmr;
+}

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "nuxtjs-vk-pixel",
+  "type": "module",
+  "version": "0.0.3",
+  "description": "NuxtJS VK Pixel module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chemist-repo/nuxtjs-vk-pixel.git"
+  },
+  "author": {
+    "name": "Dmitrii Lartsev <https://github.com/chemist-repo/>",
+    "url": "https://github.com/chemist-repo"
+  },
+  "homepage": "chemist-repo/nuxtjs-vk-pixel",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "npm run dev:prepare && nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
+    "hook:install": "lefthook install"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^4.2.2"
+  },
+  "peerDependencies": {
+    "@nuxt/scripts": "^0.13.2"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^20.3.1",
+    "@commitlint/config-conventional": "^20.3.1",
+    "@commitlint/types": "^20.3.1",
+    "@nuxt/devtools": "^3.1.1",
+    "@nuxt/eslint-config": "^1.12.1",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.2.2",
+    "@nuxt/test-utils": "^3.22.0",
+    "@types/node": "latest",
+    "changelogen": "^0.6.2",
+    "eslint": "^9.39.2",
+    "lefthook": "^2.0.13",
+    "nuxt": "^4.2.2",
+    "typescript": "~5.9.3",
+    "vitest": "^3.2.4",
+    "vue-tsc": "^3.2.2"
+  }
+}