Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Feb 25 2021
Feb 25

Bruker du tiden din på de riktige tingene når du jobber med nettbutikken din? Publiserer du innhold som er viktig for kundene? Legger du ned fokus og arbeid der det gir best effekt? Å benytte gode analyseverktøy kan hjelpe deg med å besvare slike spørsmål. Kontinuerlig og målrettet analyse er viktig for å kunne identifisere problem- og forbedringsområder. Det gir gode indikatorer på hva som fungerer/ikke fungerer og hva du bør fokusere på. Dette gir deg et godt grunnlag for å ta de riktige beslutningene når det gjelder nettbutikken din. 

Google Analytics 

Google Analytics er det mest populære webanalyseverktøyet som brukes for å få detaljert statistikk om et nettsted. Ved å bruke Google Analytics kan du for eksempel finne ut: 

  • Hvem brukerne på nettstedet ditt er
  • Hvor brukerne kommer fra
  • Hvordan brukerne navigerer på nettstedet ditt
  • Om brukernes handleatferd
Infografikk: Hvem er den typiske brukeren? (tall hentet fra Google Analytics)Presentasjon av data fra Google Analytics - hvem er den typiske brukeren på nettstedet?Infografikk: brukernes handleatferd (tall hentet fra Google Analytics)Presentasjon av data fra Google Analytics - brukernes handleatferd. 

Data fra Google Analytics kan gi deg en oversikt over hvilke utfordringer nettbutikken står overfor, men ikke nødvendigvis hva årsaken til disse utfordringene er. Tall fra Google Analytics kan for eksempel vise at mange av brukerne på nettstedet ditt faller av på produktsiden og i checkout-prosessen. Hva kan årsaken være til dette? Hvorfor er det så mange som stopper opp i kjøpsprosessen? Det kan være utfordrende å vite hvordan du skal ta tak i disse problemstillingene. 

Hotjar

En god løsning er å bruke det visuelle analyseverktøyet Hotjar som et supplement til Google Analytics. Hotjar hjelper deg med å forstå atferden til brukerne på et nettsted. Hva er det brukerne faktisk gjør på nettstedet? Hvilket innhold bryr de seg om? Ved å for eksempel bruke "heat maps" kan du se hvor på sidene brukerne klikker og hvordan de scroller seg gjennom sidene. Dette kan hjelpe deg med å forstå hvorfor brukerne oppfører seg slik de gjør, og kan gi deg en pekepinn på hvor du skal starte arbeidet ditt. 

Ved å for eksempel se på hvordan brukerne oppfører seg på produktsiden, kan du se om du finner noen forklaringer på hvorfor så mange brukere faller av på denne siden, og ikke legger varer i handlekurven. Du kan se hvor brukerne klikker, hvor langt de scroller og hvordan de interagerer med de ulike elementene på siden. Basert på denne informasjonen kan du A/B-teste ulike løsninger, gjøre endringer og i etterkant teste effekten av disse endringene. 

Ved å jevnlig utføre Hotjar-analyser kan du få nyttig informasjon om blant annet: 

  • Hvilket innhold du bør fokusere på og ikke
  • Hvor du bør plassere det viktigste innholdet ditt
  • Om brukerne har ønsket atferd på nettstedet ditt
  • Om viktige elementer som knapper, linker og CTAer (calls-to action) er effektive
  • Om siden bør tilpasses bedre for desktop, mobil eller nettbrett

Kort oppsummert

Tiltak basert på funn fra Google Analytics og Hotjar kan føre til færre frafall i kjøpsprosessen, flere sidevisninger, forbedret design med lavere fluktfrekvens og høyere konverteringsfrekvenser. Analysene gir også et godt grunnlag for å A/B-teste ulike løsninger på nettstedet. Analysene er enkle og billige å gjennomføre, og dersom man vet å dra nytte av disse verktøyene kan det gi stor innsikt og effekt, slik at du kan gjøre tiltak som bedrer nettbutikken din. På denne måten sikrer du å få mest mulig igjen for innsatsen du legger ned i ditt redaksjonelle arbeid.  

Ikke nøl med å ta kontakt med oss dersom du trenger tips eller hjelp til å utføre slike analyser! Vi vil gjerne høre fra deg. 

Feb 22 2021
Feb 22

Imageshop is a Cloud based Digital Asset Management system. It lets you store all your company’s images, videos and digital files easily and securely in an online image bank.

What can Imageshop do?

Imageshop is a secure image bank, where you can store and organise your images, videos, documents and graphics, making them easy to find for anyone you choose to grant access.

Drag & drop uploading and ultra-efficient image tagging means that they are always available when and wherever they are needed, in the right format and highest quality.

Banner Imageshop

About the integration

The module itself has been built to support Drupal out of the box. The main features are:

  • Uses Imageshop interface for searching, cropping and selecting media.
  • Support for image fields out of the box.
  • Support for Media library out of the box.
  • Support for CKEditor (through Media library) out of the box.
  • Easy installation / configuration.

More information about the Imageshop product can be found here.

You can download the module from drupal.org here.

The module has been made in cooperation with Screentek, the company behind the Imageshop product. We feel that Drupal needs more good alternatives for media handling and this could just be the right option for you. Feel free to contact Imageshop and have a talk to them about Imageshop and how it can help you handle your media files across your company, channels and systems.

Feb 05 2021
Feb 05

At Ny Media we’re quality-oriented and our main objective is to provide secure and reliable solutions, giving our clients all tools they need to run successful online projects. To ensure the quality of solutions and meeting the client’s acceptance criteria we’re developing test cases to cover all critical parts of their business logic. In order to achieve this, we are facilitating different testing frameworks, just to name a few:

  • PHPUnit - for unit testing
  • PHPStan - for static code analysis
  • Behat - for user-story testing and acceptance criteria

This is not a complete list (that’s material for a separate blogpost) but should at least provide some perspective on what is our testing stack which varies between different projects.

Travis CI

For many years we were using travis-ci.com, which is a paid version of travis-ci.org - the popular among FOSS (free and open-source software) maintainers, a continuous integration platform, that allows running customized test cases on your private Github repositories. For us, one of the reasons to become paying customer of Travis is to support the company that was promoting FOSS. Many of us, developers here at Ny Media, were using Travis on daily basis for our own open-source side-projects, so integrating Travis into our company workflow was the only logical thing at that time.
Unfortunately, lately, Travis became highly unreliable both to their customers but also their own employees. They have also made it impossible for FOSS maintainers to keep using their services. Therefore we decided it’s time for a change.

Github Actions

Since we’re using Github as our main remote git repository, the natural choice for us was to explore Github CI (aka Github Actions) capabilities. Github has been working hard the last couple of years since the initial announcement of Github Actions to provide everyone with access to their product.

I’d like to name a couple of features that immediately caught our eyes:

  1. GitHub-hosted runners
    You don’t need a custom infrastructure to run your tests - Github can provide it for you at a reasonable price. All our tests are running on linux-based platforms and the price, at the time this blog post was created, is 0.008 USD per minute. There is some package of minutes included in your Github plan. Moreover, all public repositories are free to run Github Actions!
  2. Self-hosted runners
    You can run your tests on Github infrastructure or use your own infrastructure - either physical or virtual. And the best part is - you don’t need to pay extra for utilizing that infrastructure as a Github test runner
  3. .“Unlimited” concurrency
    The number varies depends on your plan but it is quite generous even for Free accounts (20 concurrent runners). At the time of writing this blogpost Travis charges 249 USD for 5 concurrent runners.
  4. Powerful infrastructure
    A few years back Github was acquired by Microsoft, and as a side effect of this acquisition, it got access to cloud infrastructure - Azure. Therefore they can provide a quite powerful infrastructure at reasonable prices making it hard to beat.
  5. Exceptional documentation and support
    Github is quite great at documenting all features regarding the new platform. Even if the moment of doubts I’ve been able to reach out to the support team and get my answers within the same day.

Migration

Since our tests on Travis were running within a dockerized environment and not directly on the worker instance, we were able to finish the migration within one day. It required the following steps few steps.

Create .github/workflows/test.yaml file

Here’s the example file you can use as a template:

name: Run tests
on:
  push:
    branches:
      - develop
      - master
  pull_request:
    branches:
      - develop
      - master

jobs:
  build:
    name: Run tests
    runs-on: ubuntu-latest
    timeout-minutes: 20
    steps:
      - uses: actions/[email protected]
      - run: /bin/bash run-tests.sh

In the example above run-tests.sh script represents all the steps your test suite requires to execute. It may need to build dockerized environment, it may need to download all dependencies, run test scripts, it’s up to you. In our case it all the above.

I want to highlight 2 things in the template above. This workflow will only be triggered when you push to branches master and develop or if you open a Pull Request against those 2 branches and push some commits to the branch associated with such Pull Request.
Here’s what you’ll be seeing in your Pull Requests

Github status check

You can see 2 steps being run as a part of this job. Please mind the difference betwee keywords used for each of those steps. The run marks what script or sequence of commands should be run on your runner host.  The uses provides a way of utilizing from the whole marketplace of pre-cooked actions. The one used in the template - actions/[email protected] - is provided directly by the Github team. It allows your project to be cloned in a certain directory (by default the current one) and the commit which triggered the build will be checked out. Very simple, yet powerful - more about it in our future blogposts.

Make sure checks passed before merging the Pull Request

Do that by setting up the protected branch in repository Settings -> Branches

Protected branches require status checks


Disable Travis

Now that your tests are running using Github CI you can safely remove all references to Travis in 3 easy steps:

  1. Cancel your plan. If you’re paying for Travis just go to https://travis-ci.com/plans and switch to plan Free.
  2. Go to https://github.com/organizations/yourorganization/settings/installations and remove the Travis App
  3. Delete .travis.yml from all repositories that you used to test with Travis. You don’t need that anymore.

Summary

Are we happy with the migration? Yes, very much so. Without making any change to how we run tests (initially, we started with 1:1 test migration from Travis to Github CI) our test times were decreased by ~20% due to much more powerful test runners on Github vs. Travis. In addition, Travis was limiting us to a certain amount of runners that can run concurrently (depending on pricing plan). That restriction was increased by the order of magnitude when we migrated to Github CI, giving our developers much quicker feedback. On top of that, despite the increased performance, we’re actually paying less for using Github CI compared to Travis.

But this is not the end of this story. We have barely scratched the surface of possibilities when it comes to utilizing Github CI API. In the next blog post, we’ll talk about what can you do to further improve your workflow and optimize time spent on testing. Stay tuned.

Oct 23 2020
Oct 23

Kunder stiller stadig større krav til personlige og relevante handleopplevelser på nett. Det er derfor viktig å tenke på hvordan du kan skape så relevant innhold som mulig på nettstedet ditt basert på den dataen du har tilgjengelig om kunden. Du har ulike muligheter avhengig av om kunden er anonym eller kjent. 

For besøkende som ikke har registrert noen personlige opplysninger, kan innholdet i nettbutikken optimaliseres ved bruk av anonyme data fra analyseverktøy som for eksempel Google Analytics. Enkeltpersoner plasseres da i ulike grupper/segmenter og mottar innhold i henhold til dette. Innholdet for de ulike gruppene/segmentene kan tilpasses ulike kategorier som for eksempel: nye vs. returnerende kunder, populære produkter og kategorier, konverteringer, kjønn, alder, lokasjon, enhet og trafikk. Ved å bruke anonyme data på denne måten kan du forbedre innholdet ditt, men det gir deg ikke mulighet til å levere personlige opplevelser til hver enkelt kunde. 

Det er også en mulighet å optimalisere innholdet i nettbutikken ved å benytte cookies (informasjonskapsler). Dette er en liten tekstfil som lastes ned og lagres på datamaskinen når brukeren åpner en nettside. Det kan for eksempel brukes til å huske handlekurven, registrere hvor brukeren beveger seg rundt på nettstedet og kjøpshistorikk. Dette er ikke data som er knyttet til deg som person, men til enheten som brukes. 

Det er først når kunden har opprettet en konto/bruker i nettbutikken at du kan tilby et personalisert innhold basert på opplysninger som lagres på kunden. Personalisering handler om å tilby personlige opplevelser ved dynamisk å vise/endre innhold, produktanbefalinger og spesifikke tilbud basert på demografi, interesser, atferd, kjøpshistorikk og andre personlige data. Eksempler på bruk av personalisering kan være: visning av komplementære produkter, visning av relaterte produkter/kategorier, produkter/kategorier kunden nylig har sett på/kjøpt, målrettede rabatter på nylig viste/kjøpe produkter og bannere tilpasset hver enkelt kunde. 

Hvorfor satse på personalisering: 

  • Markedsførere ser en gjennomsnittlig  økning på 20 % i salget når en personalisert opplevelse tilbys. (Monetate)
  • 80 % av forbrukere har større sannsynlighet for å kjøpe når merkevarer tilbyr personlige opplevelser. (Epsilon)
  • 77 % av forbrukere har valgt, anbefalt eller betalt mer for et merke som tilbyr en personalisert opplevelse. (Forrester)
  • 90 % av amerikanske forbrukere synes personlig tilpasset markedsføringsinnhold er noe til veldig tiltalende. (Statista)
  • 92 % av markedsførere sier at kunder og potensielle kunder forventer en personlig opplevelse - opp fra 85 % i 2019. (Evergage)
  • 83 % av kunder vil utveksle data for en mer personlig opplevelse. (Accenture)

For å få kundene til å registrere seg med personlige opplysninger i nettbutikken kan en kundeklubb fungere godt som insentiv. Med en kundeklubb kan du tilby unike fordeler som gjør det attraktivt for kundene å registrere seg. Når kunden først har fylt ut et skjema sitter du på nøkkeldata som hjelper deg med å forbedre dine fremtidige besøk. Bruker vi denne dataen til å tilby personalisert innhold vil kundene få en relevant handleopplevelse i nettbutikken.

LES MER OM KUNDEKLUBB  HER 


I en klesbutikk kan man for eksempel i registreringsskjemaet spørre kunden om personlige opplysninger som navn, kjønn og fødselsdato. Dette kan kombineres med andre data som kjøpshistorikk (i fysisk butikk og nettbutikk) og atferd (klikk/visningshistorikk) i nettbutikken. Resultatet er at medlemmene som besøker klesbutikken får opp innhold, produktanbefalinger og spesifikke tilbud basert på denne dataen.

  • Her ser vi et eksempel fra en nettside hvor kunden blir møtt med en personlig hilsen og en enkel oversikt over kupongene/tilbudene sine.

Utsnitt av skjermbilde fra nettbutikk med velkomstmelding og rabattkuponger

  • Her er eksempler på produktanbefalinger kunden kan få opp på nettsiden basert på atferd i nettbutikken. 

Skjermbilde av nettbutikk med to rader med blomstrete dameklær, spesielt utvalgt til brukeren.

Fokus på hele kundereisen

Alle sider på nettstedet ditt bør tilpasses for å treffe best mulig i de ulike fasene i kundereisen. Dersom vi klarer å bruke dataen som vi fanger opp til å gi innhold/produkter som vi tror er relevant i øyeblikket, viser vi kundene at vi forstår dem og deres preferanser.  Vi må tilby det innholdet som mest sannsynlig fører til et salg eller som leder kundene til de produktene de ønsker å kjøpe. På denne måten forenkler vi kundereisen, hjelper kundene med å gjennomføre kjøp og skaper gode kundeopplevelser. 

Ta kontakt med oss dersom du trenger tips eller hjelp til hvordan du best kan tilpasse innholdet på dine nettsider!

Sep 23 2020
Sep 23

Here at Ny Media we are specialists in developing highly customized Drupal Commerce solutions. One of the recurring themes of a tailor-made e-commerce solution, is to integrate some sort of order export towards the ERP solution that the client in question uses. And a very common way for us to do that is to hook into commerce order state transitions.

Typically a subscriber would make sure the actual export is queued through Drupal's queue system (or through Advanced Queue). This makes it possible to have exports that can retry, delay execution and generally be reliable and fault-tolerant.

However, this also involves integration towards third parties. No matter how fault-tolerant your integration is, you can not guard against all kinds of error in a third party application. Which is why from time to time I find myself in need of a way to trigger these transitions again, for example to re-queue the order export. So here is an annotated code example with how one can achieve this:

createInstance('order_fulfillment');
// The transition in question will also vary based on your site. For a note on
// how to find out, read below.
$transition = $workflow->findTransition('draft', 'fulfillment');
$event = new WorkflowTransitionEvent($transition, $workflow, $order, 'state');
// Now trigger the event. The method here will be the one you have indicated
// will respond to the event. For example, if your event subscriber service
// has this in its public static function getSubscribedEvents:
// 'commerce_order.place.post_transition' => ['onPlace'],
// (the example is taken from this class itself), then you probably want to
// invoke the method ::onPlace, like we are doing here. If you are looking for
// another transition, or your class has a different method as a responder for
// the place transition event, then you probably want to adjust this
// accordingly.
$order_export_event_subscriber->onPlace($event);

As stated in the code above, there are some things that might not be obvious how you find out. Let's start with the order workflow ID.

How to find the workflow ID of an order type

To find out what kind of workflow you are using, you take a look at the order type for the order in question. On this particular site, there are 2 order types. The one that I had to re-queue is of the type "default". To edit the order type "default", go to mysite.com/admin/commerce/config/order-types/default/edit (change mysite.com to the address of your Drupal site).

In there we can see that you can select the workflow for the order. And in the select dropdown, I can see that the ID for the chosen one is "order_fulfillment":

Fulfillment

Another way to find this ID is to look at the configuration YML file for the default order type. It will look something like this, and in my case is called "commerce_order.commerce_order_type.default.yml":

uuid: 2a999511-7dbb-4a44-9599-6bad702ff032
# ... Content edited out for clarity.
label: Standard
id: default
# Here is the id of the workflow again:
workflow: order_fulfillment
# ... rest of the file.

How to find state IDs for the workflow transition

In my example, I wanted to get the transition where an order goes from "draft" to "placed". How did I know these IDs, and how did I know which ones to use?

To answer that, we should check out the definition of the workflow we have chosen. A workflow will most often be defined in a file called modulename.workflows.yml. In our case, we are actually using one of the workflows provided out of the box with Drupal Commerce, so the file to check out is commerce_order.workflows.yml. In here our workflow is defined as follows:

order_fulfillment:
  id: order_fulfillment
  group: commerce_order
  label: 'Fulfillment'
  states:
    draft:
      label: Draft
    fulfillment:
      label: Fulfillment
    completed:
      label: Completed
    canceled:
      label: Canceled
  transitions:
    place:
      label: 'Place order'
      from: [draft]
      to:   fulfillment
    fulfill:
      label: 'Fulfill order'
      from: [fulfillment]
      to: completed
    cancel:
      label: 'Cancel order'
      from: [draft, fulfillment]
      to:   canceled

We can see it has 4 states, and 3 transitions. The one we want is the one that is triggered when the user completes their purchase, and this is the transition with the ID "place". To find it, I used the state it was supposed to transition from and the state is was supposed to transition to, which you can see is "draft" and "fulfillment".

As you can see, the framework of Drupal Commerce makes it possible for us to create advanced types of integrations, which are fault-tolerant, flexible and scalable. If you are looking for a partner to develop a Drupal Commerce site with customized integrations, contact our team of experts, ready to create solutions for you, regardless of integration types, order types or workflow types.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web