Building a Smarter Craft Commerce Website

The sexiest, most thoughtfully constructed Craft Commerce website will disappoint if it doesn’t help the business convert shoppers into customers. In this talk, Stephen shares advice on how to make your next Craft Commerce site smarter for your client by focusing on the checkout flow, basic event tracking, and abandoned cart email notifications.

Transcript

1. DOT ALL 2018 | BERLIN | FOSTER COMMERCE
   Building a Smarter
   Craft Commerce
   Website
   Stephen Callender @sjcallender
   

   View Slide

2. Three things that will make
   your Craft Commerce site
   smarter.
   1. Conversion-focused checkout flow
   2. Insights & reporting
   3. Abandoned cart email notifications
   

   View Slide

3. 1.

   Conversion-focused

   Checkout Flow
   

   View Slide

4. Nearly 70% of online shopping
   carts are abandoned.
   

   View Slide

5. 1. 

   Conversion-focused 

   Checkout Flow: 4 considerations
   • Order matters. Provide a single path.
   

   View Slide

6. 1. 

   Conversion-focused 

   Checkout Flow: 4 considerations
   • Order matters. Provide a single path.
   • Click count matters. Keep it down.
   

   View Slide

7. The average number of clicks to
   complete purchases in Q1 2018.
   23.1
   pymnts.com
   

   View Slide

8. 1. 

   Conversion-focused 

   Checkout Flow: 4 considerations
   • Order matters. Provide a single path.
   • Click count matters. Keep it down.
   • Transparent pricing matters. No hidden fees.
   

   View Slide

9. baymard.com
   Reasons for abandonment during checkout
   

   View Slide

10. 1. 

    Conversion-focused 

    Checkout Flow: 4 considerations
    • Order matters. Provide a single path.
    • Click count matters. Keep it down.
    • Transparent pricing matters. No hidden fees.
    • Page speed matters. Ask Andrew Welch.
    

    View Slide

11. 1 5
    2 3 4
    1
    1. Customer Email
    2. Shipping Information
    3. Delivery Options
    4. Payment
    5. Confirmation
    

    View Slide

12. 1 5
    2 3 4
    Conversion-focused checkout flow.
    Get the customer’s
    email address.
    

    View Slide

13. Click Count: 1-2 TOTAL: 1-2
    

    View Slide

14. 1 5
    2 3 4
    Conversion-focused checkout flow.
    Get the shipping
    address.
    

    View Slide

15. If logged out AND unknown, show standard
    form.
    

    View Slide

16. If logged out AND the cart’s email has
    a user account, show sign in option.
    

    View Slide

17. example
    If logged out and cart’s email has user account
    

    View Slide

18. Logged in users now see any
    previously saved addresses.
    

    View Slide

19. If logged out AND the cart’s email does
    NOT have a user account, show the option
    to save their account info.
    Coming to Commerce 2 soon.
    Available now with plugin “Commerce
    Register on Checkout” by Jeremy Daalder.
    

    View Slide

20. Use Google Place Autocomplete
    Click Count: 2-10 TOTAL: 3-12
    

    View Slide

21. 1 5
    2 3 4
    Conversion-focused checkout flow.
    Display delivery
    options.
    

    View Slide

22. Click Count: 1-2 TOTAL: 4-14
    Shipping Methods view should show no new info.
    

    View Slide

23. 1 5
    2 3 4
    Conversion-focused checkout flow.
    Get payment.
    

    View Slide

24. View Slide

25. https://stripe.com/elements
    

    View Slide

26. Click Count: 5-13 TOTAL: 9-27
    

    View Slide

27. 1 5
    2 3 4
    Click count matters. If no errors, we have…
    • Total minimum click count: 9
    • Total maximum click count: 27
    • Ecommerce average: 23.1
    

    View Slide

28. 1 5
    2 3 4
    Conversion-focused checkout flow.
    Confirm and build

    brand awareness.
    

    View Slide

29. https://www.youtube.com/watch?v=5nwIffak5FQ
    

    View Slide

30. 2.

    Insights and Reporting
    

    View Slide

31. Google Analytics

    Enhanced Ecommerce
    “Use pageviews to track product impressions and
    product purchases; and use events to track
    checkout steps and product clicks.”
    

    View Slide

32. Configure Checkout Funnel in Analytics
    

    View Slide

33. developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce
    Enhanced Ecommerce via Analytics.js and the EC plugin
    

    View Slide

34. 62.2% cart abandonment rate
    

    View Slide

35. https://developers.google.com/tag-manager/enhanced-ecommerce
    Enhanced Ecommerce via GTM Data Layer
    

    View Slide

36. Facebook Pixel

    Track Events
    

    View Slide

37. https://developers.facebook.com/docs/ads-for-websites/pixel-events/v3.1
    Facebook Tag - Pixel Events
    

    View Slide

38. Commerce Reporting
    

    View Slide

39. Commerce Insights
    A reporting plugin for Craft Commerce 2
    by Foster Commerce.
    

    View Slide

40. Commerce Insights - Revenue
    

    View Slide

41. Commerce Insights - Orders
    

    View Slide

42. A reporting plugin for Craft Commerce 2
    by Foster Commerce.
    Coming Jan 2019
    Commerce Insights
    

    View Slide

43. 3.

    Abandoned Cart 

    Email Notifications
    

    View Slide

44. It works.
    Between April 1 and June 30, 2017, nearly
    3,000 US-based Klaviyo customers generated
    more than $60 million in sales directly from
    their abandoned cart emails.
    

    View Slide

45. Commerce 1 plugins
    • Abandoned Carts Recovery by Fred Carlsen
    • Abandoned Cart by Digital Agency WHITE
    Commerce 2 plugins
    • Klaviyo Connect by Foster Commerce
    

    View Slide

46. Klaviyo Connect example
    Add to List and Track Event
    

    View Slide

47. Sample Klaviyo Cart Abandonment Flow
    

    View Slide

48. View Slide

49. Sample Klaviyo Cart Abandonment Flow
    

    View Slide

50. Three things that will make
    your Craft Commerce site
    smarter.
    1. Conversion-focused checkout flow
    2. Insights & reporting
    3. Abandoned cart email notifications
    

    View Slide

51. Join me
    Commerce Minded.
    fostercommerce.com/podcast
    

    View Slide

52. Thank you!
    Stephen Callender @sjcallender
    Foster Commerce
    

    View Slide