Forem: Renata Karolina

What are UTM Parameters and How to Use Them in Tracking Online Marketing Campaigns.

Renata Karolina — Wed, 03 Apr 2024 14:26:38 +0000

We can say that obtaining information about accesses, conversions, and leads in projects you are working on is essential. Whether it's a personal or business website, tracking visits and interaction with your product or service is indeed very important. And one way to do this is by using a simple yet very powerful tool, UTM parameters.

What is UTM?

UTM - Urchin Traffic Monitor are parameters added to URLs. The tags track and measure the effectiveness of online campaigns, meaning you can identify which content works and where it works best. This parameterization will detail the overall origin of the traffic, making it possible to analyze the performance of different campaigns and marketing channels.

What are UTM Tags?

utm_source
This parameter indicates the source, the referring source that sent the traffic. That is, it will show where users are coming from to reach you. Some examples are search engines: Google, Instagram, YouTube, email ad...
utm_medium
Indicates the means by which the link was shared or accessed, some examples: informative email, Instagram bio link, link in the YouTube video description, cost-per-click ad.
utm_campaign
Indicates a specific promotion, product, or campaign associated with the link, for example: tennis_new_b_launch, black_friday, discount_10.
utm_term
Mainly used in sponsored link campaigns, this parameter is used to identify the keywords that triggered the ad.
utm_content
Used to differentiate variations of the same ad or identify exactly what was clicked to bring the user. If we have two different buttons in the same ad, we can differentiate them with this tag.

Example of a URL:

https://woovi.com?utm_source=youtube&utm_medium=video_description&utm_campaign=pix_checkout

To add the tags to the landing pages on Woovi, we call the function linkUtmBuilder below:

const linkUtmBuilder = (
  mainUrl: string,
  utmParams: { [key: string]: string },
): string | object => {
  const utmsValid = [
    'utm_source',
    'utm_medium',
    'utm_campaign',
    'utm_term',
    'utm_content',
  ];
  const isUtmValid = Object.keys(utmParams).every((key) =>
    utmsValid.includes(key),
  );


  if (isUtmValid) {
    const utmQueryString = Object.entries(utmParams)
      .map(
        ([key, value]) =>
          `${key.toLowerCase()}=${value.toLowerCase().replace(/[\s-]/g, '_')}`,
      )
      .join('&');


    const urlWithUtm = `${mainUrl}${
      mainUrl.includes('?') ? '' : '?'
    }${utmQueryString}`;
    return urlWithUtm;
  }


  return {
    message: 'Some utm tag is incorrect',
  };
};

The function accepts two parameters: the main URL where the UTM parameters will be added, and an object specifying the tag and its value.

Firstly, we check the validity of the parameters passed. If they are considered valid, we perform a simple formatting, replacing any spaces or hyphens with underscores, according to the standard formatting for the tags defined by our team. Then, we return the complete URL with the formatted parameters. If any parameter is not valid, we issue a message indicating that one of the UTM tags is incorrect.

Remember

It is important to maintain a standard for the tags. If you use the word 'youtube' all lowercase, then always standardize using this format. Also, always choose only one symbol, for example, always a hyphen or always an underscore to separate the words. And remember, UTM tags are query strings, so they are always composed of a key-value pair separated by '&'.

Conclusion

Finally, we have seen that the use of UTM parameters can offer valuable insights into the performance of content and marketing channels. Therefore, by assigning tags such as utm_source, utm_medium, utm_campaign, utm_term, and utm_content, it will be possible to identify the origin, the medium, the specific campaign, and even the keywords that led visitors to our site.

This allows, especially for marketing professionals, a more comprehensive view of traffic, a deeper understanding of visitor behavior, and the optimization of digital marketing strategies to achieve better results.

If you want to work in a startup in its early stages, This is your chance. Apply today!

Woovi is a Startup that enables shoppers to pay as they please. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

Photo by Jess Bailey na Unsplash

Como criar um Array com N elementos com o mesmo valor no JS

Renata Karolina — Thu, 30 Mar 2023 13:01:19 +0000

Para criar um array com N elementos contendo o mesmo valor:

Utilize o construtor Array() para criar um novo array;
Utilize o método fill() para preencher o array com um valor específico;
O método fill() altera todos os elementos do array para o valor fornecido;

const arr = Array(3).fill("abc")

console.log(arr) // ["abc", "abc", "abc"]

Ao passar um argumento de número para o construtor Array(), estamos criando um array com a quantidade de espaços vazios relativos ao valor passado como parâmentro.

Array(3) // ['', '', '']

O método fill() irá preencher os espaços do array com um valor específico.

Array(3).fill("a") // ['a', 'a', 'a']

Outra alternativa: Usar o método `Array.from()`

Como alternativa você pode usar também o método Array.from() ao invés do contrututor Array().

const arr = Array.from({length: 3}).fill("abc")

console.log(arr) // ["abc", "abc", "abc"]

Passamos o comprimento desejado do array para o método Array.from() como argumento.

Usando o método Array.from fica um pouco mais explícito e mais fácil de ler do que instanciar o construtor Array.

Criando um Array de N elementos não primitivos com o mesmo valor

Quando criamos um array de N elementos não primitivos com o mesmo valor, usamos o método Array.from()

const arr = Array.from({length: 3}, () => {
  return {name: "Renata Karolina"}
})

console.log(arr) // [

  {name: "Renata Karolina"},
  {name: "Renata Karolina"},
  {name: "Renata Karolina"},

]

Criar um array de valores não primitivos é um pouco mais complicado porque temos que garantir que os objetos do array não tenha a mesma referência.

Se os objetos estiverem armazenados no mesmo local na memória, assim que um objeto for atualizado então todos serão atualizados.

Em vez disso, nós passamos a função map() como segundo argumento para o método Array.from(). A cada chamada da função map(), retornamos um objeto.
Então se você atualizar um objeto, as mudanças não irão refletir nos outros objetos porque todos eles estarão armazenados em locais diferentes na memória.

const arr = Array.from({length: 3}, () => {
  return {name: 'Renata Karolina'};
});

console.log(arr); //
 [
   { name: 'Renata Karolina' },
   { name: 'Renata Karolina' },
   { name: 'Renata Karolina' }
 ]

arr[0].name = 'Renata Oliveira';

console.log(arr); // [ { name: 'Renata Oliveira' }, { name: 'Renata Karolina' }, { name: 'Renata Karolina' } ]

A atualização da propriedade name do primeiro objeto não alterou a propriedade dos outros objetos.

Criando um array bidimensional com N elementos do mesmo valor:

A mesma abordagem pode ser usada para criar um array bidimensional com N elementos do mesmo valor.

const arr = Array.from({length: 2}, () =>
  Array.from({length: 3}, () => {
    return {name: 'Renata Karolina'};
  }),
);

console.log(arr); // [
   [
    { name: 'Renata Karolina' },
    { name: 'Renata Karolina' },
    { name: 'Renata Karolina' }
  ],
  [
    { name: 'Renata Karolina' },
    { name: 'Renata Karolina' },
    { name: 'Renata Karolina' }
   ]
 ]

Perceba que utilizamos o método Array.from() duas vezes.

A chamada externa para o método Array.from() determina o tamanho do array da matriz externa.
E a chamada aninhada para Array.from() determina o tamanho de cada array aninhado.

Repetindo vários valores N vezes:

Você pode usar a mesma abordagem se precisar criar um array que repita vários valores N vezes.

const arr = Array(3).fill(['a', 'b', 'c']).flat();

console.log(arr); // 
[
  'a', 'b', 'c',
  'a', 'b', 'c',
  'a', 'b', 'c'
]

Passamos um array de valores para o método Array.fill() e usamos o Array.flat() para nivelar o array.

Você também pode passar o map() como segundo argumento para o Array.from() quando estiver trabalhando com primitivos.

const arr = Array.from({length: 5}, () => {
  return 'a';
});

console.log(arr); // [ 'a', 'a', 'a', 'a', 'a' ]

O exemplo acima cria um array de 5 elementos com o valor de "a".
Você pode também encadear explicitamente uma chamada para a função Array.map() na saída do método Array.from().

const arr = Array.from(Array(5)).map(() => {
  return 'a';
});

console.log(arr); // [ 'a', 'a', 'a', 'a', 'a' ]

A função Array.map() é chamada para cada elemento no array.

Ref: Create an Array with N elements, same Value in JavaScript

Como pedir ajuda para devs?

Renata Karolina — Fri, 01 Jul 2022 22:05:17 +0000

🔎 Depois que você tentou por si só por alguns minutos, pesquisando na documentação, Google, GitHub (se for código aberto) ou vídeos no YouTube;

E não conseguiu resolver, peça ajuda para a comunidade desta forma:

Contextualize o que está acontecendo no seu código; fale quais possíveis soluções você tentou aplicar; e mostre seu código, se ele for extenso, coloque uma cópia no gist e disponibilize o link.

✔️ Exemplo de como perguntar!

"Estou trabalhando com HTML, CSS e JavaScript e minha estrutura é uma div com um formulário, um button e outra div com um conteúdo secundário.
Quero adicionar um evento click para (após a validação do form) exibir div secundária na tela.
Já li sobre toggle , classList, mas não consegui fazer funcionar.

Segue trecho de código da minha tentativa:
// código
Como posso fazer isso? "

❌ Exemplo de como não perguntar!

"Alguém manja de CSS? pra me ajudar?"
"Alguém já teve problema com divs no HTML?"
"No meu código aparece "isso", no de vocês também? o que eu faço?"

💬 Onde perguntar?

Discord ou Slack das tecnologias que vc atua;
Issues/Discussions do GitHub;
Fórum e/ou Stack Overflow;
Reddit, Telegram;
Twitter marcando cc @sseraphini.

Espero que tenha curtido, até a próxima!

Obrigada. 🚀