Inspiring Desktop Wallpapers To Welcome 2018 (January Edition)

The new year is an opportunity to start over fresh, to overcome routines and rethink processes. And, well, despite all the New Year’s resolutions you might have made, sometimes it’s the small things that work wonders. A tidy desktop and a new, inspiring wallpaper, for example, that caters for a little inspiration shot when you need one.
To kick off 2018 with wallpapers that are a bit more distinctive as the usual crowd, artists and designers from across the globe once again challenged their artistic skills and designed unique desktop wallpapers for you to indulge in.
Source: Smashing Magazine

Making The Transition From After Effects To CSS Transitions And Keyframes

Websites are looking more and more like mobile apps. Users are also increasingly expecting a more app-like experience. From push notifications to offline mode, native web apps are getting there.
Once web apps function like native apps, the design interactions would also change to address the use case — namely, the ubiquity of animations. Animations drive interactions in all of our favourite apps, from Uber to Lyft and Snapchat to Instagram.
Source: Smashing Magazine

How to Send Emails in Laravel

In this article, we’re going to explore the Mail API in the Laravel web framework. Laravel takes advantage of the popular SwiftMailer library, which is easy to use and comes with a variety of email drivers to choose from. In the latter stages of the article, we’ll go through an in-depth demonstration of the concepts discussed in the first half of the article.

Setting Up the Prerequisites

Laravel implements a wrapper on top of the SwiftMailer library that makes email management very easy to configure and use at the same time. You can find the default mail settings at config/mail.php.

When it comes to sending mails, Laravel supports different drivers to choose from. As you can see, the default MAIL_DRIVER is set to smtp.

If you are going to use the smtp driver to send mails then you’re also required to set other related settings like MAIL_HOST, MAIL_PORT, MAIL_ENCRYPTION, MAIL_USERNAME, and MAIL_PASSWORD.

On the other hand, if you are going to use the sendmail driver, then you want to make sure that the sendmail system path is set to the correct value in the config/mail.php file.

You can also set the from address that will be used while sending mails under the from key. And finally, if you want to use Markdown-based email rendering, you can set those settings under the markdown key.

The cherry on the top is that you could also use third-party email service providers like Mailgun, Mandrill, SES, and SparkPost. If you are using one of those services, you need to make sure that you set the corresponding settings in the config/services.php file.

So that was a basic introduction to the mail API related settings in Laravel. From the next section onwards, we’ll go through a custom example that shows you how to send emails.

Create the Mailable Class

In this section, we’ll create the mailable class, which will be used to send emails. The mailable class is responsible for sending emails using a mailer that’s configured in the config/mail.php file. In fact, Laravel already provides an artisan command that allows us to create a base template.

That should create a blank email template at app/Mail/DemoEmail.php, as shown in the following snippet.

Let’s replace the contents of that file with the following.

There are two important methods the mailable class generally implements—__construct and build. The __construct method is used to initialize objects that you’re supposed to use in the email template. On the other hand, the build method is used to initialize more email-specific values like from, view template, attachments and similar.

In our case, we’ve passed the $demo object as a constructor argument, and it’s assigned to the demo public property.

In the build method, we’ve initialized an email-specific configuration.

  • The from is used to set an email address that’ll be used as a from address.
  • Using the view method, you can set the email template that will be used while sending an email using this mailable. In our case, we’ve set it to mails.demo, and it means that you need to create a view template file at resources/views/mails/demo.blade.php.
  • Next, the text method is used to set up the plain text version of an email template.
  • As we’ve just discussed, the __construct method is used to set up objects that’ll be used in the email template, you can also use the with method that allows you to set the view data of a message.
  • Next, we’ve used the attach method to attach an image with a message.

Of course, we need to create email templates that we’re supposed to use while sending emails. Go ahead and create a file resources/views/mails/demo.blade.php as shown in the following snippet.

Also, let’s create the plain text version of that file at resources/views/mails/demo_plain.blade.php.

So that was the mailable class at your disposal, and we’ve not done yet as we need to use the Mail facade to actually send mails. In the very next section, we’ll explore how you can use the Mail Facade to send emails using the DemoEmail Mailable class that was just created in this section.

Wrapping Up

In this section, we’ll create an example to demonstrate how you can use the Mailable class that was created in the last section.

Let’s create a controller file at app/Http/Controllers/MailController.php with the following contents.

It’s important to note that we’ve included the IlluminateSupportFacadesMail Facade that will be used to send an email. In the send method, the following statement is responsible for sending an email by initialising the AppMailDemoEmail Mailable in the first place.

The to method of the IlluminateSupportFacadesMail Facade returns an instance of the IlluminateMailPendingMail class, which already contains an appropriate mailer configured in the config/mail.php file.

And finally, we use the send method of the IlluminateMailPendingMail class that sends an actual email.

To test it, let’s add an associated route in the routes/web.php file.

And with that in place, you can run the URL to see if it works as expected.

On the other hand, if you want to test your email templates quickly, without sending actual emails, there’s a provision in Laravel that allows you to log all outgoing emails.

To achieve that, you need to set the value of MAIL_DRIVER to log in the config/mail.php file. Next, you could run the aforementioned URL and inspect the log file to check if the email template was logged there.

If everything goes fine, you should see an email being logged to the storage/logs/laravel.log file.

That’s pretty much it as far as the mail feature is concerned in Laravel, and that concludes this article as well.


Today, we went through the mail API that comes built into Laravel, and it also supports a variety of drivers as well.

Starting with basic concepts, we implemented the mailable class that is an essential element in the mail API in Laravel as we moved on. At the end, we also tested the mailable class by creating a custom controller to see if it actually works.

If you’re just getting started with Laravel or looking to expand your knowledge, site, or application with extensions, we have a variety of things you can study in Envato Market.

I would love to know your feedback in the form of queries and comments using the feed below!

Source: Nettuts Web Development

A Sneak-Peek Inside The Southeast Asian Web Community

A few weeks ago, Vitaly Friedman (co-founder of this little magazine) and I had the pleasure to join Mozilla’s Developer Roadshow, traveling through four countries in Southeast Asia in just two weeks. We visited cities that are buzzing with life and met people who share our passion for the web. Our mission: To get up close with the Southeast Asian web community. We wanted to learn how different local communities are compared to Europe and the US.
Source: Smashing Magazine

Standing Out From The Crowd: Improving Your Mobile App With Competitive Analysis

The mobile app industry is arguably one of the most competitive industries in the world. With around 2.8 million apps available for download in the Google Play store and 2.2 million in Apple’s App Store, getting your app seen, let alone downloaded, can be difficult.
With such fierce competition, it is important to make your app the best it can be. One of the most productive ways to do this is by conducting a competitive analysis to see where your competitors are at, what is working for them, what isn’t and what you can do better.
Source: Smashing Magazine

Productivity Tips And Tricks: The Community Shares Its Piece Of Advice

Productivity tips always make for a popular topic for an article, as everyone is looking for the silver bullet, that one weird trick that turns you into a productivity machine. However, the tips that work well for one person may not work so well for another.
We asked the community on Twitter and Facebook to share their best productivity tips, and in this article I’m going to round these up alongside some things I’ve learned that work well for me.
Source: Smashing Magazine

Components in Vue.js


Vue.js components are important to understand as you work with Vue.js. In this tutorial we are going to dig into Vue.js components, understanding the basics and applying them to an application. Let’s get started.

What Are Components?

Components enable us to break the complexity of an application into tiny chunks. For example, a typical web application will have sections like header, sidebar, content, and footer.

Vue.js allows us to break each of these sections into separate modular code called components. These components can be extended, and then attached to the application you are working on. Components are a great way of reusing your code throughout your application.

Let’s say you have a blog application, and you would like to display a list of blog posts. Using a Vue component, you can do:

Vue handles the rest.

Create a simple HTML page that mounts a Vue instance to your DOM element. You will use this to learn about components. Here is what the sample HTML page should look like:

In the above, you created a simple Vue instance, with no component factor in the code. Now if you want the welcome message to appear twice, how do you do it? Try getting that to work.

Your guess might be to have the div where the Vue instance is mounted appear twice. That will not work. Try changing it from id to class so you have this:

It still will not work!

The only way to get around this is to create a component. How do you create a component?

Components are created using the Vue.component() constructor. This constructor takes two parameters: the name of your component (which can also be called the tag name), and an object containing options for your component.

Let’s create a component using what you have above.

In the above, the component name is called welcome-message. Your component can have whatever name you choose. Yet it is important that the name does not interfere with any HTML tags, as you will not want to override it.

The options object passed to the constructor contains the data and template. When creating components, your data should be a function, as you can see above. The data being held should then be returned as an object.

In situations where there are no data to pass, you can pass only the template like so:

With that done, you can use your component in your application by calling it like a regular HTML element using the name you passed to the constructor. It is called like this: <welcome-message></welcome-message>.

To output the template more than once, you call the component as many times as you want—as I did below.

From the above, this will display the welcome message four times.

Store Data in Components

Above I mentioned that data has to be a function, and the information it holds has to be returned as an object. Why is it like that?

When returned data is not an object, the components that make use of that data share the same source: shared data. Thus a change in data for one component affects the other component. This is not the same when the data is returned as an object.

It is important to see how this works practically. First, let’s see a situation where data is returned as an object.

Can you guess what is happening above?

There are two components, and both components share the same data source as the data is not returned as an object. How do you prove I am right? When you view the above page from your browser, you will see that a change in one component results in a change in the data of the other component. How is it supposed to be?

Like this:

Here the data is returned as an object, and a change in one component does not affect the other. The function is executed for the individual component. When building your applications, it is important you do not forget this.

Creating and Using Components

Using the lessons learned thus far, let us implement this in a new Vue.js project started from scratch using vue-cli. If you do not have vue-cli installed on your machine, you can do that by running:

Start your new Vue.js project:

Navigate to your application, install the dependencies, and run your dev server using the commands below.

First, you’ll rename the HelloWorld component that was created when you initialized your application to Hello.vue. You’ll then register this component as a global component to be used in your application.

So your Hello component should look like this.

Nothing serious is happening here. You have your welcome text displaying the welcome message and a name which is passed as data. When the button underneath the welcome message gets clicked, the changeName method is called. This changes the name from Henry to Mark.

To use this component globally it has to be registered. Can you guess where that will be done? If you said main.js, you are absolutely correct.

To register a component, you import it and then use the Vue.component() constructor to set it up. Try that on your own.

I bet you got that to work. Here is how things should look in your main.js file.

Nothing new here except the line that imports your Hello component. The component is then registered using the constructor. Finally, for this part, the component needs to be displayed using the component name you entered. In this case, the component is display-name. This will be done in your App.vue file.

Open up src/App.vue and make it look like this.

With your server on, point your browser to http://localhost:8080. Click on the button and the name should change.

Let’s see how to use a component locally.

Create a file called Detail.vue in your components directory. This component will not do anything special—it will be used in the Hello component.

Make your Detail.vue file look like this.

To use it in the Hello component, you start by importing it, as you did with the Hello component. Next, you register it, but this time you will not make use of the Vue.component() constructor.

You register it using the components object inside your exports. The name of the component which will be used as the element tag has to be passed as a value to the object. With that done, you can now use the element tag to output the component.

To understand all that, here is how the Hello component should look.

Refresh your page to see the new page.

Scoping Component Styles

Vue.js allows you to give global and local styling for your components. What do I mean? There might be scenarios where you want certain elements in a component to be styled differently from their counterparts in another component. Vue.js has got you covered on that.

A good example is available in the little app you just built. The styles in your App.vue are global; how is that possible? Open your App.vue, and the style section looks like this.

This is different from that of Detail.vue, which looks like this.

Adding scoped to the style tag makes all the difference. Try editing one of the component styles by removing scoped, and you will see how that works out.


That was a long one, and I trust you enjoyed it.

Now you know how to work effectively with components. You understand how to construct a component in an existing application. When working with vue-cli, you can also create and use components—locally and globally. When you want to use a particular style for a component, you saw how to do that using scoped.

You can now go on to build a complex Vue.js application that uses components. Understand that Vue.js allows you to reuse code—your headers, footer, login panel, and search bar can be used as components.

Source: Nettuts Web Development

5 A/B Testing Tools for Making Data-driven Design Decisions

A/B testing is becoming more and more common as teams realize how important it is for a website’s success. The Web is a huge, competitive marketplace with very few (if any) untapped markets, meaning that being successful by offering something unique is rare. Much more common is that you’re competing for the business of your customers with several other websites, so attempting to convert every visitor into a customer or upselling/cross-selling your services better could make all the difference to your bottom line.

Due to this, the market for A/B testing tools and CRO (conversion rate optimization) tools is growing exponentially. But choosing one can be quite a time-consuming challenge, so in this article I’ll compare the best A/B testing tools to help you decide which is most suitable for you or your team. If you want to get up to speed with A/B testing and CRO, check out our recent Introduction to A/B Testing article.

TL;DR: A/B testing is about experimenting with visual and content changes to see which results in more conversions. A/B testing often follows usability testing as a means of testing a solution to a flaw in the user experience identified using metrics like bounce rate in an analytics tool like Google Analytics, and thanks to the depth and quality of A/B testing tools available now, A/B testing is accessible to designers as well as marketers and developers.

1. Optimizely

  • Summary: the leading A/B testing tool in 2017
  • Price: contact sales team
  • Who it’s for: designers, marketers and developers collaborating


Optimizely is one of the leading — if not the leading — A/B testing and CRO tools on the market today. It offers analytics tools to suit users of all levels, and a multitude of A/B testing tools. (You could think of it as the Google Analytics of A/B testing, with a much simpler user interface.)

Consider this scenario: You have an ecommerce store built with Magento. You’re aware that in certain cases it may benefit stores to add a one-step checkout solution instead of the standard multi-page checkout, but you’re not sure if your store fits that use case. You need to test both options and compare the results with/without the one-step checkout experience. You know that running two versions of the checkout simultaneously requires changes to the code, which is a complex matter.

With Optimizely, you can send a certain amount of your users to a totally separate checkout experience to collect conversion data. If the experiment yields negative results, you delete the experiment and the original checkout web page still exists and works fine. No harm done.

With their Web Experimentation tool, which offers an easy-to-use visual editor to create A/B tests without requiring a developer (optional), the ability to target specific user types and segments, and create experiments on any device, Optimizely has all your bases covered.

Although you can run A/B tests without a developer, your variations can be more targeted (for example, your variations can go beyond color, layout and content changes) if you have the skills and/or resources to develop custom experiments with code. By integrating your A/B tests into your code, you can serve different logic and test major changes before pushing them live.

Also, if your product extends beyond the web, Optimizely works with iOS, tvOS and Android apps. Optimizely’s Full Stack integrations makes it possible to integrate A/B tests into virtually any codebase, including Python, Java, ruby, Node, PHP, C#, Swift and Android.

2. Google Optimize

  • Summary: A/B testing that seamlessly integrates with Google Analytics
  • Price: free
  • Who it’s for: anyone, being the easiest to learn of the bunch

Google Optimize

Google Optimize is a free, easy-to-use tool that integrates directly with your Google Analytics Events and Goals to make A/B testing quick and easy! It’s ideal for traditional A/B testing, focusing on comparing different CTA (call to action) elements, colors and content.

Developers aren’t required for implementing Google Optimize, since it’s as simple as adding a line of JavaScript to your website and then customising your layout with the visual editor. With this you can change the content, layout, colors, classes and HTML of any element within your page.

It’s not as sophisticated as Optimizely, since it doesn’t allow you to create custom experiments with code/developers, but it’s free. It’s great for those starting out with A/B testing.

For each Google Optimize experiment, you’ll need to specify which Google Analytics Goals or Events will be the baseline for your A/B tests. For example, if you were A/B testing a product page, you could use an “Add To Basket” event that you’ve defined in Google Analytics to evaluate which of your variations converts the best. The Google Analytics report then gives you a clear indication of which variation converts best. It’s ideal for those on a low budget!

Just don’t get carried away, as Google famously once did, by testing 40 different shades of blue to see which converted best!

Continue reading %5 A/B Testing Tools for Making Data-driven Design Decisions%

Source: Sitepoint

10 Best HTML5 Sliders for Images and Text

HTML5 enables users to have a better and more consistent web experience across several devices. 

Considering that smart devices of varying screen sizes and resolutions are the number one way that most people now access the web, if you have image-rich content or want to present key text in an interesting and exciting way on your website, then you just can’t go wrong by using an HTML5 slider. 

Because there are such a large number of sliders out there to choose from, I’ve pulled together, just for you, a list of the 10 best HTML5 sliders for images and text available at CodeCanyon.

1. Ultimate
3D Carousel

If you’ve ever seen
or used an actual slide carousel, you’ll appreciate the design and aesthetics
of the Ultimate
3D Carousel
. This carousel slider allows you to display multimedia content
with a unique 3D layout that mimics the carousels of film photography days. 

There are a number of effects you can apply to your carousel style if you
choose, and if you prefer a more traditional slide effect, you can also opt for
that instead of the carousel style.

Ultimate 3D Carousel

The carousel supports images, MP4
videos, MP3 audio, Google Maps, and more. It runs on all major
browsers and uses a responsive layout with auto-scale function so that it works
well on all mobile devices.

2. HTML5
Gallery Slideshow

Gallery Slideshow
is an excellent choice for showing off your images and
text in a slider format. The slideshow’s main selling point is that it is super
easy to use. Just add it wherever you want it to appear on your website, and it
will adapt its size to the parent container, i.e. the div or other HTML tag. 

HTML5 Gallery Slideshow

Another great feature is that you can have as many galleries on the same page
as you want, each with its unique set of images and settings. 

The plugin is
also easily customisable. You can change the colour theme and modify the
buttons and other aspects, in order to integrate it seamlessly into your site. The
slideshow has been coded and optimised to run seamlessly on mobile devices as

3. CCSlider

The CCSlider
offers users a number of options of slider styles, each of which can
be customised in numerous ways. You have the choice of 14 3D transitions and 16
2D transitions in total, all of which can be programmed to play automatically,
manually, or both.

CCSlider Plugin

Captions can be added to each slide, and they can have animated transitions or none at all. The sliders are fully responsive so they work well on mobile devices and support touch gestures.

4. HTML5
Fullscreen Gallery

Fullscreen Gallery
was created specifically for showcasing great
photographs. The gallery is super easy to incorporate into your existing
website and will maintain the correct aspect ratio of all photographs when
resizing the browser window. 

HTML5 Fullscreen Gallery

You can add
titles and descriptions if you wish, and all colours can be altered via
the CSS stylesheet. 

For those who want music with their sliders, this gallery comes
with piano music played via the HTML5 audio tag, which falls back to Flash music
player for incompatible browsers.

5. CSS3
Cube Slider

If you’re looking
for a slider with a bit of a difference, check out the CSS3
Cube Slider
. This slider shows off your images in a gorgeous slider form
like the other sliders here, but it does so by transforming your photos into a
choice of six cool 3D cubes as they transition.

 CSS3 Cube Slider

The plugin works best in Chrome,
Firefox, and Safari browsers, but if the browser doesn’t support CSS3 then the
slider falls back to the standard vertical or horizontal slide transition. The
plugin is responsive and will adapt to any screen size for the user’s devices.

6. HTML5 Responsive Slider Gallery

HTML5 Responsive Slider Gallery is a wonderful tool that image-rich site
owners will want to get their hands on to show off their images to their best

You just have to
check out the live preview for the HTML5 Responsive Slider Gallery to understand
why it’s a bestseller at CodeCanyon. 

HTML5 Responsive Slider Gallery

The slider gallery will adapt both
height and width to any space that you added it to based on the parent
container. It uses a graphics processing unit for peak performance on both your
desktop and mobile devices, comes in three different styles, supports multiple
galleries on the same page, and is highly customisable.

7. HTML5 Canvas Carousel

The HTML5 Canvas Carousel gives you another great option to display
your images on your website. This 3D photo gallery offers six different options
for presenting your images. 

Features include touch-screen navigation support
for mobile, support for PNG, JPEG and GIF image files, ability to set the
carousel position, and the possibility of featuring multiple carousels on the same
page of your website. 

HTML5 Canvas Carousel

The carousel is highly customisable, and all options can be
modified inside the XML file. It is optimized for both Android and iOS mobile
devices, and the download file comes with a comprehensive help file explaining all
configuration tags and installation.

8. Ultimate
Media Gallery

The Ultimate
Media Gallery
is unique among the sliders in this list, because it can
display not just images but video and audio files from a number of external
content sources including YouTube, Vimeo, Google Drive media, Podcast, and SoundCloud.  

Ultimate Media Gallery

This highly customisable gallery is fully
responsive and mobile friendly. It takes full advantage of Font Awesome Library
icons, and all demo examples are included in the download package for
quick and easy setup.

9. HTML5
Canvas Cover Flow

Canvas Cover Flow
is a 3D photo gallery that takes its inspiration
from the Mac Finder viewer of the same name. The slider has tons of features and
allows you to present your images in any way you want: horizontal, vertical,
oblique, etc. Alternatively, you can make use of the predefined movements and
styles if preferred.

HTML5 Canvas Cover Flow

In addition, almost
every aspect of the slider including colours and graphic elements can be
customised to fit your site, and all the options can be easily modified from the
configuration XML file, making maintaining the carousel much easier.

Optimised for mobile
devices, it not only runs on them, but acts like a native app where you
can touch, drag, and rotate the controls.


A modernist take on the slider, AZEXO Slider is
ideal for those who have a minimalist aesthetic and are looking for a clean yet
elegant way to display their images. 

AZEXO Slider

Text can be added over every image, making
the slider ideal for presentations that include quotes or important text. 

The transition
sequence can be customised, and the slider is easy to incorporate into your
website with the addition of the “azexo-slider” class to DIVs which contain images.


These 10
best HTML5 sliders for images and text are
by no means the only ones
available at Envato Market. So if you haven’t found anything
here that meets your needs, we have plenty of other great options on offer.

And if you want to improve your HTML5 skills, check out our
ever so useful free HTML5

Source: Nettuts Web Development

How to Track Ecommerce Transactions with Google Analytics

Google Analytics is a really useful tool for tracking visitors on your website, but few developers go beyond adding the standard tracking code, which consists of a JavaScript snippet.

Other than custom Events (see the link above if you’re curious what Events are), we can also track ecommerce transactions in Google Analytics using some extra code.

Why Track Ecommerce Transactions in Google Analytics?

Most ecommerce systems offer detailed transaction statistics, but you can’t necessarily relate them to sessions, devices, demographics or other important metrics. For example, was an increase in sales caused by UX improvements, a successful marketing campaign, or seasonal variations? Who knows.

Recording transactions in Google Analytics means that:

  • product and user reports are richer and more insightful
  • you can relate transactions directly to AdWords and other campaigns systems
  • you can assess the success of campaigns and concentrate on those that lead to a high return on investment
  • you can award access to these reports to those in your company without having to add them to the ecommerce system.

Let’s dive in.

The Overall Concept

Typically, your users will add items to a cart, check out, possibly register, pay an amount, and then be redirected to a confirmation screen. The transaction details will then show up in Google Analytics, once the user has officially checked out.

Ecommerce transaction data is usually stored in your back-end system or the back-end system of a payment gateway. For this information to show up in Google Analytics, we need to update our JavaScript code so Google Analytics can track this data too.

How to Enable Ecommerce Tracking

Proceed to the Admin area (cog icon) on the left-hand side, select your PROPERTY (your website), and then select Ecommerce Settings. Switch the “Status” to ON.

Note: the Related Products feature was deprecated in April 2017, so avoid this entirely.

Enhanced Ecommerce Settings allows you to record product impressions, promotions and actions such as coupon usage. I recommend that you implement standard ecommerce tracking first, then consult the Enhanced Ecommerce Documentation when you want to move on to more advanced ecommerce tracking later down the line.

Finally, open the View Settings menu and change the Currency displayed as value if necessary.

Enable Ecommerce Transactions

Next, use this snippet to enable ecommerce transactions:

ga('require', 'ecommerce');

Note: this must be run after the page tracking snippet and before any ecommerce functionality is used.

Starting a New Transaction

Next, the transaction is initiated with this JavaScript code:

ga('ecommerce:addTransaction', {
  'id': '[transactionId]',
  'affiliation': '[storeName]',
  'revenue': '[totalCost]',
  'shipping': '[shippingCost]',
  'tax': '[taxCost]',
  'currency': '[currency]'

Let’s look at each of the lines in this object individually …

[transactionId] (required)

The unique transaction identifier, e.g. 'ABC-123'.

[storeName] (optional)

The affiliation or store name, e.g. 'My Online Shop'.

[totalCost] (optional)

The total cost including shipping and taxes. A string-encoded number without currency symbols must be used, e.g. '12.99'.

[shippingCost] (optional)

The (numeric) cost of shipping, e.g. '2.99'.

[taxCost] (optional)

The (numeric) tax, e.g. '1.64'.

[currency] (optional)

We already set up the default currency earlier, but you can alternatively specify a 3-character ISO 4217 country code such as EUR (Euros) or GBP (British Pound) if the shopper opts to pay using a different currency.

Adding Items to a Transaction

Items are added to an existing transaction with this snippet:

ga('ecommerce:addItem', {
  'id': '[transactionId]',
  'name': '[productName]',
  'sku': '[productCode]',
  'category': '[categoryName]',
  'price': '[price]',
  'quantity': '[quantity]'

Again, let’s look at each of the lines in this object individually …

[transactionId] (required)

The unique transaction identifier, e.g. 'ABC-123'. This must match the code used in the transaction above, to clarify that this item relates to the basket the user already has.

[productName] (required)

The product name, e.g. 'mens blue shirt'.

[productCode] (optional)

A unique product code or stock-keeping unit (SKU), e.g. 'MBS-00001'.

[categoryName] (optional)

A category or variation, e.g. 'mens shirts'.

[price] (optional)

The numeric price of this item, e.g. '9.99'.

[quantity] (optional)

The quantity purchased, e.g. '2'.

Clearing Items in a Transaction

In case the user empties their cart, the following JavaScript command clears all items from the transaction:


Submit the Transaction to Google Analytics

The final transaction with all items must then be submitted with the following JavaScript command:


Naturally, this would happen on the confirmation screen.

Continue reading %How to Track Ecommerce Transactions with Google Analytics%

Source: Sitepoint