I need a gtm tag to be fired when a successful api call is done-CodePudding

I need to create a GTM (Google Tag manager) tag to be fired when an api call is done and the result is success (code: 200). The api is called on a button click. I don't want to write any code in my Angular project (like "sending data to the Data Layer" solution)

I have searched a lot, but I haven't found any useful solution. I would really appreciate any answer.

CodePudding user response：

Using the HTTP intercepter might be your solution?

-> https://angular.io/api/common/http/HttpInterceptor

CodePudding user response：

You can create one helper service in which you can have code like this.

Inject GoogleTagManagerService in the constructor.

constructor( private gtmService: GoogleTagManagerService ) { }

Now create one Function for firing the event manually.

customEvents(eventName: string, eventData: any) {
        const gtmTag = {
          event: eventName,
          data: eventData,
        };
        this.gtmService.pushTag(gtmTag);
      }

And after the response of your API, you can hit it manually like this.

Example :

const result= await this.httpService.post('path', data);
if (result){
this.helperService.customEvents(GTM_CUSTOM_EVENT.BUTTON_CLICK_EVENT, GTM_CUSTOM_EVENT.PAYMENT_SUCCESS_REGISTERED_USER);
}

PS: - Here I have used a constant file to manage strings for events and data.