Google Analytics dataLayer.push 在 Javascript Promise 中不起作用

Question

I am running into a weird issue trying to trigger the window.dataLayer.push() when trying to utilize Google Analytics Tag Manager dataLayer firing logic when that call is placed inside a Promise . I assume this is Promise based due to the below logic:

Simply placing this snippet in a.js file loaded in the footer of the site, this works fine and I see it firing in my console:

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({
  'event': 'dataLayer-initialized',
  'pageName': 'First'
});

I then update the file with the following:

const result = callGenericBackend().then((res)=>{return res});
window.dataLayer = window.dataLayer || [];

window.dataLayer.push({
  'event': 'dataLayer-initialized',
  'pageName': 'First'
});

result.then((res)=>{
    window.dataLayer = window.dataLayer || [];

    window.dataLayer.push({
      'event': 'dataLayer-initialized',
      'pageName': 'Second'
    });
  })

function callGenericBackend(pageID) {
    return new Promise((resolve,reject)=>{
      jQuery.ajax({
        type:'post',
        async: true,
        url:myAjax.ajaxurl,
        data : {pageID: pageID},
        dataType: 'json',
        error:(xhr)=>{
          console.warn('ajax error');
          reject(xhr);
          return false;
        },
        success:(data)=>{
          if (data.status === 200) {
            resolve(data);
          } else {
            reject(data);
          }
        }
      })
    })

The "First" continues to fire, but the "Second" is never fired. My callGenericBackend() simply returns a response via an .ajax call. What am I missing here with Promise logic to make this work? If I change async: false in callGenericBackend() it works, but I see this error in my console:

Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

Answer 1

Not sure if this would help since I don't know what data are u getting from the request and what do you want to do with that data:

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({
  'event': 'dataLayer-initialized',
  'pageName': 'First'
});

function callGenericBackend(pageID) {
    return $.ajax({
        type:'post',
        async: true,
        url:myAjax.ajaxurl,
        data : {pageID: pageID},
        dataType: 'json',
        error:(xhr)=>{
          console.warn('ajax error');
          reject(xhr);
          return false;
        },
        success:(data)=>{
          if (data.status === 200) {
            resolve(data);
          } else {
            reject(data);
          }
        }
      })
    })
}

$.when(callGenericBackend(YOUR_ID)).done(function(response){
    //access response data here

    window.dataLayer.push({
       'event': 'dataLayer-initialized',
       'pageName': 'First'
    });
});