带有 Angular 5 的 Google Adwords

Posted 2023-03-08

【中文标题】带有 Angular 5 的 Google Adwords

【英文标题】：Google Adwords with Angular 5

【发布时间】：2018-05-15 18:09:17

【问题描述】：

我正在尝试在使用 Angular 5 构建的结帐 SPA 中使用 AdWords。我需要设置诸如“google_conversion_value”之类的变量，然后运行位于 //www.googleadservices.com/pagead/conversion.js 的脚本

但是有3个问题：

我无法使用文档中所说的内容，因为这是一个 SPA。 设置变量然后注入脚本会导致在注入脚本时值为空 或者，先注入脚本，然后使用 Promise 设置值，就是在设置之前触发它。

2：

let googleAdWords = this.marketingService.googleAdWords();
if (googleAdWords != undefined) 
 window.google_conversion_language = googleAdWords.google_conversion_language;
 window.google_conversion_format = googleAdWords.google_conversion_format;
 window.google_conversion_label = googleAdWords.google_conversion_label;
 window.google_conversion_value = googleAdWords.google_conversion_value;
 window.google_conversion_currency = googleAdWords.google_conversion_currency;

this.marketingService.loadScript('//www.googleadservices.com/pagead   /conversion.js')

3：

this.marketingService.loadScript('//www.googleadservices.com/pagead/conversion.js').then(() => 
 this.zone.run(() => 
  let googleAdWords = this.marketingService.googleAdWords();
  if (googleAdWords != undefined) 
   window.google_conversion_language = googleAdWords.google_conversion_language;
   window.google_conversion_format = googleAdWords.google_conversion_format;
   window.google_conversion_label = googleAdWords.google_conversion_label;
   window.google_conversion_value = googleAdWords.google_conversion_value;
   window.google_conversion_currency = googleAdWords.google_conversion_currency;
  
 );
);

--加载服务中的脚本--

loadScript(scriptUrl: string) 
 return new Promise((resolve, reject) => 
  const scriptElement = document.createElement('script');
  scriptElement.src = scriptUrl;
  scriptElement.onload = resolve;
  document.body.appendChild(scriptElement);
 );

【参考方案1】：

我确定你已经解决了这个问题，但如果有人需要它，这对我有用。

第 1 步

将其放入您的 index.html 中，将 XXXXXXXXXXX 替换为您自己的实际转化 ID。

<!-- Global site tag (gtag.js) - Google Ads: XXXXXXXXXXX -->
script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXXXX"> 
</script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag()  dataLayer.push(arguments); 
    gtag('js', new Date());
    gtag('config', 'AW-XXXXXXXXXXX');
</script>

第 2 步

然后在结帐流程中，您要在其中注册交易：

const gtag = window['gtag'];
gtag('event', 'conversion', 
  'send_to': 'AW-XXXXXXXXXX/CONVERSION_CODE',
  'value': GRAND_TOTAL,
  'currency': CURRENCY,
  'transaction_id': TRANSACTION_ID
);

记得用适当的值填写AW-XXXXXXXXXX/CONVERSION_CODE、GRAND_TOTAL、CURRENCY和TRANSACTION_ID。上面的代码是typescript。

【讨论】：

问题是关于使用conversion.js，而不是使用gtag。在某些情况下（比如我的），使用谷歌标签管理器不是一种选择。