Creați un tablou de bord personalizat Hubspot cu Google Spreadsheet și Data Studio

Rezultatul final al unui tablou de bord automat cu Hubspot, Google Spreadsheet și Google Datastudio

Introducere

Acest articol este destinat managerilor care doresc să automatizeze lucrurile într-un mod MVP, fără a fi nevoie de echipa lor tehnică. În acest caz, vom crea de la zero un tablou de bord personalizat automat Hubspot, folosind Google Spreadsheet și Google Data Studio.

Sunt Alex, unul dintre fondatorii grupului Make it. Construim startup-uri în IoT. Consultați-ne aici: makeit-group.com

Angajamentul meu:

  • Este gratis
  • Este simplu
  • Se face treaba

Cunoașterea Javascript-ului nu este necesară dacă doar copiați și inserați codul meu, dar poate fi un plus pentru a vă personaliza tabloul de bord în continuare.

Dacă sunteți doar în căutarea unui exemplu simplu despre cum să luați contactele dvs. din Hubspot și să le scrieți într-un tabel Google, vă recomand să citiți acest alt articol pe care l-am scris: Cum să vă recuperați contactele din Hubspot în Google Spreadsheet folosind aplicația Script

Dacă nu utilizați Hubspot, ci doriți doar să creați un tablou de bord personalizat, este posibil să doriți să verificați articolul meu anterior: Cum să creați un tablou de bord personalizat pentru KPI-urile de pornire cu Google Spreadsheet și un Raspberry Pi?

Context

Compania noastră investește foarte mulți bani în punerea mărcii, produselor sau serviciilor noastre acolo. Dar ce generează cele mai calificate oportunități? În ce moment se transformă sau pleacă conducerea noastră? La sfârșitul zilei, vrem să investim în canalele care funcționează cel mai bine, dar avem nevoie de aceste date pentru a lua decizii inteligente.

În trecut, nu am folosit nicio măsurătoare, iar deciziile s-au bazat pe intuiția noastră, ceea ce este bine într-o anumită măsură. Cu toate acestea, am putea fi surprinși de ceea ce numerele ne pot spune despre afacerile noastre și, adesea, intuițiile noastre ne oferă semnale false.

Să săpăm

Pentru a ne îndeplini misiunea, va trebui să facem următoarele:

  1. Creați un cont de dezvoltare pe Hubspot
  2. Utilizați o foaie de calcul Google pentru a autentifica Hubspot folosind API-urile sale
  3. Recuperați ofertele din Hubspot folosind API-urile sale
  4. Utilizați Google Spreadsheet pentru a pregăti datele în funcție de nevoile noastre
  5. Conectați foaia de calcul Google cu Google Data Studio și creați un raport

Sa mergem.

Creați un cont de dezvoltare pe Hubspot

Acest lucru este destul de simplu prin crearea unui cont de dezvoltator pe Hubspot.

După ce contul nostru este gata, va trebui să creăm o aplicație pentru a prelua ID-ul Clientului și secretul Clientului. Acestea vor fi folosite pentru a conecta tabelul Google Spreadsheet și contul nostru CRM Hubspot.

Asigurați-vă că indicați scopurile potrivite în setările aplicației Hubspot, așa cum se arată mai jos:

Indicați scopurile corecte din aplicația dvs. Hubspot

Utilizați o foaie de calcul Google pentru a autentifica Hubspot folosind API-urile sale

Am folosit acest tutorial dacă aveți nevoie de mai multe informații, dar vom parcurge fiecare pas.

În primul rând, trebuie să creăm un nou tabel Google în Google Drive. După deschiderea foii de calcul, să mergem la Instrumente> Editor script, care va deschide o nouă filă în browser.

Va trebui să adăugăm o bibliotecă pentru a se autentifica folosind OAuth2:

  1. Faceți clic pe elementul de meniu Resurse> Biblioteci ...
  2. În caseta de text Găsiți o bibliotecă, introduceți ID-ul scriptului 1B7FSrk5Zi6L1rSxxTDgDEUsPzlukDsi4KGuTMorsTQHhGBzBkMun4iDF și faceți clic pe butonul Selectare. Acesta este cel mai simplu mod de a adăuga biblioteca la proiectul nostru, dar consultați acest articol dacă doriți să adăugați codul manual în proiect.
  3. Alegeți o versiune în caseta derulantă (de obicei cel mai bine să alegeți cea mai recentă versiune).
  4. Faceți clic pe butonul Salvare.

Acum, să scriem codul pas cu pas. Dacă sunteți un tehnician cu anumite expertize în JS, poate doriți să citiți codul complet aici. Pentru celelalte, trebuie doar să urmați pașii.

Mai întâi va trebui să definim câteva variabile pentru partea de autentificare:

var CLIENT_ID = '...'; // Introduceți codul de client
var CLIENT_SECRET = '...'; // Introduceți secretul Clientului
var SCOPE = 'contacte';
var AUTH_URL = 'https://app.hubspot.com/oauth/authorize';
var TOKEN_URL = 'https://api.hubapi.com/oauth/v1/token';
var API_URL = 'https://api.hubapi.com';

Să adăugăm următoarele funcții care vor gestiona partea de autentificare:

funcția getService () {
   returnați OAuth2.createService ('hubspot')
      .setTokenUrl (TOKEN_URL)
      .setAuthorizationBaseUrl (AUTH_URL)
      .setClientId (CLIENT_ID)
      .setClientSecret (CLIENT_SECRET)
      .setCallbackFunction ( 'authCallback')
      .setPropertyStore (PropertiesService.getUserProperties ())
      .setScope (SCOPE);
}
function authCallback (cerere) {
   var service = getService ();
   var autorizat = service.handleCallback (cerere);
   if (autorizat) {
      returnare HtmlService.createHtmlOutput ('Succes!');
   } altfel {
      returnare HtmlService.createHtmlOutput („Negat”);
   }
}

Acum avem nevoie de funcția pentru a rula autentificarea:

function authenticate () {
   var service = getService ();
   if (service.hasAccess ()) {
      // ... orice trebuie făcut aici ...
   } altfel {
      var permissionUrl = service.getAuthorizationUrl ();
      Logger.log ('Deschideți următoarea adresă URL și rulați scriptul:% s', permissionUrl);
   }
}

Să testăm partea de autentificare. Dacă ați completat secretul client și secretul clientului și rulați funcția de autentificare, va trebui să:

  1. Obțineți adresa URL de autorizare care va fi afișată în jurnalele (vizualizare> jurnalele).
  2. Deschideți adresa URL în browserul dvs., vor apărea conturile dvs. Hubspot.
  3. Selectați contul Hubspot la care doriți să vă conectați la tabelul de calcul

Bine făcut, ești înăuntru!

Recuperați ofertele din Hubspot folosind API-urile sale

Să-l păstrăm simplu, să facem doar minimul minim pentru a prelua aceste date pentru a popula tabela noastră de calcul. Vom folosi apoi instrumentele Google Spreadsheet pentru a pregăti datele în funcție de nevoile noastre.

(Dacă sunteți dezvoltator, veți fi tentat să înnebuniți și să lucrați la datele din javascript, aș sugera să nu reinventați roata și să utilizați funcțiile încorporate din Google Spreadsheet.)

Începem prin a face etapele conductei. Puteți copia și insera următoarea funcție în editorul dvs. Script sub codul existent:

funcție getStages () {
  // Pregătiți autentificarea pentru Hubspot
  var service = getService ();
  var headers = {headers: {'Autorizare': 'Portător' + service.getAccessToken ()}};
  
  // Cerere API
  var pipeline_id = "implicit"; // Introduceți aici id-ul conductei.
  var url = API_URL + "/ crm-pipelines / v1 / pipelines / deals";
  răspuns var = UrlFetchApp.fetch (url, anteturi);
  var rezultat = JSON.parse (response.getContentText ());
  etape var = Array ();
  
  // Buclați prin diferitele conducte pe care le puteți avea în Hubspot
  result.results.forEach (funcție (element) {
    if (item.pipelineId == pipeline_id) {
      var rezultat_stages = item.stages;
      // Să sortăm etapele după displayOrder
      result_stages.sort (funcția (a, b) {
        return a.displayOrder-b.displayOrder;
      });
  
      // Să punem toate etapele utilizate (id & etichetă) într-un tablou
      result_stages.forEach (funcție (etapă) {
        stages.push ([stage.stageId, stage.label]);
      });
    }
  });
  
  etape de întoarcere;
}

Această bucată de cod va:

  1. Conectați-vă la Hubspot.
  2. Obțineți configurația completă a conductei *, inclusiv etapele acesteia.
  3. Acesta va sorta etapele în consecință.
  4. Puneți rezultatele într-un tablou pe care îl putem folosi ulterior.

* Hubspot CRM vă permite să configurați mai multe conducte. Ar trebui să schimbați valoarea implicită prin orice alt ID de conductă pe care l-ați putea configura. Verificați această pagină dacă doriți mai multe informații despre API-ul conductelor CRM de la Hubspot.

Acum, de asemenea, putem recupera toate ofertele care circulă prin conducta noastră. Acest cod va avea grijă de faptul că:

NB: Am adăugat un câmp „sursă” personalizat la ofertele noastre în configurația Hubspot. Acesta nu este un câmp implicit din Hubspot. Prin urmare, vă sugerez să adăugați acest lucru la ofertele dvs. sau să schimbați „sursa” prin orice alt câmp personalizat pe care îl puteți dori din ofertele dvs.

function getDeals () {
   // Pregătiți autentificarea pentru Hubspot
   var service = getService ();
   var headers = {headers: {'Autorizare': 'Portător' + service.getAccessToken ()}};
   // Pregătiți paginarea
   // Hubspot vă permite să luați maximum 250 de oferte pe cerere.
   // Trebuie să facem o cerere multiplă până când vom primi toate ofertele.
   var a păstra = a continua = adevărat;
   compensare var = 0;
   var oferte = Array ();
   while (keep_aken) {
      // Vom lua trei proprietăți din oferte: sursa, etapa și valoarea tranzacției
      var url = API_URL + "/ deals / v1 / deal / paged? Properties = dealstage & Properties = sursă & proprietăți = suma & limit = 250 & offset =" + offset;
      răspuns var = UrlFetchApp.fetch (url, anteturi);
      var rezultat = JSON.parse (response.getContentText ());
      // Mai există rezultate, dacă ar trebui să oprim paginarea
      keep_aken = rezultat.hasMai mult;
      offset = rezultat.offset;
      // Pentru fiecare afacere, luăm stadiulId, sursa și suma
      result.deals.forEach (funcție (tranzacție) {
         var stageId = (deal.properties.hasOwnProperty ("dealstage"))? deal.properties.dealstage.value: „necunoscut”;
         var source = (deal.properties.hasOwnProperty ("sursă"))? deal.properties.source.value: „necunoscut”;
         var suma = (deal.properties.hasOwnProperty ("sumă"))? deal.properties.amount.value: 0;
         deals.push ([stageId, sursa, suma]);
      });
   }
   oferte de retur;
}

Această bucată de cod va:

  1. Conectați-vă la Hubspot.
  2. Obțineți toate ofertele și adăugați următoarele proprietăți: stadiul, sursa și valoarea ofertei.
  3. Puneți rezultatele într-un tablou pe care îl putem folosi ulterior.

Mai multe informații despre modul de recuperare a ofertelor găsiți aici.

Ok, avem datele în tablouri, dar acum, dacă vrem să ne putem juca cu ele folosind Google Spreadsheet, trebuie să imprimăm datele în foi. Mai întâi creăm două foi în foaia noastră de calcul, să le numim etape și oferte.

var sheetNameStages = "Etape";
var sheetNameDeals = "Oferte";
function writeStages (etape) {
   var ss = SpreadsheetApp.getActiveSpreadsheet ();
   var sheet = ss.getSheetByName (sheetNameStages);
   // Să punem câteva antete și să adăugăm etapele în tabelul nostru
   var matrix = Array (["StageID", "Etichetă"]);
   matrix = matrix.concat (etape);
   // Scrierea tabelei în foaia de calcul
   var range = sheet.getRange (1,1, matrix.length, matrix [0] .length);
   range.setValues ​​(matrice);
}
function writeDeals (oferte) {
   var ss = SpreadsheetApp.getActiveSpreadsheet ();
   var sheet = ss.getSheetByName (sheetNameDeals);
   // Să punem câteva anteturi și să adăugăm ofertele în tabelul nostru
   var matrix = Array (["StageID", "Sursa", "Suma"]);
   matrix = matrix.concat (oferte);
   // Scrierea tabelei în foaia de calcul
   var range = sheet.getRange (1,1, matrix.length, matrix [0] .length);
   range.setValues ​​(matrice);
}

Această bucată de cod va scrie etapele și se ocupă în foile potrivite prin următorii pași:

  1. Conectați-vă la foaia din dreapta.
  2. Pregătiți un tabel cu coloanele potrivite.
  3. Adăugarea datelor la tabel.
  4. Scrierea datelor în foaie.

Asta e! Cea mai mare parte a codului este făcută, trebuie doar să creăm o rutină simplă pe care o putem numi în mod recurent folosind declanșatoarele de proiect:

funcție refresh () {
   var service = getService ();
   if (service.hasAccess ()) {
      var etape = getStages ();
      writeStages (etape);
      var oferte = getDeals ();
      writeDeals (oferte);
   } altfel {
      var permissionUrl = service.getAuthorizationUrl ();
      Logger.log ('Deschideți următoarea adresă URL și rulați scriptul:% s', permissionUrl);
   }
}

Această rutină va:

  1. Încercați să vă conectați la Hubspot
  2. Dacă reușește, va obține datele și le va tipări pe foile corespunzătoare
  3. Dacă nu reușește (probabil prima dată când executați scriptul), va imprima URL-ul de autorizare în Jurnalele (Vizualizare> Jurnalele) pe care va trebui să le copiați și să le lipiți în browser.

Acum putem spune script-ului nostru să ruleze funcția de actualizare () în fiecare oră pentru a prelua cele mai actualizate date. Puteți accesa Modificarea> Declanșările proiectului curent.

Pregătirea declanșărilor proiectului în Google Spreadsheet pentru a reîmprospăta datele în mod recurent

Puteți găsi tot codul aici pentru confortul dvs., precum și tabelul de calcul Google.

Este timpul să testăm scriptul nostru și să vedem ce se întâmplă. Nu uitați, prima dată când rulați scriptul, va trebui să vă autentificați la Hubspot așa cum s-a explicat anterior. Apoi, dacă codul rulează fără erori (ceea ce ar trebui să-mi fac treaba în mod corespunzător ;-)), puteți merge la tabelul de calcul Google și puteți vedea datele populate în foile corespunzătoare.

Utilizați Google Spreadsheet pentru a pregăti datele în funcție de nevoile noastre

Am putut prelua datele de la Hubspot cu scriptul de mai sus. Acum, putem folosi Google Spreadsheet pentru a pregăti datele așa cum ne dorim înainte de a le trimite la Google Data Studio. Deci, ce vreau să știu?

  • Există blocaje în conducta mea? Cu alte cuvinte: care este numărul actual de oferte pe etapă în conductă.
  • Este conducta mea suficient de aprovizionată cu bani pentru a-mi putea prognoza fluxul de numerar? Cu alte cuvinte: Care este suma curentă de bani în fiecare etapă.
  • Ce canale funcționează cel mai bine și în care ar trebui să investesc mai mult? Cu alte cuvinte: Care sunt ratele de conversie și sumele de bani generate pe sursă.

Pentru toate aceste numere și cu datele pe care le-am obținut de la Hubspot, trebuie doar să creez câteva tabele Pivot. Pentru a crea unul, accesăm tabelul nostru Google Spreadsheet și facem clic pe Date> Pivot table.

Cu toate acestea, înainte de a crea primul nostru tabel Pivot, va trebui să conectăm foaia Stages cu foaia noastră de oferte. Într-adevăr, foaia noastră de oferte conține StageID-urile noastre, dar mai degrabă am avea un tabel complet care conține eticheta etapelor noastre, altfel raportul nostru va afișa doar ID-urile care nu sunt chiar ușor de utilizat.

În foaia Oferte, accesați coloana D și adăugați această linie în prima celulă a coloanei:

= ARRAYFORMULA (IFERROR (VLOOKUP (A: A, Etapele A: B, 2, FALSE), "Necunoscut"))

Să descompunem această linie:

  1. VLOOKUP (A: A, Etapele! A: B, 2, FALSE): Vă rugăm să potriviți coloana A cu tabelul din Etape și să obțineți valoarea din a doua coloană.
  2. IFERROR: Dacă nu găsiți nicio potrivire, spuneți-mi „Necunoscut”
  3. ARRAYFORMULA: Aplicați această regulă pe toată coloana mea.
Conectarea etapelor la StageIDs cu VLOOKUP pentru a prelua etichetele corespunzătoare

Bine, suntem pregătiți, să creăm primul nostru tabel Pivot pentru a obține numărul actual de oferte pe etapă.

Creați o nouă tabelă Pivot, va genera o nouă foaie pe care o puteți redenumi după Etapele: Cont. Urmați următorii pași în editorul de tabel Pivot:

  1. Selectați un interval de date. Intervalul de date ar trebui să fie întregul interval de date din foaia dvs. de oferte.
  2. Adăugați o linie și alegeți StageName
  3. Adăugați o valoare și alegeți StageID și setați Rezumare după: COUNTA

Acum aveți un tabel care conține sumele de oferte pe etapă. Vom folosi acest tabel în raportul nostru Google Data Studio.

Crearea unui tabel Pivot cu Google Spreadsheet pentru a obține numărul de oferte pe etapă în conductă

Putem face același lucru pentru a recupera suma de bani în fiecare etapă. Să creăm un nou tabel Pivot, dar în loc să alegem StageID ca valoare, să luăm Suma și să stabilim Rezumarea după: SUM.

Crearea unui tabel Pivot cu Google Spreadsheet pentru a obține suma de oferte pe etapă în conductă

Pentru a obține ratele de conversie pe sursă, putem crea un tabel Pivot următor cu următorii parametri:

  • Rând: Sursa
  • Coloana: StageName
  • Valoare: StageID Rezumat de COUNT

Putem apoi adăuga o coloană la sfârșitul tabelului pivot în care calculăm rata de conversie. Acest lucru va depinde de etapele dvs., dar în cazul meu, etapa în care se petrec conversiile se numește Câștigat câștigat. Prin urmare, calculez rata de conversie împărțind coloana Câștigată câștigată la cea Grand Total.

Crearea unui tabel Pivot cu tabelul Google pentru calcularea ratelor de conversie

În sfârșit, pentru a obține suma de bani generată de sursă, am creat un ultim tabel Pivot cu următorii parametri:

  • Rând: Sursa
  • Coloana: StageName
  • Valoare: Suma rezumată prin SUM

Coloana Câștigat închis indică suma de bani generată de fiecare sursă.

Suntem gata cu toate seturile de date necesare până acum, să mergem acum la Google Data Studio pentru ultima piesă ;-)

Conectați foaia de calcul Google cu Google Data Studio și creați un raport

În etapele de mai sus, am preluat datele de la Hubspot cu API-ul său folosind OAuth2. Apoi am pregătit datele cu Google Spreadsheet. Acum suntem gata să afișăm datele într-un panou de bord personalizat, folosind Google Data Studio.

Este destul de simplu, așa că nu o să intru prea mult în detalii, vă voi spune doar elementele de bază pentru a începe. În primul rând, va trebui să creăm un raport nou. Atunci va trebui să conectăm o sursă de date. Data Studio vă permiteți să alegeți între diferite surse de date și, în special, o foaie de calcul Google, care este în mod evident de care avem nevoie.

Desigur, poate doriți să le verificați și pe toate celelalte, în special Google Analytics, Adwords sau orice alte instrumente pe care le puteți utiliza deja pentru afacerea dvs. Există chiar și conectori comunitari (din păcate, până la această dată nu există niciun conector Hubspot).

Vom crea primul nostru grafic de bare care arată rata de conversie pe sursă.

La adăugarea unui complot, apare un meniu în dreapta unde putem edita sursa de date. În acest moment, trebuie să adăugăm sursa de date din foaia Surse: număr și rate de conversie în care am creat tabelul pivot care conține ratele de conversie.

Când adăugați o sursă de date Google Spreadsheet, vă va permite să configurați diferitele câmpuri detectate din foaia aleasă. De obicei, completează automată coloana de agregare cu SUM atunci când detectează numere. În cele mai multe cazuri, fac doar să comute toate câmpurile ca Nici unul.

Conectarea unei surse de date la Google Data StudioCrearea unui complot de bare cu Google Data Studio

Odată ce conexiunea a fost făcută, ar trebui să adăugăm dimensiunile și valorile corespunzătoare. De exemplu, putem configura Sursa pentru dimensiune și rata de conversie ca valori pentru a obține graficul de mai sus.

Va trebui să adăugăm o sursă de date în Data Studio pentru fiecare foaie sau tabel rotativ pe care l-am creat în Google Spreadsheet. Odată adăugate toate sursele de date, putem doar să reproducem pașii de mai sus pentru a crea toate graficele, scorurile sau orice alt instrument fantezist pe care doriți să îl adăugați în tabloul de bord personalizat.

Bonus: Cum rămâne să avem date în timp pentru a vedea evoluția performanței noastre zi de zi?

De exemplu, vreau să știu cum evoluează avantajele în timp, unde echipa noastră se îmbunătățește sau lipsește, ce canale ar trebui să trec în revistă, întrucât nu au trimis niciun avans de câteva zile sau, în sfârșit, ce impact a avut asupra conductei de vânzări când o persoană de vânzări din echipa noastră s-a îmbolnăvit săptămâna trecută.

Există o modalitate ușoară de a înregistra datele în timp. Iată o bucată de cod pe care o puteți adăuga la script pentru a realiza acest lucru:

function logSources () {
   var ss = SpreadsheetApp.getActiveSpreadsheet ();
   var sheet = ss.getSheetByName ("Surse: număr și rate de conversie");
   var getRange = sheet.getRange ("M3: M13");
   var row = getRange.getValues ​​();
   rând.unshift (data nouă);
   var matrix [[rând];
   var ss = SpreadsheetApp.getActiveSpreadsheet ();
   var sheet = ss.getSheetByName ("Jurnal: Surse");
   var lastRow = sheet.getLastRow ();
   var lastCol = sheet.getLastColumn ();
   // Scrierea la sfârșitul foii de calcul
   var setRange = sheet.getRange (lastRow + 1,1,1, row.length);
   setRange.setValues ​​(matrice);
}

Iată ce face:

  1. Copiază coloana din dreapta în foaia din dreapta și o stochează într-un tablou.
  2. Acesta adaugă data la începutul tabloului.
  3. Selectează și lipeste datele din ultimul rând al foii Jurnal: Surse.

Putem face același lucru pentru etape.

În cele din urmă, putem adăuga declanșările proiectului, astfel încât datele să fie înregistrate o dată pe zi.

Noile date pot fi apoi conectate la Google Data Studio în mod similar, așa cum s-a explicat mai sus.

Rezultat final

Mai jos veți găsi o captură de ecran a tabloului de bord personalizat, după ce urmați pașii de mai sus. Este destul de simplu și putem avea deja o imagine de ansamblu destul de minunată a ceea ce se întâmplă în conducta noastră de vânzări. Trebuie doar să așteptăm câteva zile pentru a vedea evoluția în timp și pentru a vedea cum este performanța echipei noastre de vânzări.

Pentru confortul dvs., vă rugăm să găsiți următoarele documente folosite:

  • Script complet pentru aplicații Google: faceți clic aici
  • Exemplu de calcul Google: faceți clic aici
  • Panoul de bord Google Data Studio: faceți clic aici

Pasii urmatori ?

În momentul în care scriu acest tutorial, nu există niciun conector de comunitate care să conecteze Hubspot CRM la Datastudio. S-ar putea să fie un lucru bun să îl construiți, astfel încât alții să poată beneficia de el. Cu toate acestea, utilizarea Google Spreadsheet ca pas intermediar vă oferă mai multă flexibilitate și putere pentru a face orice vi se potrivește nevoilor. Dacă Hubspot este sursa de date, Data Studio tabloul de bord, poate doriți să luați în considerare păstrarea fișei dvs. de calcul ca un „creier” pentru a interpreta datele dvs. înainte de a le trimite și a le afișa cu Data Studio.

Vă rugăm să comentați pentru a vă oferi informații.

Întrebări sau sugestii? Contactați-mă pe LinkedIn sau consultați-ne aici.