# trackConversion in vue/nuxt

**URL:** <https://forum.builder.io/t/trackconversion-in-vue-nuxt/6074>\
**Category:** Technical Questions\
**Tags:** vuejs\
**Created:** [August 2, 2024, 6:56am UTC](https://forum.builder.io/t/trackconversion-in-vue-nuxt/6074 "2024-08-02T06:56:49Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ps-20x](https://avatars.discourse-cdn.com/v4/letter/p/e56c9b/32.png) [@ps-20x](https://forum.builder.io/u/ps-20x)\
**Post date:** [August 2, 2024, 6:56am UTC](https://forum.builder.io/t/trackconversion-in-vue-nuxt/6074/1 "2024-08-02T06:56:50Z")

</div>

**Builder content link**

> **[Builder.io: Visual Development Platform](https://builder.io/content/b9f020dd8a8648ecbc08990e4b82f1e9)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually..

**Builder public api key**  
159c7272fa3b40bfb00846dbc501c81e

**What are you trying to accomplish**  
I would like to be able to track the conversion correctly of an A/B-test

**Code stack you are integrating Builder with**  
Nuxt (vue) (version 3.12.4)  
@builder.io/sdk-vue (version 2.0.0)

**Description of the problem**

Builder provides information on how often there was a click on the page. But we actually only want to know the conversion on a specific target. In our case we have two pages with a different layout for our conversion click. And we would like to figure out which page converts better. The clicks on builder only show how often on the page was clicked and not only the clicks for the conversion.

So we want to track those specific clicks. For that we planned on doing a global event listener (`document.addEventListener`) that listens on any click. And if the click target includes a data-track attribute we would fire the `trackConversion` event as described in the docs: [Conversion tracking with Builder.io - Builder.io](https://www.builder.io/c/docs/conversion-tracking)

Although there is no option for vue and the sdk doesn’t export `builder` or a `trackConversion`- function. Only a `track`-function.

So the question is on how we can track our conversions in vue?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 5, 2024, 12:09pm UTC](https://forum.builder.io/t/trackconversion-in-vue-nuxt/6074/2 "2024-08-05T12:09:02Z")

</div>

Hello @ps-20x,

The Gen2 SDKS provide a `track` import `import` `{ track }` `from` ` '@builder.io/sdk-vue';`

---

<div class="post-metadata">

**Author:** ![ps-20x](https://avatars.discourse-cdn.com/v4/letter/p/e56c9b/32.png) [@ps-20x](https://forum.builder.io/u/ps-20x)\
**Post date:** [August 8, 2024, 8:58am UTC](https://forum.builder.io/t/trackconversion-in-vue-nuxt/6074/3 "2024-08-08T08:58:14Z")

</div>

Thank you for your reply @manish-sharma. Yes, that is correct. That’s also what I have written in my question. So the question still stands: how we can track our conversions in vue?

How do I need to use the `track` function to implement a conversion tracking?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 8, 2024, 10:38am UTC](https://forum.builder.io/t/trackconversion-in-vue-nuxt/6074/4 "2024-08-08T10:38:10Z")

</div>

Hello @ps-20x,

Does this not works?

```auto
import { track } from '@builder.io/sdk-vue'
track('conversion');
track('conversion', { value: 99.99 });

```

---

<div class="post-metadata">

**Author:** ![ps-20x](https://avatars.discourse-cdn.com/v4/letter/p/e56c9b/32.png) [@ps-20x](https://forum.builder.io/u/ps-20x)\
**Post date:** [August 9, 2024, 8:01am UTC](https://forum.builder.io/t/trackconversion-in-vue-nuxt/6074/5 "2024-08-09T08:01:45Z")

</div>

@manish-sharma thanks for your reply. No this is not working because track expects an event  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/e/ead22aef281bbf2c61f9d77a996a3f1052aa87e2.png)

---

<div class="post-metadata">

**Author:** ![ps-20x](https://avatars.discourse-cdn.com/v4/letter/p/e56c9b/32.png) [@ps-20x](https://forum.builder.io/u/ps-20x)\
**Post date:** [August 14, 2024, 11:20am UTC](https://forum.builder.io/t/trackconversion-in-vue-nuxt/6074/6 "2024-08-14T11:20:38Z")

</div>

@manish-sharma Do you have any information on how we could use the `track` method correctly?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 14, 2024, 11:56am UTC](https://forum.builder.io/t/trackconversion-in-vue-nuxt/6074/7 "2024-08-14T11:56:52Z")

</div>

> [@ps-20x](#):
>
> this is not working because track expects an event

Hello @ps-20x ,

Could you please try the below and let us know if that works for you?

```auto
import { track } from '@builder.io/sdk-vue';

// Tracking a conversion event
track({
  type: 'conversion'
});

// Tracking a conversion event with additional data
track({
  type: 'conversion',
  value: 99.99
});

```

---

<div class="post-metadata">

**Author:** ![ps-20x](https://avatars.discourse-cdn.com/v4/letter/p/e56c9b/32.png) [@ps-20x](https://forum.builder.io/u/ps-20x)\
**Post date:** [August 20, 2024, 10:32am UTC](https://forum.builder.io/t/trackconversion-in-vue-nuxt/6074/8 "2024-08-20T10:32:52Z")

</div>

Hello @manish-sharma

Thanks for your message.

It is not working when doing that.

The initial error is `Missing API key for track call. Please provide your API key.`  
When passing the api-key and `canTrack: true` in the `track` function

```js
track({
  apiKey: builderApiKey.value,
  canTrack: true,
  type: "conversion",
});

```

a request ist made with the following payload (removed the ids, host and urls)

```json
{
  "events": [{
    "type": "conversion",
    "data": {
      "metadata": {"url": "URL"},
      "sessionId": "SESSION_ID",
      "visitorId": "VISITOR_ID",
      "userAttributes": {"urlPath": "URL_OF_MY_PAGE", "host": "HOST", "device": "mobile"},
      "ownerId": "OWNER_ID"
    }
  }]
}

```

and I am getting this response

```json
{ "message": "Ok" }

```

Although when looking into the A/B-test there is no conversion tracked.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 21, 2024, 5:20pm UTC](https://forum.builder.io/t/trackconversion-in-vue-nuxt/6074/9 "2024-08-21T17:20:17Z")

</div>

Hello @ps-20x,

We are internally investigating this issue with our team to find a possible workaround or deploy a fix. I will keep you updated as soon as we have any insights.

Thanks,

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 3, 2024, 9:10am UTC](https://forum.builder.io/t/trackconversion-in-vue-nuxt/6074/10 "2024-09-03T09:10:12Z")

</div>

Hello @ps-20x,

After conducting an internal investigation, our team has concluded that the issue lies not with the SDK, but rather with the integration. Upon reviewing the preview URL of your content, we did not observe any `conversion` calls. It is necessary for you to deploy a version of your web app that includes these conversion calls. After doing so, open the A/B test multiple times to increase the conversions, and then verify if the number changes.

Furthermore, there may be an issue with the visual editor not displaying the actual conversions, which will require further investigation.

Thank you,