Écrire le code de visualisation
La bibliothèque d'aide Looker Studio vous permet d'interagir avec Looker dans Google Marketing Platform Studio. Pour utiliser la bibliothèque, fournissez une fonction de rappel qui affiche le la visualisation.
La fonction la plus importante de la bibliothèque est subscribeToData, qui nécessite deux
des arguments: une fonction callback qui effectue le rendu de la visualisation et un
Un objet options spécifiant le type de transformation que vous souhaitez appliquer à vos données
prendre. Pour en savoir plus, consultez la documentation de référence sur la bibliothèque.
Vous trouverez ci-dessous un aperçu de ce que votre code JavaScript de visualisation pourrait de votre application.
function drawViz(vizData){
var height = dscc.getHeight();
var width = dscc.getWidth();
console.log(vizData);
// this is where you write your viz code
}
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})
Lorsque vous créez une communauté, vous devez tenir compte de certains éléments clés. la visualisation.
Les mises à jour de la fonction subscribeToData se produisent lorsque les données, le style ou
La taille de l'iFrame change.
Exemple :
// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);
function drawViz(data){
// clear the canvas
var ctx = canvasElement.getContext('2d');
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
// viz code goes here
}
Looker Studio charge et exécute des fichiers JavaScript, et non HTML. Toute manipulation DOM doit s'effectuer via JavaScript.
Par exemple, le code suivant définit et ajoute un div au DOM.
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
Regroupement du code
Les visualisations de la communauté Looker Studio ne vous permettent de charger qu'un seul fichier JavaScript . Le code importé doit être un fichier unique incluant le fichier dscc. la bibliothèque d'aide, les bibliothèques de visualisation JavaScript, ainsi que votre visualisation du code source.
Pour le faire en bash, vous pouvez utiliser la commande cat, comme ci-dessous.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
Définir le fichier manifeste
Le fichier manifeste de la visualisation fournit des métadonnées sur la visualisation, ainsi que des informations sur l'emplacement des ressources de visualisation. L'emplacement du fichier manifeste est appelé "ID du composant" et sert à charger la visualisation de la communauté.
Consultez la référence du fichier manifeste pour voir un exemple de fichier manifeste.
Le paramètre devMode du fichier manifeste détermine le comportement de mise en cache du
la visualisation. Lors du développement de la visualisation, devMode doit être true pour
que les actualisations forcées chargent la dernière version des ressources. Une fois que
est stable, devMode doit être défini sur false pour garantir que les rapports avec
les visualisations de la communauté
se chargent rapidement. Pour en savoir plus sur la mise en cache, consultez la
guide avancé de mise en cache.
Étapes suivantes
Maintenant que vous avez écrit le code de votre visualisation, apprenez à héberger votre visualisation.