https://www.growthbook.io/ logo
Join Slack
Powered by
Hello, I'm currently implementing Vue.js SDK with ...
# ask-questions
f
Hello, I'm currently implementing Vue.js SDK with composition API in our Nuxt SPA application. Feature flags works fine, I'm able to fetch them. When it comes to Visual editor it seems like I can't see changes done in expirement so probably I missed something. Before my implementation, we have had growthbook implemented by GTM described in this doc: https://docs.growthbook.io/guide/google-tag-manager-and-growthbook. In this case expirements created with Visual editor works well. My question is: Is it possible to use Visual editor in expirements in SPA application using only Vue SDK? Why feature flags works well, while I cant see eny expirements in response configured in panel? Unfortunately visual editor is very important tool for my organization so Im wondering if we really should implement it in our codebase or leave it in gtm? Appreciate any advices, thanks
even though i have expirements configured, my console.logs:
Copy code
console.log(growthBook?.getExperiments())
console.log(growthBook?.getFeatures())
keep returning empty array for expirements:
r
Hi Weronika, thanks for reaching out!
When it comes to Visual editor it seems like I can't see changes done in expirement so probably I missed something.
What user permission level do you have globally, for this environment, and for this project? Can you please send me a screenshot of what you are able to see in the Visual Editor in relation to this issue? Please note that the Visual Editor may not work optimally with apps that are rendered by the client (more details here).
Why feature flags works well, while I cant see eny expirements in response configured in panel?
This is likely due to my note above. How are you defining the features that you are able to see? From the GrowthBook UI?
f
hi, now ive managed to make it work, I can handle expirements and feature flags. the only thing that is still doesnt work is trackingCallback. Even though I can see changes in my app configured in gb panel and can handle feature flags I still cant see any trackingCalback being executed. there are more informations in this thread: https://growthbookusers.slack.com/archives/C01T6Q1SVFV/p1702462569096149
r
This code snippet is only logging the info to the console; it isnt actually sending anything to your data source via the ​`trackingCallback`​:
Copy code
trackingCallback: (experiment, result) => {
    // TODO: Use your real analytics tracking system
    console.log("Viewed Experiment", {
      experimentId: experiment.key,
      variationId: result.key,
    });
  },
Is this the actual code you are running, or were you just providing this as an example?
f
ofc it is example, i just want to see this console log and then implement proper analytics track, but for now i cant see any log in console
r
Ahh OK, I misunderstood what you were saying about logging to the console. I figured that the code snippet was just the example but I wanted to rule that out as a cause of the issue!
Can you send me a screeshot of the GrowthBook-related code you are using?
What user permission level do you have the global, environment, and project levels?
How are you defining the features that you are able to see? From the GrowthBook UI?
f
Untitled.js
Untitled.js
example expirement config:
here for example ive created visual expirement which adds additional badge html element on my product page. My dev enviroment is connected with gb so I can see this change on my frontend but log from trackingCallback is not fired
this is the object of my expirement:
Copy code
{
  "key": "offer-investment-roi-v3",
  "status": "running",
  "variations": [
    {
      "css": "",
      "js": "",
      "domMutations": []
    },
    {
      "css": "",
      "js": "// Function to check and add the button\nfunction checkAndAddButton() {\n    var buttons = document.querySelectorAll('button');\n    var existingButton = null;\n\n    // Check if the new button already exists\n    var isOurButtonPresent = document.querySelector('button.new-custom-button');\n    if (isOurButtonPresent) {\n        return; // Exit the function if the new button is already there\n    }\n\n    // Find the \"Oblicz ratę\" button\n    for (var i = 0; i < buttons.length; i++) {\n        if (buttons[i].textContent.includes('Oblicz ratę')) {\n            existingButton = buttons[i];\n            break;\n        }\n    }\n\n    // If the \"Oblicz ratę\" button is found, create the new button\n    if (existingButton) {\n        var newButton = document.createElement('button');\n        newButton.classList.add('new-custom-button'); // Add a class to identify our new button\n\n        // Set styles for the new button\n        newButton.style.cssText = \"color: var(--c-primary); background-color: var(--c-gray1); \" +\n                                  \"border: 1px solid rgb(221, 232, 253); height: 1.5rem; padding: 1px 0.25rem; \" +\n                                  \"apperance: button; border-radius: var(--r-small);\";\n\n        // Create and style the span element\n        var newSpan = document.createElement('span');\n        newSpan.textContent = 'Wylicz zysk z najmu';\n        newSpan.style.cssText = \"color: var(--c-primary); font-size: .875rem; letter-spacing: 1.2px; \" +\n                                \"text-transform: uppercase; font-weight: 500;\";\n        newButton.appendChild(newSpan);\n\n        // Add click event listener to the new button\n        newButton.addEventListener('click', function() {\n            window.open('<https://morizon.typeform.com/to/qX7zzjxi>', '_blank');\n        });\n\n        // Insert the new button after the existing button\n        existingButton.parentNode.insertBefore(newButton, existingButton.nextSibling);\n    }\n}\n\n// Run the function every 2 seconds\nsetInterval(checkAndAddButton, 1000);\n",
      "domMutations": []
    }
  ],
  "hashVersion": 2,
  "hashAttribute": "",
  "urlPatterns": [
    {
      "include": true,
      "type": "simple",
      "pattern": "/oferta/sprzedaz-mieszkanie*"
    }
  ],
  "weights": [
    0.5,
    0.5
  ],
  "meta": [
    {
      "key": "0",
      "name": "Control"
    },
    {
      "key": "1",
      "name": "Variation 1"
    }
  ],
  "filters": [],
  "seed": "offer-investment-roi-v3",
  "name": "offer-investment-roi-v3",
  "phase": "0",
  "coverage": 1
}
tracking callback shows:
r
Hi @famous-bird-26809 I saw in another thread that you may have used the solution offered by Neim. Do you still need help with this?
25 Views
Open in Slack
PreviousNext
Powered by