Using setCustomVariable to retrieve values

I want to track events on my Angular portal. There are certain functions which are triggered on the calls of these events which I’m tracking. I want to use custom variables for this.
I have added this code in my component’s function.
{ var _paq = [];
sessionStorage.setItem(‘Offer_Name’, this.object.key)
var offerName = sessionStorage.getItem(‘Offer_Name’);
_paq.push([‘setCustomVariable’, 3, ‘OfferName’, offerName, ‘page’]);
_paq.push([‘trackPageView’]); }

When I go to Visitors-> Custom Variables, I don’t see any logs there.
What must be going wrong?

Custom variables are deprecated, except if you need several values at the same time for a variable.
Instead of custom variables, it is advised to use custom dimensions.
Then if you want to use custom variables, they have to be activated in Matomo: Custom Variables Analytics User Guide - Analytics Platform - Matomo

I have activated custom variables and it worked when I added the above code in index.html file. But it doesn’t work when I add the same code in the function of my component.
But I can’t keep the code in index.html because index.html is loaded in Angular only on page refresh. That’s why i used it in the component so that whenever the function is triggered, my event should be tracked.

So the problem seems to come between Angular and Matomo API…
I have no idea
How do you track (HTTP API, MTM, javaScript, Angular module)?