Hi,
We have a SaaS based solution to personalize shopping experience of the customers and recently released our first version of our app for VTEX.
Currently we are facing problem at timing of rendering personalised recommendations.
We are listening page change events and trigger our service to get personalised recommendations (products, banners and other campaigns) and then render them into the page.
But we can’t control the timing of other components in the page and other components can overwrite our widgets.
What is the best practice to ensure a dynamic component whose data is coming from an external service like us?
All help is much appreciated.
Hello @ergineroglu, welcome to our community.
How are you implementing your solution?
Preferably always share some piece of code. In this way, the community will be able to analyze what you are implementing so that we can try to help more accurately.
For example, if it were an application related to Checkout, there are several events available that could be used
Otherwise I would try some solution based on window.onload
Actually it is a bit different than waiting window or document onload.
The pixel code we are adding with our app is like this:
var apiKey = '{{settings.apiKey}}';
const script = document.createElement('script');
const url = '//cdn.segmentify.com/' + apiKey + '/segmentify.js';
script.type = 'text/javascript';
script.src = url;
script.id = id;
script.charset = 'UTF-8';
var firstScript = document.getElementsByTagName('script')[0];
firstScript.parentNode.insertBefore(script, firstScript);
The script loaded contains event sending and rendering personalised offerings (similar to google analytics and google optimize).
Current challange is to trigger a pixel event (different page views) to our SDK (script loaded with the code above) and this call will return html content to be rendered.
In other platforms, we ask for customers to add a specific div in each page with class like “recommendation-widget” to target.
Now we are trying to add a component with our app, but facing problems in timing. Pixel event is triggered before component is rendered.