Compress photo-realistic images to JPG for use on the web

Setup:

Select ‘Save for Web’ and adjust the tab for the ‘2-Up’ display.

Set the compression method to JPEG.

Select the ‘Progressive’ option.

Photoshop Save-for-web

Compressing:

Click on the drop-down to the right of ‘Quality’ so that the slider appears.  Then move the slider all the way to the left so that ‘Quality: 0.’

The image will likely look bad at this point which is expected.

Start moving the slider to the right in small increments.  If the image is large then also use the ‘hand tool’ to inspect different areas of the image.  Try to find areas where the compression is most evident.

Repeat the process of gradually moving the slider to the right and inspecting the image.  Stop when the image is sufficiently beautiful!

In general, starting from maximum compression and then reducing the compression almost always results in a smaller file size than starting with no compression.

Google Tag Manager for BigCommerce

Yes, it IS possible to use Google Tag Manager to implement Google Analytics on a BigCommerce site.

Before we dive in I want to thank one of my developers, Scott Rarden and also Anirudh from Google for their help.

And a huge thanks to Jeremy & the others on the GTM threads.  I’m very new to BigCommerce and the paths they forged were incredibly helpful in coming up with a solution.

Now for the gory details:

As Jeremy mentioned previously you will need to add a new Panel to every page that should include GTM.  The GTM Panel should be placed just after the opening <body> tag.

Create a new file /template/Panel/GoogleTagManagerTag.html

The file should contain the Google Tag Manager code for your site which will look similar to the one below:

 <!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YOURCODE"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-YOURCODE');</script>
<!-- End Google Tag Manager -->

Make sure you use the GTM code that your receive from the GTM website.  Don’t copy/paste the example above.

Once the Panel is created it then needs to be included on every page of your site.

For either method below you will likely need to review all of the template files that a visitor is capable of viewing.

Option 1:

Add the new GTM panel to all of your publicly visible pages by hand. Depending on the design you’re using for your site this can be 55-60 (or more) pages.

Option 2:

If you already have a Panel appearing in the correct spot then we can add our GTM Panel to the existing Panel.

Review your template files.

Open each of the files in the top level of the /template folder and view them in a text editor.

Locate the opening <body> tag.

Determine if there is (or is not) a Panel immediately after the opening <body> tag on all pages.

  • If there IS a Panel immediately after the opening body tag on all pages then you can use Option 2.
  • If there is NOT a panel immediately after then you will need to edit the file and include the Panel by hand.

Option 1 Example:

<body id="home">
    <div class="page">
      %%Panel.Header%%
    %%Panel.HomeSlideShowJavaScript%%

Since there is no Panel immediately after the <body> tag one must be created.  The GTM tag should NEVER be placed inside of a <div> or other tag.  It must reside directly within the <body> tag.

<body id="home">
    %%Panel.GoogleTagManagerTag%%
    <div class="page">
      %%Panel.Header%%
    %%Panel.HomeSlideShowJavaScript%%

Option 2 Example:

<body id="home">
    %%Panel.DrawerMenu%%
    <div class="page">
      %%Panel.Header%%
    %%Panel.HomeSlideShowJavaScript%%

The %%Panel.DrawerMenu%% is in the correct location for the GTM tag.  As long as the %%Panel.DrawerMenu%% appears on all of the publicly visible pages we can simply add our GTM Panel to the existing Panel.

  • edit/customize the existing /template/Panels/DrawerMenu.html file
  • add %%Panel.GoogleTagManagerTag%% to the top of the file.

Before:

<div id="DrawerMenu">
    <div class="inner">
        %%Panel.SideCategoryList%%
        %%Panel.SideShopByBrand%%
        %%Panel.SideCategoryShopByPrice%%
        %%Panel.SideAdditionalInformation%%
        %%Panel.SideAccountNavigation%%
    </div>
</div>
%%Panel.DrawerMenuJavascript%%

After:

%%Panel.GoogleTagManagerTag%%
<div id="DrawerMenu">
    <div class="inner">
        %%Panel.SideCategoryList%%
        %%Panel.SideShopByBrand%%
        %%Panel.SideCategoryShopByPrice%%
        %%Panel.SideAdditionalInformation%%
        %%Panel.SideAccountNavigation%%
    </div>
</div>
%%Panel.DrawerMenuJavascript%%

If you make it through all of the above then Google Tag Manager should be appearing on all of your pages.

The next big hurdle is to accommodate Ecommerce Transaction reporting.

Note: The instructions below are for ‘standard’ Ecommerce tracking.  We’ll have to tackle Enhanced Ecommerce Reporting another day!

Ecommerce Transaction Tracking

In short the existing ‘traditional format’ GA Transaction code needs to be translated into the new ‘dataLayer’ syntax for GTM.  As Jeremy pointed out back on 07-23-2014 it would take some scripting to make this work.  The script below will do the job.

Note: WordPress tends to mess with single & double quote characters.  A text-only copy of the script is available here.

<script type="text/javascript">
var dataLayer = new Array();
// console.log(dataLayer);
function trackGTMEcommerce() {
    this._addTrans = addTrans;
    this._addItem = addItems;
    this._trackTrans = trackTrans;
}

var transaction = {};
transaction.transactionProducts = [];

function addTrans(orderID, store, total, tax, shipping, city, state, country) {
    transaction.transactionId = orderID;
    transaction.transactionAffiliation = store;
    transaction.transactionTotal = total;
    transaction.transactionTax = tax;
    transaction.transactionShipping = shipping;
    // console.log(11)
}


function addItems(orderID, sku, product, variation, price, quantity) {
    transaction.transactionProducts.push({
        'id': orderID,
            'sku': sku,
            'name': product,
            'category': variation,
            'price': price,
            'quantity': quantity
    });
    // console.log('a')
}

function trackTrans() {
    transaction.event = 'bcTransactionComplete';
    // console.log(transaction);
    dataLayer.push(transaction);
}

var pageTracker = new trackGTMEcommerce();
</script>

For an easy setup:

Go to Settings => Web Analytics and enable Google Analytics.
Then paste the script into the ‘Tracking Code’ box for Google Analytics

For a more precise setup:

This script really only needs to appear on the /finishorder.php page.
Thus you could put it into the <head> section of just that page.

Caveat: You will need to put something in the Google Analytics ‘Tracking Code’ box under Settings => Web Analytics in order for the Ecommerce data to appear.
A comment works fine.

IMPORTANT:

You will need to trigger the GA Transaction tag in GTM using a custom event.
In the example script above the event name is set on the line:

transaction.event = 'bcTransactionComplete';

You will need to configure GTM to fire the GA Transaction tag on the ‘bcTransactionComplete’ event.

Update the “hosts” file on Win7

First, some prep work

Since it’s likely that you’ll use this technique more than once some preparation will ensure things go more smoothly the NEXT time you have to edit your hosts file.

If you pin the Notepad application to your taskbar it will be much easier to locate & run as ‘Administrator.’

Just find the Notepad application & run it normally. Searching for ‘notepad’ in the Start Menu is an easy way to locate the Notepad application.

find-and-open-notepad

Once Notepad is running right-click on the Notepad icon in the taskbar.  Then select ‘Pin this program to the taskbar’ from the menu.  The Notepad icon should then remain on the taskbar even when Notepad is closed.

pin-notepad-to-taskbar

Exit Notepad to confirm that the icon stays in place.  And then we can get on with editing the hosts file.

Opening Notepad as administrator

The key issue with editing the hosts file is that you need to have Administrator rights in order to ‘Save’ the changes that you’ll make to the file.

To run Notepad as Administrator right-click on the taskbar item. This will display a pop-up menu that has a smaller Notepad icon. Right-click on the smaller Notepad icon and then choose ‘Run as administrator’ from the menu.

run-notepad-as-admin

If everything goes well you’ll see a Windows dialog box asking you to confirm.  Choose ‘Yes’ and Notepad should open.

Opening the hosts file in Notepad

The hosts file is a hidden file in Windows and is not typically visible. There are ways to make it visible but this typically isn’t necessary.

The hosts file is at the location below on most all Windows machines. Go to ‘File => Open’ and copy paste the following line; then click the ‘Open’ button.

hosts-location

Editing the hosts file

Make sure to use a plain text editor like Notepad when editing the hosts file. (i.e. not Word)

In the hosts file any line that begins with the pound sign (#) is considered blank. You can use this to turn an override on or off easily.

Add the IP address and host name to the file with each on a single line. The IP and name can be separated by spaces and/or tabs.

Edits to the hosts file are active as soon as the file is saved. There’s no need to reboot your computer. Though you may need to refresh your browser and/or clear your browser cache to make sure you get the correct domain resolution.

hosts-file

That’s it!

One final tip: If you only use Notepad for editing your hosts file it should always start in the correct folder.  (If you’re using Notepad for anything else then you should probably look into a more serious text editor like Notepad++ or UltraEdit.)