Exemples de code JavaScript
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
L'exemple de code ci-dessous utilise la bibliothèque cliente des API Google pour JavaScript. Vous pouvez télécharger cet exemple à partir du dossier javascript du dépôt d'exemples de code des API YouTube sur GitHub.
Le code demande à l'utilisateur l'autorisation d'accéder au champ d'application https://www.googleapis.com/auth/yt-analytics.readonly.
return gapi.auth2.getAuthInstance()
.signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"})
...
Votre application peut également avoir besoin de demander l'accès à d'autres champs d'application. Par exemple, une application qui appelle les API YouTube Analytics et YouTube Data peut avoir besoin que les utilisateurs accordent également l'accès à leurs comptes YouTube. La présentation de l'autorisation identifie les niveaux d'accès généralement utilisés dans les applications qui appellent l'API YouTube Analytics.
Récupérer les statistiques quotidiennes d'une chaîne
Cet exemple appelle l'API YouTube Analytics pour récupérer les vues quotidiennes et d'autres métriques pour la chaîne de l'utilisateur autorisé pour l'année civile 2017. L'exemple utilise la bibliothèque cliente JavaScript des API Google.
Configurer les identifiants d'autorisation
Avant d'exécuter cet exemple en local pour la première fois, vous devez configurer les identifiants d'autorisation pour votre projet :
- Créez ou sélectionnez un projet dans la console Google APIs.
- Activez l'API YouTube Analytics pour votre projet.
- En haut de la page Identifiants, sélectionnez l'onglet Écran d'autorisation OAuth. Sélectionnez une adresse e-mail, saisissez un nom de produit s'il n'est pas déjà défini, puis cliquez sur le bouton "Enregistrer".
- Sur la page Identifiants, cliquez sur le bouton Créer des identifiants, puis sélectionnez ID client OAuth.
- Sélectionnez le type d'application "Application Web".
- Dans le champ "Origines JavaScript autorisées", saisissez l'URL à partir de laquelle vous diffuserez l'exemple de code. Par exemple, vous pouvez utiliser
http://localhost:8000 ou http://yourserver.example.com. Vous pouvez laisser le champ "URI de redirection autorisés" vide.
- Cliquez sur le bouton Créer pour terminer la création de vos identifiants.
- Avant de fermer la boîte de dialogue, copiez l'ID client, dont vous aurez besoin pour l'insérer dans l'exemple de code.
Créer une copie locale de l'échantillon
Ensuite, enregistrez l'échantillon dans un fichier local. Dans l'exemple, recherchez la ligne suivante et remplacez YOUR_CLIENT_ID par l'ID client que vous avez obtenu lors de la configuration de vos identifiants d'autorisation.
gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});
Exécuter le code
Vous êtes maintenant prêt à tester l'échantillon :
- Ouvrez le fichier local à partir d'un navigateur Web, puis ouvrez la console de débogage dans le navigateur. Une page affichant deux boutons devrait s'afficher.
- Cliquez sur le bouton Autoriser et charger pour lancer le flux d'autorisation de l'utilisateur. Si vous autorisez l'application à récupérer les données de votre chaîne, les lignes suivantes devraient s'afficher dans la console du navigateur :
Sign-in successful
GAPI client loaded for API
- Si un message d'erreur s'affiche à la place des lignes ci-dessus, vérifiez que vous chargez le script à partir de l'URI de redirection autorisé que vous avez configuré pour votre projet et que vous avez inséré votre ID client dans le code comme décrit ci-dessus.
- Cliquez sur le bouton Exécuter pour appeler l'API. Un objet
response doit s'afficher dans la console du navigateur. Dans cet objet, la propriété result correspond à un objet contenant les données de l'API.
Exemple de code
<script src="https://apis.google.com/js/api.js"></script>
<script>
function authenticate() {
return gapi.auth2.getAuthInstance()
.signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"})
.then(function() { console.log("Sign-in successful"); },
function(err) { console.error("Error signing in", err); });
}
function loadClient() {
return gapi.client.load("https://youtubeanalytics.googleapis.com/$discovery/rest?version=v2")
.then(function() { console.log("GAPI client loaded for API"); },
function(err) { console.error("Error loading GAPI client for API", err); });
}
// Make sure the client is loaded and sign-in is complete before calling this method.
function execute() {
return gapi.client.youtubeAnalytics.reports.query({
"ids": "channel==MINE",
"startDate": "2017-01-01",
"endDate": "2017-12-31",
"metrics": "views,estimatedMinutesWatched,averageViewDuration,averageViewPercentage,subscribersGained",
"dimensions": "day",
"sort": "day"
})
.then(function(response) {
// Handle the results here (response.result has the parsed body).
console.log("Response", response);
},
function(err) { console.error("Execute error", err); });
}
gapi.load("client:auth2", function() {
gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});
});
</script>
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/08/21 (UTC).
[null,null,["Dernière mise à jour le 2025/08/21 (UTC)."],[[["\u003cp\u003eThis sample code uses the Google APIs Client Library for JavaScript to retrieve daily views and other metrics for a YouTube channel for the 2017 calendar year, utilizing the YouTube Analytics API.\u003c/p\u003e\n"],["\u003cp\u003eThe code requests user permission to access the \u003ccode\u003ehttps://www.googleapis.com/auth/yt-analytics.readonly\u003c/code\u003e scope to read YouTube Analytics data.\u003c/p\u003e\n"],["\u003cp\u003eSetting up authorization credentials in the Google API Console is required, including creating an OAuth client ID, enabling the YouTube Analytics API, and entering authorized JavaScript origins.\u003c/p\u003e\n"],["\u003cp\u003eThe sample requires replacing \u003ccode\u003e<var translate="no">YOUR_CLIENT_ID</var>\u003c/code\u003e with the client ID obtained from the Google API Console in order to run.\u003c/p\u003e\n"],["\u003cp\u003eTo run the code, users must authorize the application, load the API client, and execute the API query by clicking buttons in the browser, with successful operations and responses being logged in the browser's console.\u003c/p\u003e\n"]]],["The code uses the Google APIs Client Library for JavaScript to retrieve YouTube channel statistics. It requires user authorization for the `https://www.googleapis.com/auth/yt-analytics.readonly` scope. Users need to create authorization credentials in the Google API Console, enabling the YouTube Analytics API. The client ID must be added to the code sample, which is loaded from a specified URL. Upon running, the code allows authorization and data retrieval, displaying daily channel metrics (views, watch time, etc.) for 2017.\n"],null,["# JavaScript Code Samples\n\nThe code sample below uses the [Google APIs Client Library for JavaScript](/api-client-library/javascript). You can download this sample from the `javascript` folder of the [YouTube APIs code sample repository on GitHub](https://github.com/youtube/api-samples).\n\nThe code requests the user's permission to access the `https://www.googleapis.com/auth/yt-analytics.readonly` scope. \n\n```\nreturn gapi.auth2.getAuthInstance()\n .signIn({scope: \"https://www.googleapis.com/auth/yt-analytics.readonly\"})\n ...\n```\n\nYour application might also need to request access to other scopes. For example, an application that calls the YouTube Analytics API and the YouTube Data API might need users to also grant access to their YouTube accounts. The [authorization overview](/youtube/reporting/guides/authorization#identify-access-scopes) identifies scopes typically used in applications that call the YouTube Analytics API.\n\nRetrieve daily channel statistics\n---------------------------------\n\nThis example calls the YouTube Analytics API to retrieve daily views and other metrics for the authorizing user's channel for the 2017 calendar year. The sample uses the [Google APIs JavaScript client library](/api-client-library/javascript).\n\n### Set up authorization credentials\n\nBefore running this sample locally for the first time, you need to set up authorization credentials for your project:\n\n1. Create or select a project in the [Google API Console](https://console.cloud.google.com/).\n2. Enable the [YouTube Analytics API](https://console.developers.google.com/apis/library/youtubeanalytics.googleapis.com) for your project.\n3. At the top of the [Credentials](https://console.developers.google.com/apis/credentials) page, select the **OAuth consent screen** tab. Select an Email address, enter a Product name if not already set, and click the Save button.\n4. On the [Credentials](https://console.developers.google.com/apis/credentials) page, click the **Create credentials** button and select **Oauth client ID**.\n5. Select the application type Web application.\n6. In the Authorized JavaScript origins field, enter the URL from which you will be serving the code sample. For example, you could use something like `http://localhost:8000` or `http://yourserver.example.com`. You can leave the Authorized redirect URIs field blank.\n7. Click the **Create** button to finish creating your credentials.\n8. Before closing the dialog box, copy the client ID, which you will need to put into the code sample.\n\n### Make a local copy of the sample\n\nThen, save the sample to a local file. In the sample, find the following line and replace \u003cvar translate=\"no\"\u003eYOUR_CLIENT_ID\u003c/var\u003e with the client ID you obtained when setting up your authorization credentials. \n\n```\ngapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});\n```\n\n### Run the code\n\nNow, you are ready to actually test the sample:\n\n1. Open the local file from a web browser, and open the debugging console in the browser. You should see a page that displays two buttons.\n2. Click the **authorize and load** button to launch the user authorization flow. If you authorize the app to retrieve your channel data, you should see the following lines print to the console in the browser: \n\n ```\n Sign-in successful\n GAPI client loaded for API\n ```\n3. If you see an error message instead of the lines above, confirm that you are loading the script from the authorized redirect URI that you set up for your project and that you put your client ID into the code as described above.\n4. Click the **execute** button to call the API. You should see a `response` object print to the console in the browser. In that object, the `result` property maps to an object that contains the API data.\n\n### Sample code\n\n```javascript\n\u003cscript src=\"https://apis.google.com/js/api.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n function authenticate() {\n return gapi.auth2.getAuthInstance()\n .signIn({scope: \"https://www.googleapis.com/auth/yt-analytics.readonly\"})\n .then(function() { console.log(\"Sign-in successful\"); },\n function(err) { console.error(\"Error signing in\", err); });\n }\n function loadClient() {\n return gapi.client.load(\"https://youtubeanalytics.googleapis.com/$discovery/rest?version=v2\")\n .then(function() { console.log(\"GAPI client loaded for API\"); },\n function(err) { console.error(\"Error loading GAPI client for API\", err); });\n }\n // Make sure the client is loaded and sign-in is complete before calling this method.\n function execute() {\n return gapi.client.youtubeAnalytics.reports.query({\n \"ids\": \"channel==MINE\",\n \"startDate\": \"2017-01-01\",\n \"endDate\": \"2017-12-31\",\n \"metrics\": \"views,estimatedMinutesWatched,averageViewDuration,averageViewPercentage,subscribersGained\",\n \"dimensions\": \"day\",\n \"sort\": \"day\"\n })\n .then(function(response) {\n // Handle the results here (response.result has the parsed body).\n console.log(\"Response\", response);\n },\n function(err) { console.error(\"Execute error\", err); });\n }\n gapi.load(\"client:auth2\", function() {\n gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});\n });\n\u003c/script\u003e\n\u003cbutton onclick=\"authenticate().then(loadClient)\"\u003eauthorize and load\u003c/button\u003e\n\u003cbutton onclick=\"execute()\"\u003eexecute\u003c/button\u003e\nhttps://github.com/youtube/api-samples/blob/07263305b59a7c3275bc7e925f9ce6cabf774022/javascript/yt_analytics_v2.html\n```"]]
