Question

出于搜索引擎优化和性能方面的原因，我们正在提供网站的预渲染版本（angular universal）。因此，如果用户通过google到达我们的网站，则将加载预渲染的页面-那时引荐来源为google.com。如果用户然后在完全加载Angle之前单击网站上的链接（routerLink），则原始引荐来源网址将丢失/替换（将显示为直接点击量）。为了进行跟踪，我们使用Google Tag Manager。

奇怪的是，我还没有找到遇到类似问题的人（google / stackoverflow）。

为了测试问题的解决方案，我使用starter setup for angular universal from angular.io重新创建了该问题。应用程序组件的模板仅需要包含指向延迟加载的路由的链接（routerLink）。而且我在index.html上添加了标准的Google标记管理器脚本。

要在chrome I中测试可能的解决方案：

清除缓存
转到google.com
通过dev-tools在HTML中将“ a href”放置到本地运行的服务器中
禁用缓存
设置限制以减慢3G速度
通过“ Google Tag Assistent” -Chrome扩展程序开始记录跟踪
在操纵的google.com-site上单击指向localhost的链接
等待预渲染的网站显示
在可见后单击链接到懒惰路由模块的链接
等待网站完全加载
停止在“ Google Tag Assistent” -Chrome扩展程序中记录
在“ Google Tag Assistent” -Chrome扩展程序中打开显示完整报告

添加preboot是我最初的解决方案，但遗憾的是没有效果。

通过谷歌分析（ga('set', 'referrer', 'http://example.com');）设置引荐来源网址不会影响使用Google跟踪代码管理器进行跟踪。

文档中的引荐来源网址字段是只读的，但是即使您解决该问题，也无法通过跟踪来获取：

        Object.defineProperty(document, 'referrer', {
          get: function() {
            'http://example.com';
          },
        });

我尝试将引荐来源网址与将事件推送到gtm一起提交-例如：

      window[layerName].push({
        'gtm.start': new Date().getTime(),
        event: 'gtm.js',
        referrer: 'http://example.com',
      });

或者这个：

      window[layerName].push({
        'gtm.start': new Date().getTime(),
        event: 'gtm.js',
        f: 'http://example.com',
      });

要复制的相关代码（替换为GTM-Tag / Id）：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Ng Universal Demo - GTM</title>
    <base href="/" />

    <!-- Google Tag Manager -->
    <script type="text/javascript">
      (function(w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({
          'gtm.start': new Date().getTime(),
          event: 'gtm.js',
        });
        var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s),
          dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
      })(window, document, 'script', 'dataLayerNew', 'GTM-123456');
    </script>
    <!-- End Google Tag Manager -->

    <script type="text/javascript">
      try {
        console.log('index.html -> document.referrer', document['referrer']);
      } catch (error) {
        console.warn('Could not get referrer from document', { error });
      }

      window.document.addEventListener('PrebootComplete', () => {
        console.log('PrebootComplete');
      });
    </script>

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript>
      <iframe
        src="https://www.googletagmanager.com/ns.html?id=GTM-W476HVK"
        height="0"
        width="0"
        style="display:none;visibility:hidden"
      ></iframe>
    </noscript>
    <!-- End Google Tag Manager (noscript) -->

    <app-root></app-root>
  </body>
</html>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { TransferHttpCacheModule } from '@nguniversal/common';

import { PrebootModule } from 'preboot';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [
    BrowserModule.withServerTransition({ appId: 'my-app' }),
    PrebootModule.withConfig({ appRoot: 'app-root' }),
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' },
      { path: 'lazy/nested', loadChildren: './lazy/lazy.module#LazyModule' },
    ]),
    TransferHttpCacheModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

使用预渲染和服务器端渲染进行测试的解决方案尝试。

如果它能按预期工作，则只会跟踪具有正确初始引荐来源网址的一页（“ Google Tag Assistent” -Chrome扩展程序），所有标签都将附加到该页面上。

任何提示/线索/提示都非常感谢！

当用户在角度负载之前单击预渲染的链接时，引荐来源网址会丢失

0 个答案: