Use Response Tokens and at.js Custom Events with Adobe Target
Response Tokens and at.js
Custom Events allow you to share profile information from Target to third-party systems. Any object in the Target visitor profile, including custom profile attributes, geographic information, activity details, and built-in profiles can be added to the Target response where you can use custom JavaScript to integrate with a third-party.
Transcript
Let’s look at how you can use response tokens and at.js event listeners to send data from Target to another system. In this example I’m going to send Target activity details to the page so I can read them quickly in the Experience Cloud debugger. Here’s a quick visual of the end result. I load my page, open the debugger and I can quickly see that I’m in the Change to Headline Experience of an activity called Simple Headline Change. Now you can already get this information using the MBox trace tool in the debugger but the techniques that I’m going to use will be applicable to any integration you need to build which sends data from Target to another system. Examples include integrating Target with click tail, Google Analytics and other third party vendors. So a response token is basically just user profile information that you want Target to include in the response. The first step is to decide which tokens you’d like to return to the page. In the Target UI navigate to Setup Response Tokens and you’ll see all of the different options. Basically, these are built in profiles, activity details, geo location data and all of your custom profile parameters and profile scripts. In order to include them in the response, you just flip the toggle. Let’s look at what this does. If I reload my page and look at the Target response, I can see that each offer has a Response Tokens Object containing all of the tokens we just turned on. Notice how the values of the tokens are all unique to me as a visitor. This is the activity I am in, the city where I am located, etc. Makes sense? That’s why we call them tokens because they’re just abstract representations of specific values. The second step is to actually do something with this information. In my case I want to put information into a javascript object called ttMETA which the Adobe Experience Cloud debugger is setup to look for and display. In your case, you might take the information and send it in a request to a third party. The feature we’re going to use for this step is called at.js Custom Events. At.js Custom Events provide hooks that you can use to run code after Target has done various things. We have events for when at.js loads, when a requests starts, succeeds or fails. When content rendering starts, succeeds or fails. When no offers are returned or when a redirect offer is return. You can read all about them in the help documentation. I’m going to listen for the request succeeded event because obviously I’m not going to have any response tokens available until the Target response comes back. Now for ttMETA we have a complete code example available in help, which I’m going to Copy and Paste. The main parts to pay attention to are: the listener at the top which is listening for Adobe Target Event Request succeeded. Here where I reference the response tokens object in the event detail and then here where I reference the individual token values. The rest of this code is specific to my use case of shoving all of this data into an object called ttMETA. You’ll probably need to write your own custom javascript to achieve your specific use case. So now where do I put this code? Keep in mind that these listeners all reference the Adobe Target javascript object. Since at.js creates that object, you usually put the listeners after at.js has loaded but before any Target requests have fired. I’m deploying Target through our tag manager Launch so I can easily position this code between the low Target and fire global MBox actions. If you’re not using Launch you can run this code in the library footer section of at.js. Now that this is done. I can confirm the end to end functionality. If I reload my page, I can confirm that I now have a ttMETA object with my activity details. This ttMETA object will be picked up by the debugger on the Summary tab. If you’re sending data to a third party, you’d want to validate that the tokens are being added correctly to your third party request and then showing up correctly within that third party tool. So remember, this will make the activity details available to all site visitors who know how to look for it in the debugger or in the ttMETA object. If you don’t want these details exposed, don’t use these response tokens. Instead just use the MBox Trace feature and the debugger which requires authentication. Again the purpose of this video is to show you the technique so you can build custom integrations between Target and other third party solutions. That’s it. Thanks for watching. I’m Daniel Wright, technical marketing engineer.
How to use Response Tokens and at.js Custom Events
- Determine which data you need from Target
- Turn on the Response Tokens for the data that you need by flipping the toggle on the Setup->Response Tokens screen
- Determine which event listener you need to use
- Write the JavaScript necessary to listen for the Adobe Target event, read the response tokens, and do what you need for your integration
- Deploy your event listener JavaScript using a custom code action in Launch after the “Load Target” action or add it to the Library Footer section of at.js on the Setup->Implementation screen and save a new at.js file
- QA and publish your integration
Additional Resources
recommendation-more-help
0f172607-337e-442f-a279-477fd735571f