(734)545-8017

The Human Element Blog

Implementing Google Trusted Stores for Magento

Posted Mar 06, 2015 by

As the web evolves so must your site when it comes to gaining the trust of your customers. One easy way to grab your customers’ trust, aside from having an SSL, is to also have the Google Trusted Store Badge.

Google Trusted Stores - Kazoos!

Where else would I get my kazoo fix!?

One of the benefits of the Google Trusted stores is the checkbox on your Shopping ads showing your Trusted status. Google will even reimburse a dissatisfied customer up to $1,000 if your store breaches this Google-bestowed trust.

Implementation of Google Trusted Stores for Magento isn’t difficult as long as you know how to edit the correct files. Unfortunately, it isn’t just like any Javascript-based badge, where if you add this code it will show up. You will have to go through a 30-day qualification period. During that time, Google will take all the data sent over from the badge Javascript and evaluate your site. If your site meets Google’s strict rules, the badge will then appear in either the user-defined location or the floated position of bottom right or bottom left.

Now onto the implementation side of Google Trusted Store Badge and your site. For this implementation I will be focusing on how to get the most from implementing this on the Magento Enterprise eCommerce platform.

1.) Check the Doctype of your pages

You will want to check that your site is set to HTML5 Doctype. To do this you will want to open your site in Chrome, and under the elements tab you will look for the following code to be at the top.

<!DOCTYPE html>

Although it doesn’t actually say “5” in this code, it’s understood that this means HTML5.

2.) Set the Position on the Google Trusted Stores Badge

If you are setting up a custom position for the Google Trust Store Badge, add the following code to the correct spot in the template where you would like the Badge to show up.

<div id="GTS_CONTAINER"></div>

3.) Add the Google Javascript

The necessary Javascript code to get Google to recognize your Magento store and begin the evaluation period to eventually get the Badge. You will want to add this code before the closing tag. For Magento, I went ahead and added a couple of the optional pieces to get the best information from your site. To retrieve your Google Trusted Store ID, you will need to log into your Google Analytics dashboard and grab it from your admin. The optional pieces are google_base_country, google_base_language and google_base_offer_id. The google_base_offer_id is the hardest to implement as it is only relevant, if you are on a product page. I first implemented a Mage call to check if the current page is a product page.

For example:

<?php $product  = Mage::registry('product'); ?>

Then what I did was within the google_base_offer_id I ran a simple php if empty.example:

<?php if(!empty($product)){ echo $product->getSku(); }; ?>

The complete code is below for a customized position.

            <!-- BEGIN: Google Trusted Stores -->
            <script type="text/javascript">
                <?php $product  = Mage::registry('product'); ?>
                var gts = gts || [];

                gts.push(["id", "STORE_ID"]);
                gts.push(["badge_position", "USER_DEFINED"]);
                gts.push(["badge_container", "GTS_CONTAINER"]);
                gts.push(["locale", "en"]);
                gts.push(["google_base_offer_id", "<?php if(!empty($product)){ echo $product->getSku(); }; ?>"]);
                gts.push(["google_base_country", "US"]);
                gts.push(["google_base_language", "en"]);

                (function() {
                    var gts = document.createElement("script");
                    gts.type = "text/javascript";
                    gts.async = true;
                    gts.src = "https://www.googlecommerce.com/trustedstores/api/js";
                    var s = document.getElementsByTagName("script")[0];
                    s.parentNode.insertBefore(gts, s);
                })();
            </script>
            <!-- END: Google Trusted Stores -->

4.) Setting the Google Trusted Store Badge to the Bottom Left/Right

Now if you want the floating Google Trusted Store Badge in the bottom left or right you will want to use the code below without the div container from above. You will change the badge_position to either BOTTOM_RIGHT or BOTTOM_LEFT.

 

            <!-- BEGIN: Google Trusted Stores -->
            <script type="text/javascript">
                <?php $product  = Mage::registry('product'); ?>
                var gts = gts || [];

                gts.push(["id", "STORE_ID"]);
                gts.push(["badge_position", "BOTTOM_RIGHT"]);
                gts.push(["locale", "en"]);
                gts.push(["google_base_offer_id", "<?php if(!empty($product)){ echo $product->getSku(); }; ?>"]);
                gts.push(["google_base_country", "US"]);
                gts.push(["google_base_language", "en"]);

                (function() {
                    var gts = document.createElement("script");
                    gts.type = "text/javascript";
                    gts.async = true;
                    gts.src = "https://www.googlecommerce.com/trustedstores/api/js";
                    var s = document.getElementsByTagName("script")[0];
                    s.parentNode.insertBefore(gts, s);
                })();
            </script>
            <!-- END: Google Trusted Stores -->

5.) Implement Google Trusted Stores in Checkout

A secondary part of the Google Trusted Store is tracking all of your sites sales. For this section I can show you how to implement this within a Magento installation. This piece of code will track is every finished checkout. This extra piece of code will help you track sales through Google and also help significantly with the Google Trusted Store qualification period. You will want to add the code below to your success.phtml page.

This first section of code will actually grab all the information you need for the google script.

<?php
$orderId = $this->getOrderId();
$order = Mage::getModel('sales/order')->loadByIncrementId($orderId);
$customer = Mage::getModel('customer/customer')->load($order->getCustomerId());
$address = $order->getShippingAddress();
$backorder = false; // some backorder logic
$download = false; // some download logic
$shipDate = new Zend_Date(); // some logic to determine ship date
?>

Below is the actual google code that is needed to transfer all of the data. You will notice in the order info a foreach loop that will handle the possibility of orders of more then one item. You will have to insert your Site Url into the gts-o-domain. Insert this piece of code after the code from above and enjoy the perks of Google Trusted Stores!

<!-- START Trusted Stores Order -->
<div id="gts-order" style="display:none;">

    <!-- start order and merchant information -->
    <span id="gts-o-id"><?php echo $orderId; ?></span>
    <span id="gts-o-domain">SITE_URL</span>
    <span id="gts-o-email"><?php echo htmlentities($customer->getEmail()); ?></span>
    <span id="gts-o-country"><?php echo htmlentities($address->getCountryId()); ?></span>
    <span id="gts-o-currency">USD</span>
    <span id="gts-o-total"><?php echo $order->getGrandTotal(); ?></span>
    <span id="gts-o-discounts">-<?php echo $order->getDiscountAmount(); ?></span>
    <span id="gts-o-shipping-total"><?php echo $order->getShippingAmount(); ?></span>
    <span id="gts-o-tax-total"><?php echo $order->getTaxAmount(); ?></span>
    <span id="gts-o-est-ship-date"><?php echo $shipDate->toString('yyyy-MM-dd'); ?></span>
    <span id="gts-o-has-preorder"><?php echo $backorder ? 'Y' : 'N'; ?></span>
    <span id="gts-o-has-digital"><?php echo $download ? 'Y' : 'N'; ?></span>
    <!-- end order and merchant information -->

    <!-- start repeated item specific information -->
    <?php foreach ($order->getAllItems() as $item): ?>
        <span class="gts-item">
          <span class="gts-i-name"><?php echo htmlentities($item->getName()); ?></span>
          <span class="gts-i-price"><?php echo $item->getBasePrice(); ?></span>
          <span class="gts-i-quantity"><?php echo (int)$item->getQtyOrdered(); ?></span>
          <span class="gts-i-prodsearch-country">US</span>
          <span class="gts-i-prodsearch-language">en</span>
        </span>
    <?php endforeach; ?>
    <!-- end repeated item specific information -->

</div>
<!-- END Trusted Stores -->

After this is all complete, you should notify Google that you’re ready to begin your 30-day testing period. During this trial, your eCommerce customers may be invited to complete a survey after completing their order. If Google approves your store in 30 days, then the badge will appear in your template.

We've just implemented this for one of our favorite clients, but they haven't completed their 30-day testing period. In Part 2, we will update you on the full breadth of their Google Trusted Stores experience.

Posted By

Technical Lead & Nerd Trainer

Comments (6)

Kyle posted

Google is telling me that I have an "incorrect number format." All of my values have 4 decimal places and they should only have 2. Do you know how to fix this?

Kyle posted

For anyone else experiencing the issue with formatting the number of decimal places, here is the fix for the 5 items that need formatting: getGrandTotal(),2); ?> getDiscountAmount(),2); ?> getShippingAmount(),2); ?> getTaxAmount(),2); ?> getBasePrice(),2); ?> We ship our items the next business day. To add days to the estimated ship date for purchases made on Friday or Saturday, here's the code I used:

    Brian Tajer posted

    Hi Kyle, You mentioned a piece of code for next business day, I was curious what that code is, as I do not see it in your comment.

Slavik posted

I use Magento with RWD theme and I can't find success.phtml page in /app/design/frontend/rwd/default/template/checkout/ There is onepage.phtml and cart.phtml and folders. With new theme I don't know where I can paste Checkout code...

Nick posted

I have the code for the badge implemented but it does not show up under testing for any browser.. any ideas?

Ari posted

I've read a few tutorials that state the block of javascript code needs to be placed on every page. Your tutorial states that you should add the block of code before the closing tag. However, I can't determine which exact pages need to have this code added.

Post a comment