Comment intégrer DataStudio dans vos pages Web

Vous serez content(e) d’apprendre que vous pouvez intégrer DataStudio dans vos pages Web.

Si comme moi vous utilisez à haute doses Google Data Studio, l’outil de création de tableaux de bord de Google, vous avez sans doute été frustré(e) de ne pas pouvoir intégrer vos créations dans des sites Web tels que des intranets.

C’est maintenant chose possible en insérant un code simple dans vos pages Web. Pour ce faire, vous avez deux options:

Intégrer DataStudio: utiliser le dialogue d’insertion

Ouvrez votre tableau de bord Google Data Studio et modifiez-le. Puis dans le menu Fichier en haut à gauche de l’écran, cliquez sur « Intégrer le rapport », comme dans la capture d’écran ci-dessous.

Dans l’étape suivante, pour intégrer DataStudio dans vos pages Web, vous devrez autoriser l’intégration de ce rapport en particulier:

Cochez bien la case Activer l’intégration et copiez-collez le code dans la boite de texte en-dessous de la boîte à cocher.

Ce code vous permet d’insérer un élément IFRAME dans vos pages. Les deux paramètres en dessous de la boite de texte permettent de définir les dimensions de l’encart DataStudio mais peuvent aussi être changées dans le code lui-même. Insérez le code dans votre page Web à l’endroit où vous désirer intégrer le rapport DataStudio et publiez votre HTML. Le résultat devrait ressembler à cette page, dont vous pouvez examiner le code source.

Intégrer DataStudio de manière « industrialisée »

Si vous avez un outil comme WordPress qui vous permet d’insérer dans vos pages des modules HTML, créez-vous un module « DataStudio » qui ressemblerait à

[code lang= »html »]<iframe width="600" height="338" src="https://datastudio.google.com/embed/reporting<strong>/0By_yKR1xrefEWjU4Wk9heFp0bEk/page/mmuH</strong>" frameborder="0" style="border:0" allowfullscreen></iframe>[/code]

Vous remarquerez que l’URL de l’iFrame contient un préfixe:

https://datastudio.google.com/embed/reporting/

Le reste de l’URL peut être récupérée en regardant votre rapport DataStudio. Par exemple, j’ai un tableau de bord à l’adresse suivante:

https://datastudio.google.com/org/fSnixkB6R6aDZE17recBDg/reporting/0By_yKR1xrefEWjU4Wk9heFp0bEk/page/mmuH

Regardez les éléments en gras ci-dessus: ignorez le premier élément et copiez tout ce qui suit « /reporting » et collez-le après le préfixe de l’iFrame. Vous remarquerez que la dernière section porte sur la page à afficher en premier dans l’iFrame.

Votre URL finale à utiliser dans votre code est donc:

https://datastudio.google.com/embed/reporting/0By_yKR1xrefEWjU4Wk9heFp0bEk/page/mmuH

Dans tous les cas de figure, et en attendant qu’on puisse autoriser l’autorisation de tableaux de bord en masse, vous devrez autoriser passer par le dialogue Fichier > Intégrer le rapport.

C’est à vous!

Maintenant que vous pouvez intégrer DataStudio dans vos pages Web, faites vous plaisir et partagez vos tableaux de bord depuis votre site, votre blog, votre intranet – où vous voulez!

Et vous, comment allez-vous partager vos tableaux de bord?