Expand my Community achievements bar.

SOLVED

Send data to Adobe after an AJAX event

Avatar

Level 1

We have a page with following code

<html>

  <head>

    <meta charset="utf-8" />

     <script type="text/javascript" src='https://assets.adobedtm.com/1234567/satelliteLib-1234'></script>

</head>

<body>

......

<script type="text/javascript">_satellite.pageBottom();</script>

</body>

</html>

What I understand from _satellite.pageBottom() function is that it sends the DTM data set via JS from browser after the page is loaded, which is working as expected.

Now, we have a requirement where we need to send some data to Adobe after an AJAX event is triggered. We are unable to find which event to trigger to send this data to Adobe. Any idea how should we go about it ?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

You could set up a global ajax handler as described here:

http://api.jquery.com/ajaxsuccess/

You'd do this from custom JS in a page load rule.  Inside the handler, you'll need to inspect to make sure that you got the success event from the ajax call that you care about.  I simple if / then should do the trick.  Then you could call _satellite.track to trigger a DTM rule with the tracking that you want to send to AA.

Start with something like this:

$( document ).ajaxSuccess(function( event, xhr, settings ) {
     console.log("ajaxSuccess!!!",event, xhr, settings);
  if ( settings.url == "ajax/test.html" ) { //modify this to match your specific ajax call.
       console.log( "Triggered ajaxSuccess handler. The Ajax response was: " + xhr.responseText );
              
               //This shows how to set a dynamic data element that you can use in the AA portion of your direct call rule (like this %l_myAjaxResponse%)

               _satellite.setVar("l_myAjaxResponse", xhr.responseText);

      //This triggers your direct call rule

               _satellite.track("myAjaxTracking");
  }
});

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

You could set up a global ajax handler as described here:

http://api.jquery.com/ajaxsuccess/

You'd do this from custom JS in a page load rule.  Inside the handler, you'll need to inspect to make sure that you got the success event from the ajax call that you care about.  I simple if / then should do the trick.  Then you could call _satellite.track to trigger a DTM rule with the tracking that you want to send to AA.

Start with something like this:

$( document ).ajaxSuccess(function( event, xhr, settings ) {
     console.log("ajaxSuccess!!!",event, xhr, settings);
  if ( settings.url == "ajax/test.html" ) { //modify this to match your specific ajax call.
       console.log( "Triggered ajaxSuccess handler. The Ajax response was: " + xhr.responseText );
              
               //This shows how to set a dynamic data element that you can use in the AA portion of your direct call rule (like this %l_myAjaxResponse%)

               _satellite.setVar("l_myAjaxResponse", xhr.responseText);

      //This triggers your direct call rule

               _satellite.track("myAjaxTracking");
  }
});