I implemented the extended e-commerce function that I had been thinking of implementing for a long time on this blog (SEM Technology) in mid-August 2015. Before implementing this blog, I implemented it in the form of a compilation of best practices that I found while being involved in the implementation of extended e-commerce for several sites, so I would like to publish those best practices. .
Benefits of using enhanced e-commerce
In 2014, Google Analytics’ e-commerce related features were enhanced with the release of Enhanced E-commerce. Enhanced e-commerce goes beyond simple product transaction data to include detailed tracking of the purchase process.
In particular,
- Which product is displayed in which product frame and how many times, leading to conversion
- It is possible to quantify the sessions that reached the product detail page, the sessions that added to the cart, the sessions that started the checkout process, and the sessions that generated transactions based on various axes such as inflow source information and device, and at which step in the purchase process. I know if you left
- The checkout process can be defined in detail for each site, and it is possible to know at what stage of the checkout process they left.
- You can also measure the occurrence of returns (order cancellations)
There are advantages such as In particular, regarding “which product is displayed how many times in which product frame and leads to conversion”, by promoting “products that are displayed less often but have a high conversion rate” in conspicuous product frames, EC site can lead to sales maximization.
Genre that can be used for expanded e-commerce, not just for e-commerce sites
From the name, I think many people think that e-commerce functions can only be used on e-commerce sites. In fact, the e-commerce function has been expanded and it has become an extended e-commerce, so it can be used for many genres of sites other than e-commerce sites. The genre of the website that can be used is a site where information is structured and managed by a system using a database or the like.
For example, on a blog or news site , each article can be treated as a product and treated like an e-commerce site. In addition , users and posts can be regarded as products on social network services (SNS) and posting sites . In social network services, users and posts are two completely different genres of products, but with the extended e-commerce function, it is possible to use product categories to handle them separately.
Best Practices When Implementing Enhanced Ecommerce
Implementing enhanced e-commerce is difficult
Although advanced e-commerce enables advanced access analysis, it is necessary to implement a tracking code to make it available. Also, this implementation is not as simple as a typical web marketer can implement, and since it is necessary to acquire information from the system side of the service site, it is necessary to modify the system side. On top of that, advanced customization on the tracking code side is also required.
They require sophisticated implementations, and very little information is available to implement them efficiently. There is a set of implementation guidance in Google’s official help, but even if you implement it according to the guidance, how is it appropriate to repair the system side with fragmentary information and only the tracking code part? is not touched upon.
Based on the knowledge I have cultivated through my involvement in the implementation of enhanced e-commerce, the following is best practice for optimizing the system side, tracking code side, and Google Tag Manager settings. publish in the form
System-side implementation best practices
The role of the system side is to make it possible to efficiently obtain the values that should be sent on the tracking code. Below we introduce the implementation of the system side of the list screen, detail screen, and purchasing process screen. If it is difficult to understand, I think it would be good to analyze the HTML source of this blog.
Implementation of list screen (link to detail screen)
On the list screen,
- Which product is listed for each product listing location and at what number.
- Which product on which product placement was clicked on.
should be able to be efficiently passed to the tracking code. When implementing the system,
- Assign the class “product-link” to the product link.
- Assign the class “product-box” to the parent tag that wraps one item of product information including product links.
- Set the attribute information of the product (product ID, category, product name, etc.) as the data attribute to the tag with the class “product-box”.
- Add the attribute “data-list-name” to each product listing location that bundles multiple product links (TOP carousel banner area, recommendation area, browsing history area, etc.) and set the character string representing the product listing location as the value. do.
Note that In particular,
<div data-list-name="レコメンドエリア">
<ul>
<li>
<div class="product-box" data-id="1" data-name="商品名1" data-category="商品カテゴリ1" data-price="4500">
<h1><a href="商品へのリンク" class="product-link">商品名1</a></h1>
<img src="#" />
<p class="note"><a href="商品へのリンク" class="product-link">詳細を見る</a></p>
</div>
</li>
<li>
<div class="product-box" data-id="2" data-name="商品名2" data-category="商品カテゴリ2" data-price="4000">
<h1><a href="商品へのリンク" class="product-link">商品名2</a></h1>
<img src="#" />
<p class="note"><a href="商品へのリンク" class="product-link">詳細を見る</a></p>
</div>
</li>
</div>will result in markup like We will implement this for all product links.
Implementation of detail screen
On the detail screen,
- which products are being viewed
- Where did you reach the product from which product listing?
- Whether the “Add to cart” button was pressed
should be able to be efficiently passed to the tracking code. When specifically implemented on the system side,
- Assign the class “product-detail” to the parent tag that wraps the product information.
- Set the attribute information of the product (product ID, category, product name, etc.) as the data attribute to the tag with the class “product-detail”.
- Give the class “add-to-cart” to the “add to cart” button.
Please pay attention to the following three points. Explained in source code
<div class="product-detail" data-id="1" data-name="商品名" data-category="商品カテゴリ" data-price="4500">
<h1>商品名</h1>
<img src="#" />
<p>商品詳細</p>
<a class="add-to-cart" href="#">買い物かごに追加</a>
</div>will result in markup like
Implementing purchasing process screens
On the screen during the purchase process,
- A list of the products covered by the purchase process and the quantity of each
- Steps in the current buying process and optional information in that process
- Transaction information upon purchase completion
should be able to be efficiently passed to the tracking code. In particular,
- Assign the class “purchase-product” to each product to be purchased
- Set the attribute information of the product (product ID, category, product name, price, etc.) and the number of purchases as the data attribute in the tag with the class “purchase-product”.
- For information on the purchase process and transaction information, create a tag with the class “purchase-information” and set the information on the purchase process and transaction as the data attribute.
- If necessary, the classes “purchase-product” and “purchase-information” are hidden on the screen using CSS.
Note that. Explained in source code
<div id="purchase-data" style="display: none;">
<ul>
<li class="purchase-product" data-id="1" data-category="カテゴリ" data-name="商品名" data-price="4500" data-quantity="3"> </li>
<li class="purchase-product" data-id="1" data-category="カテゴリ" data-name="商品名" data-price="4500" data-quantity="3"> </li>
</ul>
<p class="purchase-information" data-step="1" data-option="New Register" />
<!-- ステップに合わせて出し分ける
<p class="purchase-information" data-step="2" data-option="Visa" />
<p class="purchase-information" data-step="complete" data-transaction-id="T-0001_0001" />
-->
</div>will result in markup like
Tracking code implementation best practices
Once you have made it this far, you can access all the necessary data using JavaScript, so all you have to do is implement the tracking code for Google Analytics with JavaScript.
This is about 200 lines of JavaScript code, so we have uploaded the source code to Github, so please refer to Github. If the HTML on the website side is implemented as described above, the tracking code part will not need to be changed.
Please download the JavaScript code from Gist on Github and distribute it to all pages using Google Tag Manager.
Google Tag Manager configuration best practices
If it is implemented so far, the necessary value is set at the necessary timing in the dataLayer variable of Google Tag Manager, and the event of Google Tag Manager is set at the timing when you want to send each data. It looks like
After that, create 6 triggers with the following 6 types of event names in Google Tag Manager.
- Impressions
- Product Clicked
- Product Details
- Purchase
- Add to Cart
- Checkout
Finally, run the Universal Analytics Enhanced Ecommerce tag in Google Tag Manager. For the tags to be executed here, it is sufficient to create only one tag whose tracking type is “event” and the extended e-commerce function is enabled. will fire the required tags. Originally, Product Detail and Impressions should be sent together with the page view, but it is written in the help, but there is no problem even if it is sent together with the event like this. I tried to capture the setting screen, so please check it as well.
summary
It’s been a little over a year since the extended e-commerce function was released, but even if you try to implement it based on the information on the web, there is only fragmentary information, and the people on the development side don’t understand Google Analytics and Tag Manager. It can be said that the implementation rate of extended e-commerce is still low.
First of all, I hope that more people will refer to this article and say, “Let’s implement enhanced e-commerce.”
