How to render VEC decision on the server - Hybrid personalization using Web SDK and Edge Network Server API | Community
Skip to main content
Level 2
December 9, 2024
Solved

How to render VEC decision on the server - Hybrid personalization using Web SDK and Edge Network Server API

  • December 9, 2024
  • 1 reply
  • 811 views

I am working through the Hybrid personalization using Web SDK and Edge Network Server API example and have a few questions. A bit more context:

  • The site is using Adobe Experience Platform Web SDK extension in Adobe Tags. So far we've used the extensions Send Event to request personalization scope that is sent to our data layer

     

What I would like to do now is render VEC decisions server side using Next.js/React. My approach so far has been to follow the hybrid approach example linked above. On my page's getServerSideProps I the server-side request to the /ee/v2/interact endpoint and I can see my VEC experience in the response. Up to now, all is good...


The next step in the tutorial says to use the  Web SDK applyResponse command to render the decisions (code below copied from tutorial linked above). Because we are using the Adobe Experience Platform Web SDK extension in Adobe Tags I only have access to allow from the window, which means I can not render the decisions server side.

alloy("applyResponse", { "renderDecisions": true, "responseHeaders": { "cache-control": "no-cache, no-store, max-age=0, no-transform, private", "connection": "close", "content-encoding": "deflate", "content-type": "application/json;charset=utf-8", "date": "Mon, 11 Jul 2022 19:42:01 GMT", "server": "jag", "strict-transport-security": "max-age=31536000; includeSubDomains", "transfer-encoding": "chunked", "vary": "Origin", "x-adobe-edge": "OR2;9", "x-content-type-options": "nosniff", "x-konductor": "22.6.78-BLACKOUTSERVERDOMAINS:7fa23f82", "x-rate-limit-remaining": "599", "x-request-id": "5c539bd0-33bf-43b6-a054-2924ac58038b", "x-xss-protection": "1; mode=block" }, "responseBody": { "requestId": "5c539bd0-33bf-43b6-a054-2924ac58038b", "handle": [ { "payload": [ { "id": "XXX", "namespace": { "code": "ECID" } } ], "type": "identity:result" }, { "payload": [ {...}, {...} ], "type": "personalization:decisions", "eventIndex": 0 } ] } } ).then(applyPersonalization("sample-json-offer"));


Not sure what I'm missing. Any tips would be appreciated. How do accomplish applying the response server side?

Thank you

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by dwright-adobe

It seems like you can't if it says "Visual Experience Composer (VEC) offers are ignored since the Web SDK is required to render them." If Web SDK is required to render VEC offers and it's a client side library, than I guess you can't render them server side.

1 reply

Adobe Employee
December 11, 2024

Hi @msweeneyrab ,

If your goal is to handle the response server side, then I think that tutorial is not the one you should be looking at. That tutorial is for "rendering it client-side, using the Web SDK."

 

Take a look at this example and doc and see if this aligns better with what you are trying to do:

https://github.com/adobe/alloy-samples/tree/main/target/personalization-server-side

https://experienceleague.adobe.com/en/docs/experience-platform/edge-network-server-api/personalization/personalization-target 

 

Level 2
December 11, 2024

Hi @dwright-adobe thanks for your response. The github example you provided mentions the following:

  • The target offer from the form-based activity is read from the response and used when producing the HTML response (point 4 in the read me)
  • Visual Experience Composer (VEC) offers are ignored since the Web SDK is required to render them. (point 6 in the read me)


I am trying to render a VEC activity server side, do you know if that is possible?

 

We use server side rendering on our site (using Next.js and React) because of that we get a flash of content before the VEC decision is rendered on the browser, this is what we are trying to avoid.