@vestigemetrics/vue 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +94 -3
- package/package.json +5 -6
package/README.md
CHANGED
|
@@ -2,10 +2,41 @@
|
|
|
2
2
|
|
|
3
3
|
Adapter Vue para a tag compilada do Vestige Metrics.
|
|
4
4
|
|
|
5
|
+
- [Documentação da plataforma](https://docs.vestigemetrics.com.br/)
|
|
6
|
+
- [Site do Vestige Metrics](https://vestigemetrics.com.br/)
|
|
7
|
+
|
|
8
|
+
O pacote carrega automaticamente a tag da conta informada:
|
|
9
|
+
|
|
10
|
+
```text
|
|
11
|
+
//tag.ltrck.com.br/lt{ACCOUNT_ID}.js
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Instalação
|
|
15
|
+
|
|
5
16
|
```bash
|
|
6
17
|
yarn add @vestigemetrics/vue
|
|
7
18
|
```
|
|
8
19
|
|
|
20
|
+
## Instalação no Vue
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
import { createApp } from 'vue';
|
|
24
|
+
import { createVestige } from '@vestigemetrics/vue';
|
|
25
|
+
import App from './App.vue';
|
|
26
|
+
|
|
27
|
+
const app = createApp(App);
|
|
28
|
+
|
|
29
|
+
app.use(createVestige({
|
|
30
|
+
accountId: '5-0'
|
|
31
|
+
}));
|
|
32
|
+
|
|
33
|
+
app.mount('#app');
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Vue Router
|
|
37
|
+
|
|
38
|
+
Quando um router é informado, o adapter cria um novo pageview na rota inicial e em cada navegação.
|
|
39
|
+
|
|
9
40
|
```ts
|
|
10
41
|
app.use(createVestige({
|
|
11
42
|
accountId: '5-0',
|
|
@@ -14,12 +45,72 @@ app.use(createVestige({
|
|
|
14
45
|
}));
|
|
15
46
|
```
|
|
16
47
|
|
|
17
|
-
|
|
48
|
+
No modo `auto`, o pageview é construído e registrado automaticamente. Nesse modo, chamar `registerPageview()` manualmente gera erro.
|
|
49
|
+
|
|
50
|
+
## Modo manual
|
|
51
|
+
|
|
52
|
+
Com router, o adapter constrói o pageview, mas deixa o registro sob controle da aplicação:
|
|
18
53
|
|
|
19
54
|
```ts
|
|
55
|
+
app.use(createVestige({
|
|
56
|
+
accountId: '5-0',
|
|
57
|
+
router,
|
|
58
|
+
preset: 'manual'
|
|
59
|
+
}));
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
```ts
|
|
63
|
+
import { useVestige } from '@vestigemetrics/vue';
|
|
64
|
+
|
|
65
|
+
const vestige = useVestige();
|
|
66
|
+
|
|
67
|
+
await vestige.registerPageview();
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Sem router, a aplicação pode construir e registrar o pageview manualmente:
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
const context = await vestige.buildPageview({
|
|
74
|
+
url: '/checkout',
|
|
75
|
+
referrer: document.referrer
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
await vestige.registerPageview();
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
Quando um router é configurado, chamar `buildPageview()` manualmente gera erro.
|
|
82
|
+
|
|
83
|
+
## Eventos e leads
|
|
84
|
+
|
|
85
|
+
```ts
|
|
86
|
+
await vestige.event({
|
|
87
|
+
name: 'checkout_started'
|
|
88
|
+
});
|
|
89
|
+
|
|
20
90
|
await vestige.identifyLead('EMAIL', 'user@example.com');
|
|
21
91
|
await vestige.identifyLead('PHONE', '5511999999999');
|
|
22
92
|
```
|
|
23
93
|
|
|
24
|
-
|
|
25
|
-
|
|
94
|
+
## VDA
|
|
95
|
+
|
|
96
|
+
```ts
|
|
97
|
+
const code = await vestige.getVdaCode();
|
|
98
|
+
|
|
99
|
+
await vestige.updateElementWithVda(
|
|
100
|
+
document.querySelector('#checkout')!,
|
|
101
|
+
'sck',
|
|
102
|
+
'pay.hotmart'
|
|
103
|
+
);
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## API
|
|
107
|
+
|
|
108
|
+
- `buildPageview(data)`
|
|
109
|
+
- `registerPageview()`
|
|
110
|
+
- `pageview(data)`
|
|
111
|
+
- `event(data)`
|
|
112
|
+
- `identifyLead(type, value)`
|
|
113
|
+
- `getVdaCode()`
|
|
114
|
+
- `updateElementWithVda(element, parameter, urlPattern)`
|
|
115
|
+
|
|
116
|
+
Todos os métodos do adapter retornam `Promise` porque aguardam o carregamento da tag compilada da conta.
|
package/package.json
CHANGED
|
@@ -1,22 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vestigemetrics/vue",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Vue adapter for Vestige Metrics compiled tags",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"module": "./dist/index.js",
|
|
8
8
|
"types": "./dist/index.d.ts",
|
|
9
|
-
"files": [
|
|
9
|
+
"files": [
|
|
10
|
+
"dist",
|
|
11
|
+
"README.md"
|
|
12
|
+
],
|
|
10
13
|
"scripts": {
|
|
11
14
|
"build": "node ../../scripts/build-vue-package.mjs"
|
|
12
15
|
},
|
|
13
16
|
"peerDependencies": {
|
|
14
17
|
"vue": ">=3.3.0"
|
|
15
18
|
},
|
|
16
|
-
"repository": {
|
|
17
|
-
"type": "git",
|
|
18
|
-
"url": "git+https://github.com/vestigemetrics/front_tag.git"
|
|
19
|
-
},
|
|
20
19
|
"license": "MIT",
|
|
21
20
|
"homepage": "https://vestigemetrics.com.br",
|
|
22
21
|
"bugs": {
|