Intégration Marketo

Ce guide explique comment intégrer Marketo avec 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 pourrez alors 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 de maximiser l’engagement !

HTTPS (« Pages de destination sécurisées ») doit être activé sur votre instance Marketo.

Bien qu’il soit possible d’exécuter des notifications push web avec des sites web non sécurisés en HTTP, nous vous conseillons vivement d’utiliser des pages web sécurisées en HTTPS. À partir d’octobre 2017, avec la sortie de Chrome 62, Google Chrome marque toutes les pages web non sécurisées contenant des formulaires avec l’avertissement « Non sécurisé ».

Pour en savoir plus, cliquez ici : https://nation.marketo.com/docs/DOC-3891-faq-ssl-landing-pages-and-tracking-links https://nation.marketo.com/docs/DOC-4742-ssl-certificates-and-marketo-faq

Si vous souhaitez tout de même utiliser un site web non sécurisé en HTTP, suivez le guide Notifications push web Chrome/Firefox pour les sites web HTTP.

Vous pouvez obtenir un certificat SSL GRATUIT ici : https://letsencrypt.org/

1. Création du Service Worker

Suivez ce guide 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, appelé « Images and Files ». Téléchargez manifest.json et pushwoosh-service-worker.js dans ce dossier.

Téléchargement des fichiers manifest.json et service worker sur 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 du périmètre 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 ». 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 ». 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 un périmètre différent de celui des pages de destination.

Pour ce faire, nous allons télécharger une page spéciale d’abonnement aux notifications push 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

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 ID d’application 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 :

Fichiers téléchargés dans le dossier Images and Files de Marketo

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

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 ID d’application 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éation du modèle pushwoosh-template dans la section Modèles de Marketo

Créons maintenant une nouvelle page de destination basée sur ce modèle.

Création d'une nouvelle page de destination basée sur le modèle pushwoosh

Dans notre exemple, pour montrer les capacités de l’intégration de Pushwoosh avec l’automatisation des campagnes Marketo, nous ajouterons par souci de simplicité 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.

<a href="https://na-ab24.marketo.com/lp/765-IWA-819/pushwoosh-landing.html">Envoyez-moi une offre !</a>

Page de destination avec un lien pour l'offre de notification push

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
Type de requête : POST

Collez le code suivant comme modèle.

{
        "request": {
            "application": "ENTREZ_VOTRE_ID_D_APPLICATION_PUSHWOOSH",
            "auth": "ENTREZ_VOTRE_JETON_D_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.

Configuration du Webhook dans la section Admin de Marketo

Dans notre exemple très simple, nous utilisons un message push statique. Cependant, vous pouvez utiliser toutes les fonctionnalités de 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.

Configuration du déclencheur pour l'événement de clic utilisateur dans la campagne Marketo

b. Sélectionnez le Webhook « send_push » dans la section « Flow »

Sélection du Webhook send_push dans la section Flux de la campagne

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 !

Notification push automatisée de Marketo envoyée avec succès