时间戳

首页 > 解决方案 > 带有 Angular 5 的 Google Adwords

angular - 带有 Angular 5 的 Google Adwords

问题描述

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

但是有3个问题：

  1. 我不能使用文档所说的内容，因为这是一个 SPA。
  2. 设置变量然后注入脚本会导致在注入脚本时值为空
  3. 或者，先注入脚本，然后使用 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);
 });
}

标签： angularsingle-page-applicationgoogle-ads-api

解决方案

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

步骤1

把它放在你的 index.html 中，用你自己的实际转换 ID 替换 XXXXXXXXXXX。

<!-- 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。

推荐阅读