Chapter 8: Marketing Your Drupal Commerce Store

In this chapter, you'll learn all about e-commerce marketing. Even before the pandemic, e-commerce was already trending; however, this period brought unprecedented growth to the digital and e-commerce sectors. The consecutive lockdowns forced consumers to look for all kinds of goods and services online, which caused the companies that weren't selling online to start doing so as their only option to keep their businesses going. When the market has such an abundance of suppliers, competition increases and marketing becomes of paramount importance as companies feel the need to distinguish themselves in the vast sea of competitors and better market their products and services online.

The go-to option for building online stores in Drupal is the Drupal Commerce framework. By adding an e-commerce platform on top of Drupal, content and products are seamlessly integrated, and the richest digital shopping experiences can be built. Fundamental functions (including orders, product details, cart management, promotions, and payment choices) are provided by Drupal Commerce. But the features available go way beyond these: in the Drupal Commerce ecosystem, dozens of modules are available to help build the perfect online store (the payment methods alone number more than one hundred!)

The most basic strategy available for e-commerce marketing (and one of the most powerful!) is promotional pricing. Companies temporarily lower the price of a product or service to attract prospects and consumers or to increase the sales of that product or service. Online consumers are perfectly attuned to this strategy; many only buy when they see a promotion going on, and delay their purchase until one starts.

In this chapter, we will cover the following topics:

• Creating promotions and coupons in Drupal Commerce
• Expanding your reach with product feeds
• Connecting Drupal Commerce to Google Shopping
• Implementing a cart abandonment recovery email
• Adding Google Analytics Enhanced Ecommerce integration to Drupal Commerce
• Live chat for sales and support

Creating promotions and coupons in Drupal Commerce

Drupal Commerce has a powerful built-in engine to create all kinds of promotions for your online store. By default, you'll find the following options for offer types:

• Buy X, Get Y
• Combination offer
• Fixed amount off each matching product
• Fixed amount off the order subtotal
• Fixed amount off the shipment amount
• Percentage off each matching product
• Percentage off the order subtotal
• Percentage off the shipment amount

For each offer type, you need to set the related parameters. In addition, there's a special offer type, Combination offer, which, as the name implies, allows you to group multiple offer types in the same promotion, providing you with even more flexibility.

Let's create a promotion that will give customers a store-wide 5% discount when they subscribe to the brand's newsletter, but only for those customers with the unique coupon code to activate that promotion. The coupon will be sent in the welcome email the customer receives when they subscribe to your newsletter. This strategy has a twofold objective: one, obviously, is to encourage the online store visitors to subscribe to your newsletter, and the other is to offer them a small discount that can help convert new visitors into customers! Let's get started:

1. Navigate to admin/commerce/promotions and click the Add promotion button.
2. Give the promotion a descriptive name.
3. Choose the Percentage off the order subtotal offer type and set a 5% discount.
4. You can define several conditions that need to be met for the promotion to be applied by setting the options under Conditions, Dates, Usage limits, and Compatibility.

Figure 8.1 – Drupal Commerce promotion creation form

5. Click Save and add coupons. This will take you to the form where you can create the coupon code. You can create each coupon individually or use the option to generate multiple coupons automatically.

Figure 8.2 – Coupon creation form

6. Let's use the option to generate multiple coupons automatically:

Figure 8.3 – Add coupon form

7. The coupons are now ready to be distributed and used by your customers!

Figure 8.4 – List of available coupons for the promotion

8. Simulate and test buying a product, and apply one of the created coupons at the checkout:

Figure 8.5 – Checkout with an applied coupon

Drupal Commerce's promotion engine is very flexible and powerful. The number of offer types is constantly being expanded, either by being available in Commerce Core or as contributed modules.

Note

It's also possible to create a custom offer type by programming your own offer plugin. Check the Drupal Commerce developer documentation to discover how to accomplish this: https://docs.drupalcommerce.org/commerce2/developer-guide/promotions/create-an-offer-type.

You aren't limited to promoting or selling your products exclusively in your store. You can also make your products available on other channels, including Facebook, Instagram, and Google. One of the main reasons why this is a good option is that those channels are already visited by your target consumers – you just need to show them your products. In the following section, we'll learn how to create a product feed to make our products available through these channels.

Expanding your reach with product feeds

Your product catalog is not limited to existing only in your store; it can also be distributed through other channels, thus allowing you to increase your marketing reach. In this chapter, you will learn how to automatically distribute your product catalog with three of the most important marketing channels nowadays: Facebook, Instagram, and Google.

For Google and Facebook, it's recommended that your products are identified with what is called a Google product category (how original!). Fortunately for us, there's also a contributed module to help us with that.

Adding support for the "Google product category" field

Let's see how to do it:

1. Install the Google Product Categories module as usual (https://www.drupal.org/project/google_product_categories).
2. Through the installation process, the module creates a new taxonomy called Google Product Taxonomy.
3. Navigate to /admin/structure/taxonomy/manage/google_product_taxonomy/overview/fields, and add the text fields field_google_product_taxonomy_id and field_google_product_taxonomy_pa to the vocabulary terms. The module doesn't do that for us automatically (maybe in the future, it will).

Figure 8.6 – Fields that must be added to Google Product Taxonomy

4. Now the module is ready to start importing the full product category list from Google. Navigate to /admin/config/google-product-categories and click Import:

Figure 8.7 – Form to import Google product categories

5. After the import process, you can check the taxonomy at /admin/structure/taxonomy/manage/google_product_taxonomy/overview, and all the categories will be there.
6. Now that our vocabulary is ready, we can add a field to our products to store a reference to what we just created. Navigate to /admin/commerce/config/product-types and add a Taxonomy term reference field to the Google Product Taxonomy vocabulary.

Figure 8.8 – Google product category field added to a product entity type

Now, whenever you create or update the store products and set the Google product category for that field, that information will be ready to use on the feeds you create for Google and Facebook.

Creating a Facebook and Instagram product catalog for your store

As the name suggests, a product catalog is a collection of information on all the products you wish to market or sell on Facebook and Instagram. Facebook can automatically update the e-commerce catalog if you provide information about your products using either of the Open Graph or Schema.org standardized formats.

Note

For instructions on how to set up a product catalog on the Facebook side, read the following link: https://www.facebook.com/business/help/1275400645914358.

Let's add microdata tags to our product pages, so Facebook can do the same. The format that we will be using is OpenGraph. For this to work, you'll need to have the Facebook pixel installed (go back to Chapter 5, Generating Website Traffic, for more instructions), and we will once again be using the Metatag module for adding the respective tags.

Adding microdata tags to Commerce product pages

1. Install the Metatag module as usual.
2. Navigate to /admin/commerce/config/product-types and select your product type to add the meta tags field:

Figure 8.9 – List of Commerce product types

3. Create a new field of the type Meta tags:

Figure 8.10 – Adding a Meta tags field

4. Now that you have the field created and available on your product entities, go to /admin/config/search/metatag/settings and activate the Open Graph – Products, Basic tags, and Open Graph options.

Figure 8.11 – Setting the enabled meta tag options for the product entity type

5. Then at /admin/config/search/metatag, you can configure the default tag values for your products entities. Click Edit and set them as shown in the following screenshot:

Figure 8.12 – Default values for the product tags

6. Check to verify that everything is correct by opening a product page and viewing the HTML source. The tags should be added to the head section, looking something like the following:

   <meta property="og:site_name" content="Josefinas" />

   <meta property="og:url" content="http://josefinas.com/en/store/power-lunch-beige" />

   <meta property="og:title" content="Power Lunch Beige" />

   <meta property="og:description" content="We love to create and give a new life to simple things, making them extraordinary, so we created the Josefinas Power Lunch, a lunch bag that promotes lunches and conversations between women, making meals out much more beautiful!">

   <meta property="og:image" content="http://example.com/sites/default/files/styles/large/public/product-images/power-lunck-beige-1200x814-1.png?itok=Kn893W3l" />

   <meta property="product:availability" content="in stock" />

   <meta property="product:condition" content="new" />

   <meta property="product:retailer_item_id" content="257" />

   <meta property="product:price:amount" content="285.000000" />

   <meta property="google_product_category" content="3032" />

   <meta property="product:price:currency" content="EUR" />

7. You can also check the Facebook microdata debug tool for catalog to verify the tags are valid: https://business.facebook.com/ads/microdata/debug.

Figure 8.13 – Facebook microdata debug tool for catalog

Now Facebook can automatically discover your catalog and keep it updated. This is very useful for creating Facebook dynamic ads or for putting your products on sale on Facebook or Instagram.

Next, you will learn how to accomplish the same objective, but this time with Google's offering.

Connecting Drupal Commerce to Google Shopping

Google's Merchant Center uses primary feeds to display your products on Google, so you need to create a Drupal Commerce products feed. To do so, we'll be creating a dynamic feed with views that follow Google's Product data specification https://support.google.com/google-ads/answer/7052112. The feed must have all the required fields from the specification. The data structure is usually specific for each Drupal Commerce project, so the samples displayed should be taken as an example only.

Let's look at the steps for creating a feed of Drupal Commerce products for Google Shopping:

1. To promote your products with Google Shopping, you need to have a Google Merchant Center account. If you haven't got one yet, create one at https://merchants.google.com/start/.
2. On the Drupal side, you'll need to install the Views Data Export module (https://www.drupal.org/project/views_data_export). This module allows the creation of a CSV feed for Google.
3. You will also need to install the Image URL Formatter module (https://www.drupal.org/project/image_url_formatter), which will make it simpler to get a full URL for the product images, as image_link is one of the required fields in the specification.
4. Navigate to /admin/structure/views/add to add a new view to show your Drupal Commerce products:

Figure 8.14 – Creating a new view to show your Drupal Product entities

5. Click the Add button to add a new Data export type display to your view:

Figure 8.15 – Adding a new Data export display

6. Configure the data export display as shown in the following screenshot:

Figure 8.16 – The view fully configured to export the products feed

7. Be sure that the data export setting is set to CSV. The Download immediately feature must also be enabled in order for this to work:

Figure 8.17 – Configuring the Path setting of the view

8. Now you are ready to tell Google where to download the products feed to. You need to create a primary feed with the Scheduled fetch option, so Google can keep the products' data updated when you add, remove, or change them. Visit the following link to learn more about submitting feeds via scheduled fetches: https://support.google.com/merchants/answer/1219255.

Figure 8.18 – Creating a primary feed, choosing the Scheduled fetch option

9. Give the site access to your file (products feed) and create the feed. Click the Fetch now button and follow the instructions if there are any errors. If everything is OK, your feed is ready to promote your products on Google Shopping!

Figure 8.19 – Primary feed set up correctly

The strategies you've learned here will assist you in bringing customers to your online store, but as you know, this isn't enough. Even if they like the products and their prices, they may abandon their order and your online store after adding some products to their cart.

Let's see how to get those customers back by implementing a cart abandonment recovery email strategy.

Implementing a cart abandonment recovery email

Brands spend a lot of money attracting visitors to their online stores, but most of these visitors leave without making a purchase. Abandonment cart rates vary by sector, but usually, they're around 70 to 80%! There are many reasons for adding a product to the cart and never completing the purchase, but the most common ones are as follows:

• Finding the checkout process confusing
• The shipping costs and other delivery fees
• Having trouble finding a coupon code
• The obligation of creating an account
• Finding a store untrustworthy and other security concerns
• Not actually intending to buy anything; just browsing and using the cart as a wishlist or a cost calculator

It's essential to differentiate cart abandonment and checkout abandonment. They happen in different stages of the customer journey, and both are relevant in assessing whether everything is going as expected. Of course, checkout abandonment is more important, and you should always keep an eye on which step of the purchasing process your customers leave at in order to fix this issue.

Cart abandonment must be faced as a fact of life for online retailers. However, this doesn't mean there's nothing you can do about it. There are many digital marketing techniques you can implement to recover these customers and encourage them to check out their cart and finish their purchases. One of the most effective ones is by implementing a cart abandonment recovery email strategy.

Let's look at the steps to implement a cart abandonment recovery email in Drupal Commerce:

1. Install the Commerce Abandoned Carts module as usual (https://www.drupal.org/project/commerce_abandoned_carts).
2. Navigate to /admin/commerce/config/abandoned_carts and configure the desired settings. Send timeout is one of the most important ones, this setting will define after how long (in minutes) an email reminder will be sent to a visitor that left an open order. It's important that this only happens to visitors that got to the point in the checkout process of entering their email addresses. Don't forget to disable the test mode on this screen after all the tests are complete.

Figure 8.20 – Commerce Abandoned Carts configuration form

3. When cron runs, the module will send emails to all the emails captured from those orders that haven't been placed, reminding them to complete the checkout process:

Figure 8.21 – Example email

4. If you need to customize the message sent, copy the commerce-abandoned-carts-email.html.twig file from the module's template directory, and place it in your custom theme to edit as you wish. Don't forget to clear the caches.

In my experience, you can expect at least a 10% conversion rate with this type of email. In addition, you can combine this strategy with other remarketing strategies, further increasing the number of recovered customers.

Next, we'll look at how to connect Drupal Commerce with Google Analytics Enhanced Ecommerce.

Adding Google Analytics Enhanced Ecommerce integration to Drupal Commerce

You'll want to enable the measurement of user interactions with products on your e-commerce store across the user's shopping experience, including the views of product details when viewing a commerce product entity, the additions and removals of products from the shopping cart, the customer's checkout behavior, and their final purchases. We can do this using Google Analytics as follows:

1. Firstly, you need to have a Google Tag Manager (GTM) account: https://tagmanager.google.com.
2. Then, Google Analytics must be deployed with GTM: https://support.google.com/tagmanager/answer/6107124.
3. On your Google Analytics account, you must enable Ecommerce and Enhanced Ecommerce Reporting: https://support.google.com/analytics/answer/6032539.

Figure 8.22 – Google Analytics with Enhanced Ecommerce enabled

4. Install the Commerce Google Tag Manager module as usual https://www.drupal.org/project/commerce_google_tag_manager. There's no configuration necessary for this module, but this module depends on the GoogleTagManager module having been enabled and configured.
5. Go to /admin/config/system/google-tag and add your GTM Container ID. There are other options available that you can set, but just adding the container ID is enough for now.
6. Each of the recorded Enhanced Ecommerce events must now have its tags and triggers in GTM. Please read the following Drupal documentation guide to help you set up the tags and triggers for your GTM container: https://www.drupal.org/docs/contributed-modules/commerce-google-tag-manager/setup-google-tag-manager.
7. The result should be like the following for the Tags section:

Figure 8.23 – GTM tags

And the Triggers section should look like this:

Figure 8.24 – GTM triggers

8. Submit your changes in GTM, and Google Analytics will start recording those events. After some data collection, Google Analytics can give you a diversity of advanced reports specifically related to e-commerce.

Figure 8.25 – Example of an e-commerce report in Google Analytics – Checkout Behavior Analysis

Note

For your convenience, since this step is very time-consuming, you can download an exported GTM container with all those tags and triggers already set, provided with the code for this book. For more information on how to import a GTM container, check this link: https://support.google.com/tagmanager/answer/6106997.

We've only covered topics that don't necessarily have to involve real-time human interaction. But we cannot forget the importance of human interaction when doing marketing. Not all customers want it, but many desire to ask you questions in real time about your offering when they are on your online store. They want to talk to a "real human." That human touch, on the other side of your store, can be the difference between making a sale or not!

Live chat for sales and support

Customers always expect the best support, and the best means fast; really, really fast! Nowadays, when customers are in the mood to purchase and have a query about a product, they're not going to wait for an email response or sit in a phone queue. They want their answer instantly. That's why live chat is an excellent addition to any online store.

As you'd expect, there are many solutions available. There is one that I consider to be the best: it's free, it has many features (some of which must be paid for), and it integrates perfectly with Drupal; it is tawk.to. You can sign up for free here: https://dashboard.tawk.to/signup.

Adding tawk.to live chat to Drupal

The process to add an external live chat to Drupal is very similar to the one described here, no matter which solution you choose. Let's see how it's done:

1. If you haven't yet done so, create a free account at https://dashboard.tawk.to/signup.
2. Install the Tawk.to - Live chat application (https://www.drupal.org/project/tawk_to) module.
3. Navigate to /admin/config/services/tawk_to/widget and log in to tawk.to with your credentials:

Figure 8.26 – Tawk.to – Widget login form

4. The next step is to select your property and widget type:

Figure 8.27 – Setting the Property and Widget options for the module to use

5. After that, you can define where the chat widget will show up at /admin/config/services/tawk_to/exta_settings.
6. You can now navigate to any page on the online store, and try out the live chat widget:

Figure 8.28 – Tawk.to live chat widget displayed on an online store

When chat widgets started to appear on websites, customers didn't use them that much, but I see them being used more and more now. People have noticed that it is a speedy and practical way to clarify any issues they have. Also, on the brand side, it's a way to capture feedback in a more organic form.

Summary

In this chapter, you have learned the basics of e-commerce marketing, including how to create promotions and coupons with Drupal Commerce and how to send automatic email reminders to your customers when they haven't finished their orders.

We have also been through the steps of creating product feeds for Google, Facebook, and Instagram using different approaches. The integration between Google Analytics and Drupal Commerce is vastly improved by adding support for Enhanced Ecommerce Reports.

Finally, we saw how to quickly add a live chat tool to our online store. If nothing else, you've learned that being closer to our customers and making them feel safe and supported throughout the purchasing process is mandatory for the success of any online store these days.

In the next chapter, we'll focus on how Drupal can assist you when it comes to running and managing your team, as well as how it can help you to complete your daily digital marketing activities.