# Notifications push web via Google Tag Manager

Mettez en œuvre les notifications push en quatre étapes sans aucun codage !
Le WebSDK Lite de Pushwoosh peut être ajouté à votre site web via Google Tag Manager, rendant le processus d'intégration aussi simple que possible.

<Aside type="note">
#### Fonctionnalité partielle

Notez que parmi tous les visiteurs de votre site web, seuls ceux qui utilisent Chrome ou Firefox pourront s'abonner et recevoir des notifications push. Le WebSDK Lite a également un accès limité aux fonctionnalités de Pushwoosh, telles que les Tags personnalisés, les UserIDs ou les messages déclenchés par des événements. Pour plus de détails, veuillez contacter notre [équipe de support](https://help.pushwoosh.com/hc/en-us/requests/new/) !
</Aside>

## Intégration

### Identifiants Firebase

Dans la [console Firebase](https://console.firebase.google.com/project/_/settings/cloudmessaging/), choisissez votre projet pour obtenir votre **Clé de serveur** (Server Key) et votre **ID d'expéditeur** (Sender ID) Firebase. Veuillez vous référer à la capture d'écran ci-dessous :

<img src="/web-push-notifications-web-push-via-google-tag-manager-1.webp" alt=""/>

### Panneau de contrôle Pushwoosh

Allez dans le [**Panneau de contrôle**](https://go.pushwoosh.com/v2/applications) de Pushwoosh et ajoutez une nouvelle application. Sur la page qui s'ouvre, configurez la plateforme Chrome ou Firefox en cliquant sur le bouton **Configurer** dans la ligne correspondante. Remplissez le formulaire :

*   La **Clé de serveur** (Server Key) de la console Firebase dans le champ **Clé API** (API key) ;
*   L'**ID d'expéditeur** (Sender ID) de la console Firebase dans le champ **ID d'expéditeur FCM** (FCM Sender ID) ;
*   L'adresse exacte de votre site web dans le champ **Nom du site web** (Website Name).

<img src="/web-push-notifications-web-push-via-google-tag-manager-2.webp" alt=""/>

Assurez-vous de copier le Code d'application de l'application nouvellement créée, vous en aurez besoin plus tard. Le code de l'application est surligné ci-dessous :

<img src="/web-push-notifications-web-push-via-google-tag-manager-3.webp" alt=""/>

### Google Tag Manager

**1.** Dans Google Tag Manager, choisissez un conteneur ou créez-en un nouveau.

<img src="/web-push-notifications-web-push-via-google-tag-manager-4.webp" alt=""/>

**2.** Créez une nouvelle balise (Tag) et choisissez **HTML personnalisé** (Custom HTML) dans la configuration de la balise.

<img src="/web-push-notifications-web-push-via-google-tag-manager-5.webp" alt=""/>

**3.** Copiez le script ci-dessous et collez-le dans le champ HTML ;

```txt
<script type="text/javascript" src="//cdn.pushwoosh.com/webpush-lite/v1/pushwoosh-web-notifications-lite.js?pw_application_code=#####-#####" async></script>
```

**4.** Remplacez les signes dièse `#####-#####` (surlignés sur l'image ci-dessous) dans le script par votre Code d'application Pushwoosh, que vous avez obtenu à l'étape 2.

<img src="/web-push-notifications-web-push-via-google-tag-manager-6.webp" alt=""/>

**5.** Faites défiler vers le bas jusqu'aux options de déclenchement (Triggering) et choisissez **Toutes les pages** (All Pages).

<img src="/web-push-notifications-web-push-via-google-tag-manager-7.webp" alt=""/>

**6.** Cliquez sur « Enregistrer ». Votre balise est prête !

### Bouton d'abonnement aux notifications push

Permettez aux utilisateurs de s'abonner aux notifications push avec un bouton d'abonnement. Pour configurer le bouton, ajoutez simplement le script suivant via Google Tag Manager.

```txt
<div style="text-align:center;margin:90px 0;">
  <button style="color:#000000;background: none;font-size: 16px;cursor: pointer;font-weight: 700;padding:0 60px;line-height: 60px;border:3px solid #000000;" type="button" name="button" onclick="window.pushwooshLite.instance.showSubscriptionWindow()">S'abonner maintenant</button>
</div>
```

C'est tout ! Les visiteurs de votre site web peuvent maintenant s'abonner et recevoir des messages push.