# Intégration Marketo
Ce guide explique comment intégrer [Marketo](https://login.marketo.com/) à Pushwoosh. Vous pourrez utiliser le canal de communication des notifications push web dans le cadre de vos campagnes marketing avec Marketo.
Par exemple, imaginez qu'un utilisateur a visité votre page de destination Marketo mais n'y a effectué aucune action. Vous pourriez atteindre cet utilisateur avec une notification push web en guise de rappel. Cette notification push web peut également être personnalisée avec les données Marketo enregistrées pour cet utilisateur afin d'obtenir un engagement maximal !
## 1. Création du Service Worker
Suivez ce [guide](/fr/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30) et effectuez les **étapes prérequises** ainsi que les étapes **1 à 2.2.**
Après avoir terminé les étapes ci-dessus, vous devriez avoir les fichiers _manifest.json_ et _pushwoosh-service-worker.js_ à portée de main.
Passez à **Marketo Design Studio**.
Marketo ne peut télécharger des fichiers que dans le dossier de ressources, le dossier appelé « Images and Files ».
Téléchargez _manifest.json_ et _pushwoosh-service-worker.js_ dans ce dossier.
## 2. Création de la page d'abonnement aux notifications push
Comme mentionné ci-dessus, Marketo ne peut télécharger des fichiers que dans le dossier de ressources, qui est différent de la portée des pages de destination.
Par exemple, si vous cliquez sur n'importe quel fichier téléchargé ci-dessus et vérifiez son URL, vous verrez quelque chose comme « [https://your-host-name.com/rs/765-IWA-819/images/pushwoosh-service-worker.js](https://your-host-name.com/rs/765-IWA-819/images/pushwoosh-service-worker.js) ».
Cependant, si vous cliquez sur la page de destination et vérifiez son URL, ce sera quelque chose comme : « [https://your-host-name.com/lp/765-IWA-819/pushwoosh-landing.html](https://your-host-name.com/lp/765-IWA-819/pushwoosh-landing.html) ».
Notez la partie **« lp »** dans les URL des pages de destination et **« rs »** dans les URL des scripts.
Cela signifie que nous devons enregistrer notre script _Service Worker_ dans une portée différente de celle des pages de destination.
Pour ce faire, nous allons télécharger une page d'abonnement aux notifications push spéciale dans le dossier de ressources de Marketo, puis l'ouvrir depuis la page de destination. Créons cette page d'abonnement.
Obtenez le fichier _push-subscription.html_ à partir du gist suivant :
[https://gist.github.com/shaders/2b518e3acaf9b4712d5260205243343d#file-push-subscription-html](https://gist.github.com/shaders/2b518e3acaf9b4712d5260205243343d#file-push-subscription-html)
Ouvrez le fichier et modifiez les lignes suivantes :
* Ligne 8 - modifiez le lien vers l'URL du fichier _manifest.json_ téléchargé à l'étape précédente.
* Ligne 24 - modifiez la valeur du paramètre _scope_ par l'URL de votre dossier de ressources (c'est le dossier où se trouve _manifest.json_).
* Ligne 20 - modifiez la valeur du paramètre _applicationCode_ par votre App Id Pushwoosh.
Notez que le script mappe également les notifications push centrées sur l'utilisateur de Pushwoosh avec l'identifiant de prospect de Marketo : _userId:leadId_ (ligne 26)
Téléchargez le fichier résultant dans le dossier « Images and Files ». Vous devriez maintenant avoir ces fichiers dans le dossier :
## 3. Création d'une page de destination avec abonnement aux notifications push
Obtenez le fichier _pushwoosh-template.html_ à partir du gist suivant :
[https://gist.github.com/shaders/2b518e3acaf9b4712d5260205243343d#file-pushwoosh-template-html](https://gist.github.com/shaders/2b518e3acaf9b4712d5260205243343d#file-pushwoosh-template-html)
Ouvrez le fichier et modifiez les lignes suivantes :
* Ligne 47 - modifiez la valeur du paramètre _scope_ par l'URL de votre dossier de ressources.
* Ligne 65 - modifiez le lien vers l'URL du fichier _push-subscription.html_ téléchargé à l'étape précédente.
* Ligne 43 - modifiez la valeur du paramètre _applicationCode_ par votre App Id Pushwoosh.
Ce script, comme le précédent, mappe également les notifications push centrées sur l'utilisateur de Pushwoosh avec l'identifiant de prospect de Marketo : _userId:leadId_ (ligne 49)
Maintenant, allez dans la section « **Templates** » de vos **pages de destination Marketo**, créez le modèle (appelé « pushwoosh-template » dans la capture d'écran ci-dessous) et copiez-collez-y le contenu du fichier résultant.
Créons maintenant une nouvelle page de destination basée sur ce modèle.
Dans notre exemple, pour montrer les capacités de l'intégration de Pushwoosh avec l'automatisation des campagnes Marketo, nous allons, par souci de simplicité, ajouter un simple lien à la page de destination. Nous allons créer une campagne qui déclenchera une notification push personnelle lorsque l'utilisateur cliquera sur ce lien.
Nous allons utiliser la même URL que la page de destination.
```txt
Envoyez-moi une offre !
```
## 4. Création d'un Webhook Pushwoosh
Allez dans la section **« Admin » de Marketo** et créez un nouveau Webhook avec les paramètres suivants :
* URL - [https://go.pushwoosh.com/json/1.3/createMessage](https://go.pushwoosh.com/json/1.3/createMessage)
* Type de requête : POST
Collez le code suivant comme modèle.
```
{
"request": {
"application": "ENTREZ_VOTRE_APP_ID_PUSHWOOSH",
"auth": "ENTREZ_VOTRE_JETON_API_PUSHWOOSH_ICI",
"notifications": [{
"send_date": "now",
"ignore_user_timezone": true,
"content": "Nous avons une nouvelle offre pour vous !",
"users" : ["{{lead.Id:default="ABCD-EFGH"}}"]
}]
}
}
```
Notez que nous utilisons l'ID de prospect Marketo pour référencer l'utilisateur dans Pushwoosh. Pour en savoir plus sur les notifications push centrées sur l'utilisateur, cliquez [ici](/fr/product/messaging-channels/push-notifications/send-push-notifications/push-by-user-id).
Dans notre exemple très simple, nous utilisons un message push statique. Cependant, vous pouvez utiliser toutes les fonctionnalités de [`createMessage`](/fr/developer/api-reference/messages-api/#createmessage)
Pour personnaliser la notification push, vous pouvez utiliser un **Preset** de Pushwoosh et passer les valeurs de Marketo dans les paramètres **« dynamic_content_placeholders »** de l'appel `/createMessage` pour la personnalisation du push.
## 5. Intégration avec une campagne d'automatisation Marketo
Allez dans la section « **Marketing Activities** » de Marketo et créez une campagne.
Pour notre exemple, nous déclencherons la campagne lorsque l'utilisateur cliquera sur un lien (celui que nous avons créé deux étapes plus haut) sur notre page de destination.
b. Sélectionnez le Webhook « send_push » dans la section « Flow »
* Maintenant, ouvrez l'URL de la page de destination
* Cliquez sur le bouton **« Oui, je veux »** pour ouvrir la boîte de dialogue d'abonnement aux notifications push
* Abonnez-vous aux notifications push
* Cliquez sur le lien **« Envoyez-moi une offre ! »**
Vous avez reçu votre notification push automatisée de Marketo !
## 2. Création de la page d'abonnement aux notifications push
Comme mentionné ci-dessus, Marketo ne peut télécharger des fichiers que dans le dossier de ressources, qui est différent de la portée des pages de destination.
Par exemple, si vous cliquez sur n'importe quel fichier téléchargé ci-dessus et vérifiez son URL, vous verrez quelque chose comme « [https://your-host-name.com/rs/765-IWA-819/images/pushwoosh-service-worker.js](https://your-host-name.com/rs/765-IWA-819/images/pushwoosh-service-worker.js) ».
Cependant, si vous cliquez sur la page de destination et vérifiez son URL, ce sera quelque chose comme : « [https://your-host-name.com/lp/765-IWA-819/pushwoosh-landing.html](https://your-host-name.com/lp/765-IWA-819/pushwoosh-landing.html) ».
Notez la partie **« lp »** dans les URL des pages de destination et **« rs »** dans les URL des scripts.
Cela signifie que nous devons enregistrer notre script _Service Worker_ dans une portée différente de celle des pages de destination.
Pour ce faire, nous allons télécharger une page d'abonnement aux notifications push spéciale dans le dossier de ressources de Marketo, puis l'ouvrir depuis la page de destination. Créons cette page d'abonnement.
Obtenez le fichier _push-subscription.html_ à partir du gist suivant :
[https://gist.github.com/shaders/2b518e3acaf9b4712d5260205243343d#file-push-subscription-html](https://gist.github.com/shaders/2b518e3acaf9b4712d5260205243343d#file-push-subscription-html)
Ouvrez le fichier et modifiez les lignes suivantes :
* Ligne 8 - modifiez le lien vers l'URL du fichier _manifest.json_ téléchargé à l'étape précédente.
* Ligne 24 - modifiez la valeur du paramètre _scope_ par l'URL de votre dossier de ressources (c'est le dossier où se trouve _manifest.json_).
* Ligne 20 - modifiez la valeur du paramètre _applicationCode_ par votre App Id Pushwoosh.
Notez que le script mappe également les notifications push centrées sur l'utilisateur de Pushwoosh avec l'identifiant de prospect de Marketo : _userId:leadId_ (ligne 26)
Téléchargez le fichier résultant dans le dossier « Images and Files ». Vous devriez maintenant avoir ces fichiers dans le dossier :
## 3. Création d'une page de destination avec abonnement aux notifications push
Obtenez le fichier _pushwoosh-template.html_ à partir du gist suivant :
[https://gist.github.com/shaders/2b518e3acaf9b4712d5260205243343d#file-pushwoosh-template-html](https://gist.github.com/shaders/2b518e3acaf9b4712d5260205243343d#file-pushwoosh-template-html)
Ouvrez le fichier et modifiez les lignes suivantes :
* Ligne 47 - modifiez la valeur du paramètre _scope_ par l'URL de votre dossier de ressources.
* Ligne 65 - modifiez le lien vers l'URL du fichier _push-subscription.html_ téléchargé à l'étape précédente.
* Ligne 43 - modifiez la valeur du paramètre _applicationCode_ par votre App Id Pushwoosh.
Ce script, comme le précédent, mappe également les notifications push centrées sur l'utilisateur de Pushwoosh avec l'identifiant de prospect de Marketo : _userId:leadId_ (ligne 49)
Maintenant, allez dans la section « **Templates** » de vos **pages de destination Marketo**, créez le modèle (appelé « pushwoosh-template » dans la capture d'écran ci-dessous) et copiez-collez-y le contenu du fichier résultant.
Créons maintenant une nouvelle page de destination basée sur ce modèle.
Dans notre exemple, pour montrer les capacités de l'intégration de Pushwoosh avec l'automatisation des campagnes Marketo, nous allons, par souci de simplicité, ajouter un simple lien à la page de destination. Nous allons créer une campagne qui déclenchera une notification push personnelle lorsque l'utilisateur cliquera sur ce lien.
Nous allons utiliser la même URL que la page de destination.
```txt
Envoyez-moi une offre !
```
## 4. Création d'un Webhook Pushwoosh
Allez dans la section **« Admin » de Marketo** et créez un nouveau Webhook avec les paramètres suivants :
* URL - [https://go.pushwoosh.com/json/1.3/createMessage](https://go.pushwoosh.com/json/1.3/createMessage)
* Type de requête : POST
Collez le code suivant comme modèle.
```
{
"request": {
"application": "ENTREZ_VOTRE_APP_ID_PUSHWOOSH",
"auth": "ENTREZ_VOTRE_JETON_API_PUSHWOOSH_ICI",
"notifications": [{
"send_date": "now",
"ignore_user_timezone": true,
"content": "Nous avons une nouvelle offre pour vous !",
"users" : ["{{lead.Id:default="ABCD-EFGH"}}"]
}]
}
}
```
Notez que nous utilisons l'ID de prospect Marketo pour référencer l'utilisateur dans Pushwoosh. Pour en savoir plus sur les notifications push centrées sur l'utilisateur, cliquez [ici](/fr/product/messaging-channels/push-notifications/send-push-notifications/push-by-user-id).
Dans notre exemple très simple, nous utilisons un message push statique. Cependant, vous pouvez utiliser toutes les fonctionnalités de [`createMessage`](/fr/developer/api-reference/messages-api/#createmessage)
Pour personnaliser la notification push, vous pouvez utiliser un **Preset** de Pushwoosh et passer les valeurs de Marketo dans les paramètres **« dynamic_content_placeholders »** de l'appel `/createMessage` pour la personnalisation du push.
## 5. Intégration avec une campagne d'automatisation Marketo
Allez dans la section « **Marketing Activities** » de Marketo et créez une campagne.
Pour notre exemple, nous déclencherons la campagne lorsque l'utilisateur cliquera sur un lien (celui que nous avons créé deux étapes plus haut) sur notre page de destination.
b. Sélectionnez le Webhook « send_push » dans la section « Flow »
* Maintenant, ouvrez l'URL de la page de destination
* Cliquez sur le bouton **« Oui, je veux »** pour ouvrir la boîte de dialogue d'abonnement aux notifications push
* Abonnez-vous aux notifications push
* Cliquez sur le lien **« Envoyez-moi une offre ! »**
Vous avez reçu votre notification push automatisée de Marketo !
