trackConversion in vue/nuxt

Technical Questions
1

Builder content link

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

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?

2

Hello @ps-20x,

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

3

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?

4

Hello @ps-20x,

Does this not works?

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

@manish-sharma thanks for your reply. No this is not working because track expects an event
image

6

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

7

Hello @ps-20x ,

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

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
});
8

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

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

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

{
  "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

{ "message": "Ok" }

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

9

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,

10

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,