{"id":33739,"date":"2024-05-13T07:00:00","date_gmt":"2024-05-13T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=33739"},"modified":"2024-10-22T16:25:30","modified_gmt":"2024-10-22T23:25:30","slug":"get-more-from-user-generated-content-part-1","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/get-more-from-user-generated-content-part-1","title":{"rendered":"Get More From Your User-Generated Content, Part 1: Managing UGC With Cloudinary"},"content":{"rendered":"\n

This is part one of our three-part blog series that focuses on UGC\u2019s significance and positive impact on engagement, and how to manage, moderate, and curate this content within the Cloudinary platform. Be sure to check back for parts two and three.<\/p>\n\n\n\n

For a more comprehensive look at UGC, explore our free, 45-minute self-paced workshop<\/a> in the Cloudinary Academy<\/a>, which expands on the content in this blog series.<\/p>\n\n\n\n

What is UGC?<\/h2>\n\n\n\n

User-generated content (UGC), sometimes referred to as “earned media,” is original, brand-specific content created by customers and published on social media or other channels. It comes in many forms but is usually blog posts, comments, and is often accompanied by significant user-created videos and images, setting it apart from content generated by marketing departments.Because UGC is considered to be more authentic and honest, its value is incalculable, and the power consumer influence plays in purchase decision-making can\u2019t be overstated. There\u2019s more weight placed on UGC than the content released by retailers. Nielsen estimates that 92%<\/a> of consumers trust organic, user-generated content more than they trust traditional advertising. It would be challenging to find an online platform that doesn’t have at least one form of UGC.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Benefits of UGC<\/h2>\n\n\n\n

If you’ve made an online purchase, chances are you’ve encountered and engaged with customer reviews or testimonials. Typically, these opinions from fellow consumers greatly influence the decision to buy a product. <\/p>\n\n\n\n

\n

86%<\/em><\/a> of consumers credit reviews as pivotal in their purchasing decisions.<\/em><\/p>\n<\/blockquote>\n\n\n\n

Those same UGC photos and reviews are responsible for a 28% uplift in social media engagement <\/a>compared to posts without UGC.<\/p>\n\n\n\n

When Bazaarvoice<\/a> surveyed their network, they found a conversion rate increase of 144%<\/a> on platforms where users can interact with UGC and a 162% increase in revenue per visitor.<\/p>\n\n\n\n

By now it should be clear that UGC has a direct impact on revenue, along with the pluses of increased brand awareness, greater brand trust, and higher conversion rates.<\/p>\n\n\n\n

Managing UGC With Cloudinary<\/h2>\n\n\n\n

Imagine you\u2019re a business with the need to handle UGC in your application. Maybe you\u2019d like your users to accompany their review with photos and videos. Maybe you have a food delivery app, where many restaurants need to upload images of their food. Or you have a dating app, where the ability for users to upload content is the main functionality of your app. Perhaps you\u2019re in travel and tourism and know that hotel images and video are the most important aspect of a successful booking. <\/p>\n\n\n\n

Let’s explore how Cloudinary can help you manage this content.<\/p>\n\n\n\n

Incoming Transformations<\/h3>\n\n\n\n

First, you\u2019ll need to standardize uploaded assets to ensure they meet the requirements of your application. This is accomplished by incoming transformations<\/a>. <\/p>\n\n\n\n

Incoming transformations are applied to videos and images at the moment of upload. This means you can apply optimizations, resizing, and adjust quality, among other modifications, to the content before storing it.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Cloudinary\u2019s incoming transformations are important because by default<\/em>, uploaded assets are stored <\/em>in their original form (without transformations) upon upload, which is likely not needed for UGC.<\/p>\n\n\n\n

Incoming transformations can be created programmatically via the Upload API<\/a> or using Upload presets<\/a>.<\/p>\n\n\n\n

Using incoming transformations streamline your workflow to deliver optimized assets which consume less bandwidth, improve the user experience, and all but eliminate the need to manually transform every asset.<\/p>\n\n\n\n

\"\"
The code (Node) for an incoming transformation, which adjusts the dimensions to 500px x 500px, crops to a thumbnail, fully rounds the corners, and changes the file format to PNG upon upload.<\/em><\/figcaption><\/figure>\n\n\n\n

Now that we\u2019ve established what incoming transformations are, you\u2019ll need a way to actually apply them to your UGC. Here\u2019s where we\u2019d like to introduce upload presets. <\/p>\n\n\n\n

Upload Presets<\/h3>\n\n\n\n

Upload presets<\/a> are a way to centrally define a set of options, such as tags and transformations. An upload preset can be applied to any amount of assets within a single upload call instead of having to apply transformations individually.<\/p>\n\n\n\n

This provides you with a convenient way to maintain consistent upload settings and security measures to every asset while giving you the ability to apply that preset to all user uploads. This streamlines your content management by saving time, preventing errors, and allowing for uniformity in bulk uploads.<\/p>\n\n\n\n

Here, we’ve created a custom upload preset designed specifically for the use case of a user uploading an image for their account\u2019s profile picture.<\/p>\n\n\n\n

\n
\n
\"\"
On the left is the code (Node) for building our preset called \u201cprofile-preset,\u201d which adjusts the width, height, adds a crop, and centers on the face.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
On the right, in just a few lines of code you can apply the preset we\u2019ve just created.<\/em><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

For a UGC use case, moderation might be something to account for within an upload preset. More on this in part 2. <\/p>\n\n\n\n

Check out this tutorial<\/a> to learn more about upload presets. <\/p>\n\n\n\n

Upload Widget<\/h3>\n\n\n\n

Next, we need an easy, intuitive way to utilize all of this functionality in one spot. This is where Cloudinary\u2019s fully customizable Upload widget<\/a> comes in.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

With just a line of code within a script tag, you can be up and running with your Upload widget!<\/p>\n\n\n\n

To get going with the Upload widget, follow these steps:<\/p>\n\n\n\n

    \n
  1. Include the Cloudinary widget<\/strong> JavaScript file<\/a> in your web page.<\/li>\n\n\n\n
  2. Add the widget.<\/strong> Use the createUploadWidget method to create your widget, specifying the upload preset that you created in the first step, your cloud name, and some additional widget options.<\/li>\n\n\n\n
  3. Add a button.<\/strong> Add an HTML button to the page to display the widget when clicked.<\/li>\n\n\n\n
  4. Add an event listener<\/strong> to open the widget when the button is clicked.<\/li>\n<\/ol>\n\n\n\n

    Check out this tutorial<\/a> to learn more about the Upload Widget.<\/p>\n\n\n\n

    Within the upload widget, you can:<\/p>\n\n\n\n