nuxt-yandex-metrika 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) TakNePoidet <yakin95@gmail.com>
+
+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,158 @@
+<!--
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: Yandex Metrika
+- Package name: nuxt-yandex-metrika
+- Description: Yandex Metrika for Nuxt 3
+-->
+
+# Yandex Metrika for Nuxt 3
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+## Quick Setup
+
+1. Add `nuxt-yandex-metrika` dependency to your project
+
+```bash
+# Using pnpm
+pnpm add -D nuxt-yandex-metrika
+
+# Using yarn
+yarn add --dev nuxt-yandex-metrika
+
+# Using npm
+npm install --save-dev nuxt-yandex-metrika
+```
+
+2. Add `nuxt-yandex-metrika` to the `modules` section of `nuxt.config.ts`
+
+```ts
+export default defineNuxtConfig({
+  modules: ["nuxt-yandex-metrika"],
+});
+```
+
+## Configure
+
+```ts
+{
+  modules: ["nuxt-yandex-metrika"],
+  yandexMetrika: {
+    id: 'XXXXXX',
+    // debug: process.env.NODE_ENV !== "production",
+    // delay: 0,
+    // cdn: false,
+    // options: {
+    //  webvisor: true
+    // },
+  }
+}
+```
+
+## Options
+
+| Name                | Default value | Type    | Description                                                                                                                                      |
+|---------------------|---------------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------|
+| accurateTrackBounce | true          | Boolean | Number                                                                                                                                           | Accurate bounce rate The parameter can accept these values: true — Enable the accurate bounce rate, with a non-bounce event registered after 15000 ms (15 s). false — Don't enable the accurate bounce rate. <N> (integer) — Enable the accurate bounce rate. Non-bounce events are recorded after <N> ms. |
+| childIframe         | false         | Boolean | Whether to record iframe contents without a tag in a child window                                                                                |
+| clickmap            | true          | Boolean | Whether to collect data for a click map                                                                                                          |
+| defer               | false         | Boolean | Whether to disable automatically sending data during tag initialization                                                                          |
+| ecommerce           | false         | Boolean | String                                                                                                                                           | Array                                                                                                                                                                                                                                                                                                      | Collect data for e-commerce — Ecommerce. true — Enable e-commerce data collection. Data is transmitted via a JavaScript array named dataLayer in the global namespace (window.dataLayer) false — Disable Ecommerce data collection. <objectName> (String) — Enable Ecommerce data collection. Data is transmitted via a JavaScript array named <objectName> in the global namespace (window.<objectName>) <array> (Array) — Enable Ecommerce data collection. Data is transmitted via a JavaScript <array> |
+| params              | —             | Object  | Array                                                                                                                                            | Session parameters transmitted during tag initialization To transmit session parameters at any other time, use the params method                                                                                                                                                                           |
+| userParams          | —             | Object  | Parameters of site users that are transmitted when initializing the tag To transmit user parameters at any other time, use the userParams method |
+| trackHash           | false         | Boolean | Hash tracking in the browser's address bar                                                                                                       |
+| trackLinks          | true          | Boolean | Track clicks on outbound links                                                                                                                   |
+| trustedDomains      | —             | Array   | Indicates a trusted domain for recording the contents of a child iframe. Contains the domain address of the parent window                        |
+| type                | 0             | Number  | Tag type. 1 for YAN                                                                                                                              |
+| webvisor            | false         | Boolean | Whether to use Session Replay                                                                                                                    |
+| triggerEvent        | false         | Boolean | Whether to check if the tag is ready                                                                                                             |
+
+For more information:
+
+- [Documentation for Ya.Metrika](https://yandex.com/support/metrica/code/counter-initialize.html)
+
+## Usage
+
+| Component Name              | Auto Imported | Description    |
+|-----------------------------|---------------|----------------|
+| `<YandexMetrikaInformer />` | ✅             | Shows informer |
+
+### Methods
+
+```vue
+<template>
+    <button @click.prevent.stop="reachGoal('click', {})">click</button>
+</template>
+
+<script setup lang="ts">
+import { useYandexMetrika } from "#imports";
+
+const { reachGoal } = useYandexMetrika();
+</script>
+```
+
+- [For more information](https://yandex.com/support/metrica/objects/method-reference.html?lang=en)
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Generate type stubs
+npm run dev:prepare
+
+# Develop with the playground
+npm run dev
+
+# Build the playground
+npm run dev:build
+
+# Run ESLint
+npm run lint
+
+# Run Vitest
+npm run test
+npm run test:watch
+
+# Release new version
+npm run release
+```
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+# Contact
+
+Yakin Nikita - [@TakNePoidet](https://t.me/TakNePoidet)
+
+# Contributors
+
+<a href="https://github.com/TakNePoidet/nuxt-yandex-metrika/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=TakNePoidet/nuxt-yandex-metrika" />
+</a>
+
+## License
+
+[MIT License](./LICENSE)
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/nuxt-yandex-metrika/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/nuxt-yandex-metrika
+[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-yandex-metrika.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/nuxt-yandex-metrika
+[license-src]: https://img.shields.io/npm/l/nuxt-yandex-metrika.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://npmjs.com/package/nuxt-yandex-metrika
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -0,0 +1,46 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+declare global {
+    interface Window {
+        ym: ((...args: any[]) => void) & {
+            a: any[];
+            l: number;
+        };
+    }
+}
+interface VisitParameters {
+    order_price?: number;
+    currency?: string;
+    [key: string]: any;
+}
+interface UserParameters {
+    UserID?: number;
+    [key: string]: any;
+}
+interface InitParameters {
+    accurateTrackBounce?: boolean | number;
+    childIframe?: boolean;
+    clickmap?: boolean;
+    defer?: boolean;
+    ecommerce?: boolean | string | any[];
+    params?: VisitParameters | VisitParameters[];
+    userParams?: UserParameters;
+    trackHash?: boolean;
+    trackLinks?: boolean;
+    trustedDomains?: string[];
+    type?: number;
+    webvisor?: boolean;
+    triggerEvent?: boolean;
+}
+
+type YandexMetrikaModuleOptions = {
+    id: string;
+    debug: boolean;
+    cdn: boolean;
+    delay: number;
+    options: Partial<InitParameters>;
+};
+
+declare const _default: _nuxt_schema.NuxtModule<YandexMetrikaModuleOptions>;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,8 @@
+{
+  "name": "nuxt-yandex-metrika",
+  "version": "1.0.1",
+  "configKey": "yandexMetrika",
+  "compatibility": {
+    "nuxt": "^3"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,42 @@
+import { defineNuxtModule, createResolver, addPlugin, addComponent, addImportsDir } from '@nuxt/kit';
+import { defu } from 'defu';
+
+const name = "nuxt-yandex-metrika";
+const version = "1.0.1";
+
+const module = defineNuxtModule({
+  meta: {
+    name,
+    version,
+    configKey: "yandexMetrika",
+    compatibility: {
+      nuxt: "^3"
+    }
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {
+    id: "xxx",
+    debug: process.env.NODE_ENV !== "production",
+    delay: 0,
+    cdn: false,
+    options: {}
+  },
+  setup(options, nuxt) {
+    nuxt.options.runtimeConfig.public.yandexMetrika = defu(
+      nuxt.options.runtimeConfig.public.yandexMetrika ?? {},
+      options
+    );
+    const resolver = createResolver(import.meta.url);
+    addPlugin({
+      mode: "all",
+      src: resolver.resolve("./runtime/plugin")
+    });
+    void addComponent({
+      name: "yandex-metrika-informer",
+      filePath: resolver.resolve("./runtime/yandex-metrika-informer.vue")
+    });
+    addImportsDir(resolver.resolve("runtime/composables"));
+  }
+});
+
+export { module as default };

package/dist/runtime/composables/useYandexMetrika.d.ts

@@ -0,0 +1,2 @@
+import { YandexMetrika } from "../../yandex-metrika";
+export declare function useYandexMetrika(): YandexMetrika;

package/dist/runtime/composables/useYandexMetrika.mjs

@@ -0,0 +1,5 @@
+import { useNuxtApp } from "#imports";
+export function useYandexMetrika() {
+  const { $yandexMetrika } = useNuxtApp();
+  return $yandexMetrika;
+}

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugin.mjs

@@ -0,0 +1,90 @@
+import {
+  defineNuxtPlugin,
+  useHead,
+  useRouter,
+  useRuntimeConfig
+} from "#imports";
+import { Methods, YandexMetrika } from "../yandex-metrika";
+export default defineNuxtPlugin({
+  parallel: true,
+  setup() {
+    const config = useRuntimeConfig().public.yandexMetrika;
+    const { id, cdn = false, delay = 0, debug, options = {} } = config;
+    if (!debug) {
+      useHead({
+        noscript: [
+          {
+            innerHTML: `<div><img src="https://mc.yandex.ru/watch/${id}" style="position:absolute; left:-9999px;" alt="" />`
+          }
+        ]
+      });
+    }
+    function useYandexMetrikaHead() {
+    }
+    if (debug || delay) {
+      useHead({
+        script: [
+          {
+            innerHTML: `window.ym=window.ym||function(){(window.ym.a=window.ym.a||[]).push(arguments)};window.ym.l=(new Date).getTime();`
+          },
+          {
+            innerHTML: `ym("${id}","${Methods.Init}", ${JSON.stringify(
+              options
+            )});`
+          }
+        ]
+      });
+    } else {
+      useHead({
+        script: [
+          {
+            innerHTML: `(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "${YandexMetrika.src(
+              cdn
+            )}", "ym");`
+          }
+        ]
+      });
+    }
+    if (!debug && delay && process.client) {
+      setTimeout(() => {
+        useHead({
+          script: [
+            {
+              defer: true,
+              src: YandexMetrika.src(cdn)
+            }
+          ]
+        });
+      }, delay);
+    }
+    const yandexMetrika = new YandexMetrika(id);
+    yandexMetrika.debug = debug;
+    if (process.client) {
+      let ready = false;
+      const router = useRouter();
+      void router.isReady().then(() => {
+        ready = true;
+      });
+      router.afterEach((to, from) => {
+        if (!ready) {
+          return;
+        }
+        yandexMetrika.hit(to.fullPath, {
+          referer: from.fullPath
+        });
+      });
+    }
+    return {
+      provide: {
+        yandexMetrika: new Proxy(yandexMetrika, {
+          get(target, name) {
+            if (typeof target[name] === "function") {
+              return target[name].bind(target);
+            }
+            return target[name];
+          }
+        })
+      }
+    };
+  }
+});

package/dist/runtime/yandex-metrika-informer.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useYandexMetrika } from "./composables/useYandexMetrika";
+const { id } = useYandexMetrika();
+</script>
+
+<template>
+  <!-- Yandex.Metrika informer -->
+  <a
+    :href="`https://metrika.yandex.ru/stat/?id=${id}&amp;from=informer`"
+    target="_blank"
+    rel="nofollow"
+  ><img
+    :src="`https://informer.yandex.ru/informer/${id}/3_1_FFFFFFFF_EFEFEFFF_0_pageviews`"
+    style="width: 88px; height: 31px; border: 0"
+    alt="Яндекс.Метрика"
+    title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)"
+    class="ym-advanced-informer"
+    :data-cid="id"
+    data-lang="ru"
+  ></a>
+  <!-- /Yandex.Metrika informer -->
+</template>

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+
+import {  } from './module'
+
+
+
+
+export { default } from './module'

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "nuxt-yandex-metrika",
+  "version": "1.0.1",
+  "description": "Add Yandex Metrika to your Nuxt 3 application.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TakNePoidet/nuxt-yandex-metrika.git"
+  },
+  "homepage": "TakNePoidet/nuxt-yandex-metrika",
+  "license": "MIT",
+  "type": "module",
+  "author": {
+    "name": "TakNePoidet <https://taknepoidet.xyz/>",
+    "url": "https://github.com/TakNePoidet"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "release": "npm run lint && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "prettier": "prettier --write .",
+    "lint": "eslint --fix .",
+    "prepare": "husky install"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.7.0",
+    "chalk": "^5.3.0",
+    "defu": "^6.1.2"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "latest",
+    "@nuxt/eslint-config": "^0.2.0",
+    "@nuxt/module-builder": "^0.4.0",
+    "@nuxt/schema": "^3.7.0",
+    "@taknepoidet-config/prettier": "^2.1.0",
+    "@types/node": "^18.17.3",
+    "changelogen": "^0.5.4",
+    "eslint": "^8.48.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
+    "nuxt": "^3.7.0",
+    "prettier": "^3.0.3"
+  },
+  "packageManager": "pnpm@7.17.1",
+  "lint-staged": {
+    "**/*.(ts|vue)": [
+      "eslint --fix",
+      "git add"
+    ],
+    "**/*.*": [
+      "prettier --write",
+      "git add"
+    ]
+  }
+}