How to pass click event data from Builder.io back to a Nuxt/Vue2 application?

Technical Questions
1

What are you trying to accomplish
I’m very interested in the potential of what this product offers and am building a prototype to see if it will work in my company’s application. I’m having difficulties passing data from Builder.io back to our application. I have read through the docs and the forum and can’t seem to find any information about how to do this in Nuxt/Vue. It seems to be fairly full featured for React but not quite ready for Nuxt/Vue.

I need to have buttons on the pages that when clicked emit an event back out to our application indicating which button was clicked so that the app can respond accordingly.

I have been able to successfully load the builder.io landing page into the application using the Vue SDK but cannot for the life of me get it to pass click events from Builder.io to the app.

I have seen a form post where someone is asking the same question and the only response is that it can be done with data bindings from within Builder.io but with no further explanation. I attempted to do this with no success.

Code stack you are integrating Builder with
Nuxt 2 / Vue 2

2

No response is a response. I guess this product is not ready for enterprise Nuxt. I’ll just move on to the next one. Thanks.

3

Hello there,

We are actively working on improving our Vue SDK and you can check its preliminary progress here in the README. A more comprehensive status update coming soon!

There are a couple options to pass your click event:

  1. Add a “custom element attribute” for tracking and using our current Vue SDK have a listener around. In the example below handleClick looks for something like event.target.closest('data-track') and tracks the event name. Then in Builder you can add to any element a “custom element attribute” like data-track = clickCta . You can save that as a template and clicking that will track as clickCta.

    <div @click="handleClick">
  <BuilderComponent ... />
</div>

    Screen Shot 2022-01-27 at 3.51.40 PM
    Screen Shot 2022-01-27 at 3.51.40 PM660×516 12.8 KB

  2. Try our new Vue 2.0 SDK (beta) where you can register custom components that can track custom events within them

Additionally, we have built-in tracking that will automatically surface analytics on what buttons are clicked. You can view this by clicking on the heatmap in the Insights tab.

Visualizing clicks, taps, and conversions using the heatmap

4

Thank you for the reply. I’ll give this a try and get it working.

5

You’re welcome! Please reach out if you still have questions.