Реферер теряется, когда пользователь нажимает на предварительно предоставленную ссылку до угловой нагрузки - PullRequest
Новая
       39

Реферер теряется, когда пользователь нажимает на предварительно предоставленную ссылку до угловой нагрузки

1 голос
/ 28 мая 2019

По соображениям производительности и производительности мы предоставляем предварительно отредактированную версию нашего сайта ( angular universal ).Поэтому, если пользователь попадает на наш сайт через Google, загруженная страница будет загружена - в этот момент реферером будет google.com.Если пользователь затем щелкнет ссылку ( routerLink ) на сайте до того, как angular будет полностью загружен, исходный реферер будет утерян / заменен (который будет отображаться как прямой трафик).Для отслеживания мы используем Диспетчер тегов Google .

Как ни странно, я не нашел никого, кто сталкивался с подобной проблемой (google / stackoverflow).

Для проверки решения проблемыЯ воссоздал его с помощью стартовой установки для angular universal от angular.io .Шаблон компонента приложения должен включать только ссылку (routerLink) на ленивый загруженный маршрут.И я добавил стандартный скрипт диспетчера тегов Google в index.html.

Чтобы проверить возможное решение в Chrome I:

  1. очистить кеш
  2. перейти наgoogle.com
  3. поместите href на мой локально работающий сервер в html через dev-tools
  4. отключите кеш
  5. установите замедление 3G
  6. начать отслеживание записи через расширение «Google Tag Assistant» -Chrome
  7. нажмите ссылку на localhost на манипулируемом сайте google.com
  8. дождитесь пока на предварительно отрендеренном сайте появится
  9. щелкните ссылку, которая маршрутизирует ленивый маршрутизируемый модуль, вскоре после того, как он станет видимым
  10. дождитесь полной загрузки сайта
  11. остановите запись в расширении Google Tag Assistant'-Chrome
  12. open показать полный отчет в расширении Google Tag Assistant'-Chrome

Добавление предварительной загрузки было моим первым шагом к решению, но, к сожалению, оно не дало результата.

Настройка реферера с помощью Google Analytics(ga('set', 'referrer', 'http://example.com');) не повлияло на отслеживание с помощью Google Tag Manager.

Поле реферера в документе доступно только для чтения, но даже если вы обходите его - это не отслеживается отслеживанием: 

        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 Assistant'-Chrome) с правильным начальным реферером, и все теги будут прикреплены к этой одной странице.

Любые советы / подсказки / советы приветствуются!

...