JSON Offer - Sucess Metrics not Shown in Reports Panel

I am using JSON Offer to manupulate the webpage. I use getOffers and applyOffers functions to show what I retrieved from Target to users. I also listen to a specific action that will be reported to the Target, like clicking a button. If this button is clicked I call trackEvent function to report user action. But somehow there is no information about my activity in the Report panel of Target.

I tried to set my primary goal to Conversion -> Viewed an mbox/Clicked on mbox or Engagement -> Page Views but nothing has changed.

I don't create an empty div that represent the mbox. I call getOffers to get the json data from Target and after I retrieve the data I call applyOffers to manipulate the webpage.

I see that I can pass extra object called metrics that can report click actions when calling applyOffers. adobe.target.applyOffers() - at.js 2.x

I haven't tried it but what if I want to set my success metric to just viewing of mbox.

I change one of the properties of mbox.options before I call apply offer.

adobe.target.applyOffers({

  response: {

   prefetch: {

   mboxes: [mbox],
   },
  },
});

$('.myBtn').on('click', function(e) {

   var mbox = 'my-mbox-name';
   var el = $(e.target).closest('.banner-item').find('[at-action-key=' + mbox + ']');
   var param = el.length > 0 ? 'img2' : 'img1';

   adobe.target.trackEvent({

       'mbox': mbox,
       'params': {

           'param': param,
        },
    });

});

I use at.js 2.2.0.

What am I missing here? What should I do to fix this?

Thank you!