当前位置：文江博客话题详情

成功完成API调用后，我需要触发GTM标签

发布于 2025-01-24 19:53:04 字数 166 浏览 2 评论 0原文

我需要创建一个GTM（Google Tag Manager）标签，以便在完成API调用后触发，结果是成功（代码：200）。单击按钮，将调用API。我不想在Angular项目中编写任何代码（例如“将数据发送到数据层”解决方案）

我已经搜索了很多，但是我没有找到任何有用的解决方案。我真的很感谢任何答案。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏末 2025-01-31 19:53:04

您可以创建一个可以使用这样的代码的帮手服务。

在构造函数中注入 googletagmanagerservice 。

constructor( private gtmService: GoogleTagManagerService ) { }

现在创建一个功能，以手动触发事件。

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

在您的API响应之后，您可以像这样手动击中它。

示例：

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： - 在这里，我使用了一个常数文件来管理事件和数据的字符串。

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.

回复收藏 0 原文

风筝有风，海豚有海 2025-01-31 19:53:04

使用HTTP插头可能是您的解决方案？

- ＆gt; https：https://angular.io/api/api/common/common/htttp/httpptp/httpptpintperpector

- 更多解释 -

我想GTM已经添加到您的角度项目中了吗？

如果是，则可以添加拦截器。
互助器拦截每个API调用。
因此，您可以在每个API调用后都能传递所需的值，

让我们调用该文件gtm.interceptor.ts

import { finalize } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable()
export class MessagesCenterInterceptor implements HttpInterceptor {
    constructor() { }

    /**
     * If the user accept or decline a message, we set the message in the header/dashboard to true
     * @param request 
     * @param next 
     */
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(
            response => {
                // Here your GTM funktion. 
                // It's a little bit tricky and has be tested. I recommend to ask again another developer.
            }
        );
    }
}

enter code here

Using the HTTP intercepter might be your solution?

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

-- More explanation --

I guess GTM is already added to your angular project?

If yes you can add an Interceptor.
The Intercepter intercept every single api call.
So you could pass the value of that you want after every API call

Let us call that file gtm.interceptor.ts

import { finalize } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable()
export class MessagesCenterInterceptor implements HttpInterceptor {
    constructor() { }

    /**
     * If the user accept or decline a message, we set the message in the header/dashboard to true
     * @param request 
     * @param next 
     */
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(
            response => {
                // Here your GTM funktion. 
                // It's a little bit tricky and has be tested. I recommend to ask again another developer.
            }
        );
    }
}

enter code here

回复收藏 0 原文

~没有更多了~