我试图将Klaro集成到Angular 16中,但不知何故,它没有显示cookie弹出窗口,这是我的代码:

Klaro-git-hub-repo

klaro-config.js:

export const klaroConfig = {
  elementID: 'klaro',
  storageMethod: 'cookie',
  cookieName: 'klaro-cookie',
  cookieExpiresAfterDays: 365,
  privacyPolicy: '/privacy-policy.html',
  default: false,
  mustConsent: true,
  acceptAll: true,
  translations: {
    en: {
      consentModal: {
        title: 'Privacy Preferences',
        description:
          'At website name, we are committed to safeguarding your privacy while providing you with the best possible user experience. ' +
          'The information we collect through our website is governed by strict data collection practices, ensuring that your personal information remains secure.',
        privacyPolicy: {
          name: 'Privacy Policy',
          text: 'Read the privacy policy here'
        }
      },
      consentNotice: {
        description:
          'At Carilion Clinic, we are committed to safeguarding your privacy while providing you with the best possible user experience. ' +
          'The information we collect through our website is governed by strict data collection practices, ensuring that your personal information remains secure.',
      }
    }
  },
  app: [
    {
      // In GTM, you should define a custom event trigger named `klaro-google-analytics-accepted` which should trigger the Google Analytics integration.
      name: 'google-analytics',
      purposes: [ 'analytics' ],
      cookies: [
        /^_ga(_.*)?/,
        /^__utm[a-z]$/, // we delete the Google Analytics cookies if the user declines its use
      ],
    },
    {
      // In GTM, you should define a custom event trigger named `klaro-google-ads-accepted` which should trigger the Google Ads integration.
      name: 'google-ads',
      purposes: [ 'marketing' ],
      cookies: [
        /^_gcl(_.*)?/, // we delete the Google Ads cookies if the user declines its use
      ],
    },
    {
      // In GTM, you should define a custom event trigger named `klaro-facebook-pixel-accepted` which should trigger the Facebook Pixel integration.
      name: 'facebook-pixel',
      purposes: [ 'marketing' ],
      cookies: [
        'fr',
        'usida',
        'ps_n',
        '_fbp', // we delete the Facebook Pixel cookies if the user declines its use
      ],
    },
    {
      // In GTM, you should define a custom event trigger named `klaro-linkedin-insights-accepted` which should trigger the LinkedIn Insights integration.
      name: 'linkedin-insights',
      purposes: [ 'marketing' ],
      cookies: [
        /^_gcl(_.*)?/, // we delete the LinkedIn Insights cookies if the user declines its use
      ],
    },
    {
      // In GTM, you should define a custom event trigger named `klaro-linkedin-insights-accepted` which should trigger the LinkedIn Insights integration.
      name: 'microsoft-clarity',
      purposes: [ 'analytics' ],
      cookies: [
        /^[A-Z]*ID$/,
        /^_cl[c,s]k$/, // we delete the LinkedIn Insights cookies if the user declines its use
      ],
    },
  ]
};

app.component.ts:

import { klaroConfig } from '../klaro/klaro-config';
declare const Klaro: any;
ngOnInit() {
    const klaro = new Klaro(klaroConfig);
    klaro.init();
}

angular.json:

"styles": [ "src/klaro/klaro.css"],
"scripts": [ "src/klaro/klaro.js" ]

package.json:

"klaro": "^0.7.21",

我可以看到<div id="klaro"></div>已在多姆中创建,但不知何故弹出窗口没有显示

推荐答案

问题似乎出在配置上,我跟着webpack example,效果很好!

config

export const klaroConfig = {
  translations: {
    en: {
      googleAnalytics: {
        title: 'Google Analytics',
        description:
          'The analytics service ran by a most definitely non-evil company.',
      },
      purposes: {
        analytics: 'Analytics',
        styling: 'Styling',
      },
    },
  },
  apps: [
    {
      name: 'googleAnalytics',
      purposes: ['analytics'],
    },
    {
      name: 'bootstrap',
      title: 'Bootstrap (external resource)',
      description: 'Example for embedding external stylesheets.',
      purposes: ['styling'],
    },
  ],
};

ts

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { klaroConfig } from './klaro-config';
// we can either import Klaro without styles...
import * as Klaro from 'klaro';
// and the manually load the styles (e.g. to bundle them manually)

// we set up Klaro with the config
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
    <br/>
    <a class="button is-success" (click)="show()"
      >Change consent settings</a
    >
  `,
})
export class App {
  name = 'Angular';
  klaro!: any;

  constructor() {
    (<any>window).klaro = Klaro;
    (<any>window).klaroConfig = klaroConfig;
    Klaro.setup(klaroConfig);
  }

  show() {
    Klaro.show();
  }
}

bootstrapApplication(App);

Stackblitz Demo

Javascript相关问答推荐

为什么使用MAX_SAFE_INTEGER生成随机整数时数字分布不准确?

使用JavaScript单击上一个或下一个特定按钮创建卡滑动器以滑动单个卡

如何将连续的十六进制字符串拆分为以空间分隔的十六进制块,每个十六进制块包含32个二元组?

格式值未保存在redux持久切片中

D3 Scale在v6中工作,但在v7中不工作

当运行d3示例代码时,没有显示任何内容

将旋转的矩形zoom 到覆盖它所需的最小尺寸&S容器

Regex结果包含额外的match/group,只带一个返回

您能在卸载程序(QtInsteller框架)上添加WizardPage吗?

如何使用JavaScript拆分带空格的单词

在Java中寻找三次Bezier曲线上的点及其Angular

使用auth.js保护API路由的Next.JS,FETCH()不起作用

<;img>;标记无法呈现图像

无法读取未定义的属性(正在读取合并)-react RTK

Docent.cloneNode(TRUE)不克隆用户输入

如何为仅有数据可用的点显示X轴标签?

是否可以在不更改组件标识的情况下换出Reaction组件定义(以维护状态/引用等)?如果是这样的话,是如何做到的呢?

使用CEPRESS截取时,cy.Wait()在等待5000ms的第一个路由请求时超时

调用特定数组索引时,为什么类型脚本不判断未定义

计算对象数组中属性的滚动增量