Динамически привязывать к тегу Google атрибут data-tracking-label = ""

Question

Я пытаюсь связать data-tracking-label = "plan.priceplan_name" .

Не уверен, как мне выполнить динамическое связывание priceplan_name с меткой отслеживания данных.

Уже опробовал несколько вариантов, в том числе: data-tracking-label = {{plan.priceplan_name}} - с ошибкой: Uncaught Error: Ошибки синтаксического анализа шаблона: невозможно связать с 'tracking-label' с тех порэто не известное свойство div.

Ниже приведен фрагмент моего кода.

    <div *ngFor="let plan of plans; let i = index" class="col-md-3 pt-2 pb-2 pl-2 pr-2">
      <div class="card">
        <div class="card-body row p-0" (click)="selectPlan(plan, i)" data-tracking-category="SEA - Choose-plan" data-tracking-action="Click" data-tracking-label={{plan.priceplan_name}}>
          <div class="first-sec col-6 pt-2 pb-2 rounded-left">
            <h3>{{plan.priceplan_name}}</h3>
            <div class="position-bottom">
              <h2 class="mb-0">R{{plan.base_priceplan_cost | number:'1.0-2'}}pm</h2>
              <h5>x{{plan.contract_duration}}</h5>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

Вот еще один способ добавить используемые теги.

Обратите внимание, что служба с поставщиком windowRef была добавлена ​​в app.module.ts и импортирована в каждый контроллер, использующий dataLayer..

(click)="myFunstion(param); dataLayer.push({event:'MyEvent', category:'MyCategory', action:'Click', label:plan.priceplan_name})

И в контроллере:

import { WindowRef } from '../WindowRef';

Объявить переменную перед конструктором:

dataLayer = this.winRef.nativeWindow.dataLayer;

И добавить переменную внутри конструктора:

 private winRef: WindowRef