Tarteaucitron et Angular

[Nirzol]

Bonjour

Quelqu'un a t'il réussi à faire fonctionner avec un projet Angular ?

Merci

[nlhommet]

Bonjour,

Pour le faire marcher sur angular c'est un peut plus technique.

il faut par exemple créer un service pour le gérer, puis surcharger le service que l'on souhaite intégrer à son site.
Par exemple googlemaps:

import {Injectable} from "@angular/core";
import {Loader} from "@googlemaps/js-api-loader";
import {environment} from "../../../environments/environment";

@Injectable({
  providedIn: 'root',
})
export class RgpdService {

  public tarteaucitron: any = null;
  public googleMap: boolean = false;
  private loading: boolean = false;

  constructor() {
    if (typeof window !== 'undefined') {
      // @ts-ignore
      this.tarteaucitron = window.tarteaucitron;

      this.tarteaucitron.services.googlemaps = {
        "key": "googlemaps",
        "type": "api",
        "name": "Google Maps",
        "uri": "https://policies.google.com/privacy",
        "needConsent": true,
        "cookies": [],
        "js": () => {
          this.loadGoogleMap();
        },
        "fallback": () => {
        //le fallback sera utilisé autrement
        }
      };
      (this.tarteaucitron.job = this.tarteaucitron.job || []).push('googlemaps');
    }
  }

 //Charge le js en lazy load
  public loadGoogleMap() {
   // vérifie que la lib n'est pas déjà chargé ou si l'utilisateur à accepter de la charger
    if ((!this.googleMap && this.tarteaucitron?.launch?.googlemaps)) { 
      new Loader({
        apiKey: environment.googleKey,
        version: "weekly",
        libraries: ['places']
      }).load().then(() => {
        this.googleMap = true;
      });
    }
  }

  // fallback
  public autorizeGoogleMap() {
    const a = document.createElement('a');
    a.id = 'Eng1edgooglemaps'; // le pattern est Eng+nombre+ed+service_name
    this.tarteaucitron.userInterface.respond(a, true);
  }
}

Ensuite dans le component où on souhaite afficher une carte on ajoute cela :

 ngOnInit(): void {
    this.rgpdService.loadGoogleMap();
    ...
  }

et pour le template

<ng-template [ngIf]="rgpdService.googleMap" [ngIfElse]="fallbackRGPD">
    <google-map
    height="100%"
    width="100%"
    [center]="ma_var"
    >
        <map-marker
        [position]="ma_var"
        [options]="{draggable: false}"
        ></map-marker>
    </google-map>
</ng-template>
<ng-template #fallbackRGPD>
    <a href="javascript:void(0)" (click)="rgpdService.autorizeGoogleMap()">Autoriser google map</a>
</ng-template>

De façon général il faut surcharger la configuration "js" et "fallback" des services afin de les gérer dans angular.
Puis d'utiliser la méthode this.tarteaucitron.userInterface.respond(el, boolean); pour accepter ou non le service en question

[PratimaVK]

Bonjour,
J'ai essaie de l'implementer (avec le service youtube). Mais j'ai l'erreur 404 comme indiqué dans la maquette ci-joint.

Je vois que ça plante sur la ligne
// Step 2: load language and services tarteaucitron.addInternalScript(pathToLang, '', function () { dans tarteaucitron.js où le pathToLang est "http://localhost:9000/lang/tarteaucitron.fr.js?v=20220322"
Est-ce que vous avez une idée svp ? Merci !

[AmauriC]

Il faut installer sur localhost tous les fichiers: https://github.com/AmauriC/tarteaucitron.js/archive/refs/heads/master.zip

[mmoyalan]

Hello,
To apply tarteaucitron in an angular project I did the below steps, for example for youtube

1. npm i tarteaucitronjs

2. in the angular.json,
   under the "scripts" I added the paths from the node_module

"scripts": [
             "./node_modules/tarteaucitronjs/tarteaucitron.js",
             "./node_modules/tarteaucitronjs/tarteaucitron.services.js",
             "./node_modules/tarteaucitronjs/lang/tarteaucitron.fr.js"
           ]
         },

3. Then created a separate service tarteaucitron.service.ts file that had all the initialization configuration like below

import { Injectable } from '@angular/core';

declare const tarteaucitron: any;

@Injectable({
  providedIn: 'root',
})
export class TarteaucitronService {
  initTarteaucitron(): void {
    tarteaucitron.init({
      /* General */
      privacyUrl: '' /* Privacy policy url . Si vide, le lien Politique de confidencialité du bandeau ne s'affiche pas*/,
      hashtag:
      .
      . // set all the init parameters as necessary for your project specification. All available parameters are in the tarteaucitron documentation 
      .
  });
  (tarteaucitron.job = tarteaucitron.job || []).push('youtube');
  }
}

4. In the .html file where you want the video to be displayed, add the below code (this is defined in the implementation for tarteaucitron for each service)

<div class="youtube_player" videoID="yourvideoid" width="560" height="315" theme="light" rel="1" controls="1" showinfo="1" autoplay="0" mute="0" loop="0" loading="0">
  </div>

5. In the component.ts file where you want to add the youtube video,

import { Component, OnInit } from '@angular/core';
import { TarteaucitronService } from './services';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'my-app';

  constructor(private tarteaucitronService: TarteaucitronService) {
  }

  ngOnInit() {
    this.tarteaucitronService.initTarteaucitron();
  }
}

[julesdelarue]

Hello, this is my implementation with an injection token, making unit testing easier:

@Injectable({
  providedIn: 'root',
})
export class TarteaucitronService {
  tarteaucitron: any;

  constructor(
    private http: HttpClient,
    @Inject(Window) private window: Window & { tarteaucitron: any },
  ) {
    this.tarteaucitron = this.window.tarteaucitron;
  }

  initTarteaucitron(): void {
    this.tarteaucitron.load();
    this.tarteaucitron.init({...});
}

app.module.ts :

@NgModule({
  providers: [
    { provide: Window, useValue: window },
  ],
})
export class AppModule{
...}

main.compoment.ts :

@Component({
  selector: 'app-root',
  templateUrl: './main.component.html',
})
export class MainComponent implements OnInit {

  constructor(private tarteaucitronService: TarteaucitronService) {
  }

  ngOnInit() {
    this.tarteaucitronService.initTarteaucitron();
  }
}

[gassama4]

Hello, je suis entrain d'essayer de le mettre dans un projet angular , cependant avec la nouvelle version angular 18 , j'arrive pas à trouver le chemin

[gassama4]

je suis passé par le npm insatll tarteaucitronjs , j'ai bien la version "tarteaucitronjs": "^1.19.0", et j'ai inclus dans le script de mon angular.json : "./node_modules/tarteaucitronjs/tarteaucitron.js",
"./node_modules/tarteaucitronjs/tarteaucitron.services.js",
"./node_modules/tarteaucitronjs/lang/tarteaucitron.fr.js"

comme suggere ci haut , cependant ça bloque

[AmauriC]

L'erreur concerne tarteaucitron.en.js
Il faut que tous les fichiers soient dispo.

[gassama4]

j'ai bien inclu le dossier tarteaucitron dans mon assets

[AmauriC]

Je ne vais pas pouvoir aider plus, je n'utilise pas Angular mais je suis sûr que quelqu'un aura la solution ; )

[gassama4]

Merci pour la disponibilité