nuxt-modules / cloudinary

Cloudinary Module for Nuxt
https://cloudinary.nuxtjs.org
MIT License
249 stars 34 forks source link

How to disable Analytics in Images URL #167

Closed mohdlatif closed 9 months ago

mohdlatif commented 10 months ago

Where do I place this code to disable Analytics; basically I do not want to have ?= at the end of my Image URL

url: {
    secure: true,
    analytics: false,
  }

configuration parameters

const cloudinaryMedia = new Cloudinary({
  cloud: {
    cloudName: "cloud",
  },
  url: {
    secure: true,
    analytics: false,
  },
});
colbyfayock commented 10 months ago

hey @mohdlatif i dont believe this currently isn't supported, but we can work on adding this as an option

mohdlatif commented 10 months ago

hey @mohdlatif i dont believe this currently isn't supported, but we can work on adding this as an option

Thank you

Baroshem commented 10 months ago

Hey, @mohdlatif @colbyfayock

Yes, I can work on adding that optional cloudinary analytics :)

Baroshem commented 9 months ago

@colbyfayock

During the implementation I have discovered that even when I dont pass any analytics object, analytics ID is still being sent.

Analytics enabled
https://res.cloudinary.com/nuxt-cloudinary/image/upload/f_auto/q_auto/v1//cld-sample-5.jpg?_a=BATFIJa20

Analytics disabled
https://res.cloudinary.com/nuxt-cloudinary/image/upload/f_auto/q_auto/v1//cld-sample-5.jpg?_a=BBDAACAD0

You can check it in the code here https://github.com/nuxt-modules/cloudinary/pull/174

Do you think this could be something implemented in the cloudinary url loader or should I strip final url from this default analytics ID?

colbyfayock commented 9 months ago

@Baroshem i believe the URL Gen SDK by default adds its own tracking parameters, much like any newer Cloudinary SDK, which is the point (just like the use here)

this is a separate point however from disabling analytics, as its intentional for it to be on by default, which is why by default you pass in the tracking parameters as you do

when disabling, there was an inconsistency where if you pass in the config.url.analytics value as false, the underlying SDK would respect that and turn it off, however passing in the 3rd option as false would not

here's a fix to address that, as you can also see the tests in teh behavior added: https://github.com/colbyfayock/cloudinary-util/pull/101

before merging that, am i missing anything?

Baroshem commented 9 months ago

@colbyfayock @mohdlatif

I just looked at your PR at Cloudinary Util and realised that it is actually possible to disable analytics in useCldImageUrl composable by passing props.config.url.analytics: false even without my PR like so:

const { url } = useCldImageUrl({
  options: { src: "/cld-sample-5.jpg" },
  config: { url: { analytics: false } },
});

And you can also pass it as a prop to the CldImage.vue component like so:

  <CldImage
    src="cld-sample-5"
    :config="{ url: { analytics: false } }"
  />

Which will result in creating following url:

https://res.cloudinary.com/nuxt-cloudinary/image/upload/c_fill,w_987,h_987,g_auto/f_auto/q_auto/cld-sample-5

So I am not sure if both yours and my PR's are needed

colbyfayock commented 9 months ago

if im understanding the code right, one thing i like is having the option in a globally configurable way through nuxt.config, is that correct? id like to do that in nextjs but there isn't a reliable pattern that they promote, so itd be somewhat at my own risk to implement, still figuring that out (they recommend wrapper components :/)

this could be spun up in another ticket, but being able to provide global cloudinary configurations would be great, including anything you see in that config object, including cnames and such, where perhaps the API then would be:

cloudinary: {
  config
}

to be extra explicit about its intent

the other consideration is that using Object assign with a value of false wouldn't work as epxect in my proposed PR

analytics: Object.assign({
  sdkCode: 'D',
  sdkSemver: `${pkg.version.split('.')[0]}.0.0`,
  techVersion: `${nuxtPkg.version.split('.')[0]}.0.0`,
  product: 'B'
}, props.analytics)
image

so id expect this not to work:

const { url } = useCldImageUrl({
  options: { src: "/cld-sample-5.jpg" },
  analytics: false
});
colbyfayock commented 9 months ago

FYI merged my PR in from Cloudinary Util https://github.com/colbyfayock/cloudinary-util/pull/101

Baroshem commented 9 months ago

Will be added as a part of 2.5.0 release with following commit :) https://github.com/nuxt-modules/cloudinary/pull/173/commits/0f8df15ab84afc90b37f9e07660b79beaa7c5da2