feat: add analytics to generated urls

demo/gatsby-config.js

@@ -22,6 +22,18 @@ module.exports = {
         prefix: process.env.CLOUDINARY_SOURCE_PREFIX,
       },
     },
+    {
+      resolve: `gatsby-source-cloudinary`,
+      options: {
+        cloudName: process.env.CLOUDINARY_CLOUD_NAME,
+        apiKey: process.env.CLOUDINARY_API_KEY,
+        apiSecret: process.env.CLOUDINARY_API_SECRET,
+        resourceType: `video`,
+        context: true,
+        maxResults: 10,
+        prefix: process.env.CLOUDINARY_SOURCE_PREFIX,
+      },
+    },
     {
       resolve: `gatsby-transformer-cloudinary`,
       options: {

demo/package.json

@@ -7,7 +7,7 @@
     "gatsby": "^4.14.1",
     "gatsby-plugin-image": "2.23.1",
     "gatsby-source-cloudinary": "*",
-    "gatsby-transformer-cloudinary": "3.0.0",
+    "gatsby-transformer-cloudinary": "^3.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },

plugin/gatsby-node.js

@@ -1,4 +1,8 @@
-const { newCloudinary, getResourceOptions } = require('./utils');
+const {
+  newCloudinary,
+  getResourceOptions,
+  generateCloudinaryUrl,
+} = require('./utils');
 
 const REPORTER_PREFIX = `gatsby-source-cloudinary`;
 const NODE_TYPE = `CloudinaryMedia`;
@@ -24,15 +28,33 @@ exports.pluginOptionsSchema = ({ Joi }) => {
 const getNodeData = (gatsbyUtils, media, cloudName) => {
   const { createNodeId, createContentDigest } = gatsbyUtils;
 
+  const url = generateCloudinaryUrl(media, {
+    secure: false,
+  });
+  const secureUrl = generateCloudinaryUrl(media, {
+    secure: true,
+  });
+
   return {
+    // Keep all original data around,
+    // keep for backwards compatability.
+    // Remove in favour of `cloudinaryData: media`,
+    // when next breaking change is released
     ...media,
+    // ID
     id: createNodeId(`cloudinary-media-${media.public_id}`),
+    // Needed by gatsby-transformer-cloudinary
+    cloudName: cloudName,
+    publicId: media.public_id,
     originalHeight: media.height,
     originalWidth: media.width,
     originalFormat: media.format,
-    cloudName: cloudName,
-    publicId: media.public_id,
+    // Keep all original data around
     cloudinaryData: media,
+    // Generated urls
+    url: url,
+    secure_url: secureUrl,
+    // Internal
     internal: {
       type: NODE_TYPE,
       content: JSON.stringify(media),
@@ -41,16 +63,6 @@ const getNodeData = (gatsbyUtils, media, cloudName) => {
   };
 };
 
-const addTransformations = (resource, transformation, secure) => {
-  const splitURL = secure
-    ? resource.secure_url.split('/')
-    : resource.url.split('/');
-  splitURL.splice(6, 0, transformation);
-
-  const transformedURL = splitURL.join('/');
-  return transformedURL;
-};
-
 const createCloudinaryNodes = async (
   gatsbyUtils,
   cloudinary,
@@ -73,15 +85,6 @@ const createCloudinaryNodes = async (
       });
 
       result.resources.forEach((resource) => {
-        const transformations = 'q_auto,f_auto'; // Default CL transformations, todo: fetch base transformations from config maybe.
-
-        resource.url = addTransformations(resource, transformations);
-        resource.secure_url = addTransformations(
-          resource,
-          transformations,
-          true,
-        );
-
         const nodeData = getNodeData(gatsbyUtils, resource, cloudName);
         actions.createNode(nodeData);
       });

plugin/package.json

@@ -15,7 +15,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "cloudinary": "^1.30.0",
+    "cloudinary": "^1.35.0",
     "lodash": "^4.17.21"
   },
   "peerDependencies": {

plugin/utils.js

@@ -1,6 +1,13 @@
 const cloudinary = require('cloudinary').v2;
 const { snakeCase } = require('lodash');
 
+const pluginPkg = require('../package.json');
+const gatsbyPkg = require('gatsby/package.json');
+
+const SDK_CODE = 'X';
+const SDK_SEMVER = pluginPkg.version;
+const TECH_VERSION = gatsbyPkg.version;
+
 const DEFAULT_KEYS = [
   'resourceType',
   'prefix',
@@ -38,7 +45,26 @@ const getResourceOptions = (options) => {
   return result;
 };
 
+const generateCloudinaryUrl = (
+  { cloud_name, public_id, resource_type },
+  { secure },
+) => {
+  const url = cloudinary.url(public_id, {
+    resource_type: resource_type,
+    cloud_name: cloud_name,
+    secure: secure,
+    transformation: { quality: 'auto', fetch_format: 'auto' },
+    urlAnalytics: true,
+    sdkCode: SDK_CODE,
+    sdkSemver: SDK_SEMVER,
+    techVersion: TECH_VERSION,
+  });
+
+  return url;
+};
+
 module.exports = {
   newCloudinary,
   getResourceOptions,
+  generateCloudinaryUrl,
 };

plugin/utils.test.js

@@ -1,4 +1,11 @@
-import { getResourceOptions } from './utils';
+jest.mock('../package.json', () => ({
+  version: '0.1.6',
+}));
+jest.mock('gatsby/package.json', () => ({
+  version: '0.4.10',
+}));
+
+import { getResourceOptions, generateCloudinaryUrl } from './utils';
 
 describe('getResourceOptions', () => {
   it('transforms options to snake case', () => {
@@ -19,3 +26,40 @@ describe('getResourceOptions', () => {
     expect(result).toEqual(expected);
   });
 });
+
+describe('generateCloudinaryUrl', () => {
+  const ANALYTICS_CODE = 'AXOrEGQ0';
+
+  it('generates correct url for image (default)', () => {
+    const asset = {
+      public_id: 'public-id',
+      cloud_name: 'cloud-name',
+    };
+
+    const secureUrl = generateCloudinaryUrl(asset, { secure: true });
+    expect(secureUrl).toBe(
+      `https://res.cloudinary.com/cloud-name/image/upload/f_auto,q_auto/public-id?_a=${ANALYTICS_CODE}`,
+    );
+    const url = generateCloudinaryUrl(asset, { secure: false });
+    expect(url).toBe(
+      `http://res.cloudinary.com/cloud-name/image/upload/f_auto,q_auto/public-id?_a=${ANALYTICS_CODE}`,
+    );
+  });
+
+  it('generates correct url for video', () => {
+    const asset = {
+      public_id: 'public-id',
+      cloud_name: 'cloud-name',
+      resource_type: 'video',
+    };
+
+    const secureUrl = generateCloudinaryUrl(asset, { secure: true });
+    expect(secureUrl).toBe(
+      `https://res.cloudinary.com/cloud-name/video/upload/f_auto,q_auto/public-id?_a=${ANALYTICS_CODE}`,
+    );
+    const url = generateCloudinaryUrl(asset, { secure: false });
+    expect(url).toBe(
+      `http://res.cloudinary.com/cloud-name/video/upload/f_auto,q_auto/public-id?_a=${ANALYTICS_CODE}`,
+    );
+  });
+});

yarn.lock

@@ -4281,7 +4281,7 @@ cloudinary-core@^2.10.2:
   resolved "https://registry.yarnpkg.com/cloudinary-core/-/cloudinary-core-2.13.0.tgz#b59f90871b6c708c3d0735b9be47ac08181c57fb"
   integrity sha512-Nt0Q5I2FtenmJghtC4YZ3MZZbGg1wLm84SsxcuVwZ83OyJqG9CNIGp86CiI6iDv3QobaqBUpOT7vg+HqY5HxEA==
 
-cloudinary@^1.30.0, cloudinary@^1.30.1:
+cloudinary@^1.30.1:
   version "1.32.0"
   resolved "https://registry.yarnpkg.com/cloudinary/-/cloudinary-1.32.0.tgz#13e16f8238aa8d49b61db16450590c802a79e21c"
   integrity sha512-hbc5/ilOkwD49+Lucqze3z+2Tejc3YdH4tkI+y1Ciabi9Qh9MYcy4M3rYeDAYiMS/jIz5FfHOzx+JjVnPJxNAQ==
@@ -4293,6 +4293,18 @@ cloudinary@^1.30.0, cloudinary@^1.30.1:
   optionalDependencies:
     proxy-agent "^5.0.0"
 
+cloudinary@^1.35.0:
+  version "1.35.0"
+  resolved "https://registry.yarnpkg.com/cloudinary/-/cloudinary-1.35.0.tgz#37a061342fd5b810aa3165d68c2e6933f3d4829f"
+  integrity sha512-0aRLVOaVsoiqDCNkSzlPGR/oYOlE3AGrtwFTPx7xlZCPyKNzqeD9t9ENmPwzHn3yn/afAvy4h1sqb2yPyJOAow==
+  dependencies:
+    cloudinary-core "^2.10.2"
+    core-js "^3.6.5"
+    lodash "^4.17.21"
+    q "^1.5.1"
+  optionalDependencies:
+    proxy-agent "^5.0.0"
+
 cmd-shim@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-5.0.0.tgz#8d0aaa1a6b0708630694c4dbde070ed94c707724"
@@ -6465,10 +6477,10 @@ gatsby-telemetry@^3.24.0:
     lodash "^4.17.21"
     node-fetch "^2.6.7"
 
-gatsby-transformer-cloudinary@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/gatsby-transformer-cloudinary/-/gatsby-transformer-cloudinary-3.0.0.tgz#15e42ba1ef76494843a99e7d0b68b7ecd17d2a29"
-  integrity sha512-1nqkVyFNmKt8tvx5gLKXhddr2JqoT+deh7u+om+0p2tbErj7u9/2XtsOU+uPZoYKK9OxfknQoXwU+bcfuj6Ieg==
+gatsby-transformer-cloudinary@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/gatsby-transformer-cloudinary/-/gatsby-transformer-cloudinary-3.1.0.tgz#dc3f59d4cfe44d46ad798a8b272cf02ace062a8b"
+  integrity sha512-bQl/MgMb+lAARnChL54LsPMwBxwe77MX1x8w08cvy1AAbMhamTLb7wV9GvwteRb+UfTzgBNdOrU2ovXGszkX4A==
   dependencies:
     axios "^0.27.2"
     cloudinary "^1.30.1"