DEV Community: Berkay

Cookieless tracking in web2 and web3

Berkay — Sun, 27 Nov 2022 11:52:13 +0000

Cookieless tracking is basically a type of web analytics that does not require any cookies on your browser.

This type of marketing engineering has been around for a while but it has only recently become popular with GDPR regulations. This regulation states that if an organization collects data from users which using your website, web apps, or dApps. it must be able to delete this information at any time.

With cookieless tracking, companies can now keep their users' data private by deleting it from their servers straight away instead of keeping it there for years on end. Cookieless tracking is becoming more prevalent on the internet and so marketers are relying largely on it to keep their user's data private.

Cookieless tracking is a solution for the GDPR and cookie consent compliance problem. With the help of this technology, companies can track the user's activity on the website without collecting any personal data.

Using a server-side technology that doesn't use any cookies to identify or track visitors on your website. It does so by using other methods like IP address, device fingerprinting, and browser fingerprinting like 🌭Hardal for web2.

Web3 Analytics in marketing

In web3 Analytics allows for marketing engineers to track the user’s journey from the first visit to the last visit, without having to place a cookie on their device while they are using your dApps.

Integration this server-side technology that can identify and track the user events on a website which does not require any third-party cookies or scripts with on-chain wallet platforms like Metamask 🦊.

Hardal also provide us a gateway to web3 analytics with integrating wallets that using Ethereum and other platforms. It can be used to track all kinds of events on the blockchain, including user interactions with smart contracts and decentralized blockchain apps.

Marketing engineers are now able to create more better marketing campaigns, audience engineering and provide better customer experience due to this new tracking method.

Hardal also records user actions from blockchain and dApp. It helps marketers and business owners to create custom web3 audiences, generate targeted segments using custom events and activate them with automated marketing campaigns.

Why privacy is matter?

Privacy is an important issue for web3 Analytics, so they provide a cookieless solution that allows them to track users without having to store any of the data in a browser or add-ons.

Web developers and marketers need to respect the privacy of their users. However, with the advent of GDPR, this has become even more important.

This means that companies need ways to track their ads, offers, and website audiences without using cookies.

While cookieless tracking might sound like a challenging task for marketers, there are solutions that can help them with this by integrating it into their existing technology stack with ease.

Hardal web2 and web3 analytics provides an powerful solution for businesses who are using on-chain marketing tools and want to achieve compliance with GDPR regulations.

All of the analytics are done server-side, so there is no need to worry about cookies or third party integrations.

How to send an image from Unsplash to IPFS?

Berkay — Mon, 28 Mar 2022 12:05:36 +0000

I suggest you include the web3 environment in your growth strategy. Therefore, you should use technical implementations decentralized networks like subgraph or IPFS.

In this guide, you'll learn how to send image files to IPFS using ipfs-http-client and Nextjs

You can see the demo here or jump to directly GitHub

Pre-requests

Node 15 >

Getting started

Create a simple next js app:

npx create-next-app ipfs

Add IPFS HTTP client library using yarn:

yarn add ipfs-http-client

Create a new constant for IPFS gateway. In this case, we will use Infura API.

const client = create("https://ipfs.infura.io:5001/api/v0");

Get a random image URL from Unsplash. You can see more detail in here.

async function getImage() {
fetch(https://source.unsplash.com/500x500/?beach).then((response) => {
let imageURL = response.url;
setImageURL(imageURL);
});
}

Or you can use your own fetching solution like custom form data, Cloudinary etc.

Then upload your file to IPFS.

The critical thing is, you should fetch the image URL as a blob object.

const blobFile = await fetch(imageURL).then((r) => r.blob());

Create a new function as uploadFile

async function uploadFile() {
const blobFile = await fetch(imageURL).then((r) => r.blob());
try {
const added = await client.add(blobFile);
const url = https://ipfs.infura.io/ipfs/${added.path};
updateIPFSURL(url);
} catch (error) {
console.log("Error uploading file: ", error);
}
}

Finally, you are ready to fetch and image image object from URL and send to IPFS.

Clone the full repository here and run;

yarn dev

You can see the more detailed cases about Web3 from Nader Dabit’s posts here.

Thanks for reading. 👋 Don't forget to subscribe me on Medium or Dev.to

Multivariate testing (MVT) with Google Optimize and Next.js for UX analytics

Berkay — Thu, 17 Mar 2022 15:46:06 +0000

In the server-side UX tests, your code should perform all the tasks that Optimize does in the client-side trial. For example, your code targets audiences and consistently delivers the appropriate variant for each user. You only use the Optimize interface to create experiments, set goals, create variables, and view reports.

More details about Google Optimize Server-side here

In this guide, you will learn how to implement a Google Optimize MVT (Multivariate Test) in your server-side app like Next.js and send your data to Google Analytics 4.

Pre-requirements

Google Analytics 4
Google Tag Manager
Google Optimize
Your Next.js app

Add Google Tag Manager to your Next.js app

Open your terminal add to create a new next.js app with NPX.

npx create-next-app

If you have already a next.js app, you can create a new file called _document.js and add your GTM scripts to <Head> and <body> components.

More details about the custom documents are here.

// _document.js

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  const GTMID = "GTM-XXXX" // I recommend using .env for this variable.

  return (
    <Html>
      <Head>
        <script
          dangerouslySetInnerHTML={{
            __html: `(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=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','${GTMID}');`,
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
        <noscript
        dangerouslySetInnerHTML={{
          __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${GTMID}" height="0" width="0" style="display: none; visibility: hidden;" />`,
        }}
      />
      </body>
    </Html>
  );
}

Connect your Google Optimize account to GTM and GA4

Go to Google Optimize, and click Container settings. Link your GA4 property from the measurement section.

And then copy your Optimize Container ID.

Then go to your Google Tag Manager account. Create a new tag, and select Google Optimize. Just paste your Optimize Container ID.

Creating new MVT

Go to your Google Optimize account, and create a new experience

Add your editor page URL

If you are working on your local machine, you can just write simply localhost:3000/ or whatever your host and port name.

Google Optimize editor page URL is trail slash sensitive, so I recommend adding the slashes.

And choose your experience type as Multivariate test.

Audience targeting

You can target your audience with specific variables like URL query parameter, cookie, JS, and more.

In this workshop, we’ll use URL parameters. Add a new Query Key, like mvt.

And you should give a specified parameter that queries like true. And also don’t forget to check your rule, if it's not working you can debug your target variable, before publishing.

Deploy your experiments

Before deployment, check changed sections. To edit your sections, which is Editor Page, you have to use Chrome and Google Optimize extension.

Also, you should check your multivariate combination details in the top section like A1 to B0 or A1 to B1.

And if you don't want separated variants in your experiments, create personalization for that. More details about personalization in here.

Live test

Launch your Nextjs app

yarn dev

Go to http://localhost:3000/?mvt=true

If your experiments work with success, you should see variants A1 to B0 on your landing page.

After a few session changes, you will see that it goes to variant A1 to B1.

Thanks for reading. 👋 Don't forget to subscribe me on Medium or Dev.to

Check the resources from Google Optimize here

Build Your Serverless SQL Generator App Using GPT-3 and Next.js

Berkay — Sun, 20 Feb 2022 18:54:34 +0000

You can create a simple serverless app which is creating SQL queries from regular English syntax like this:

Create a SQL request to find all users who visited from Chrome and Safari

This can be very useful, especially for BigQuery SQL queries from Google Analytics.

If you want to jump to the GitHub repo, you can get it from here

It’s really funny to create complex SQL queries like this. Before you begin, you have to know about your Open AI account billing methods from here.

Basically, multiple models, each with different capabilities and price points. Ada is the fastest model, while Davinci is the most powerful.

Example token usage: Prices are per 1,000 tokens. You can think of tokens as pieces of words, where 1,000 tokens are about 750 words. This paragraph is 35 tokens.

Your each model request calculated on your dashboard:

In this project, I use GPT-3 Engine and Ada model by the way.

Create your Open AI account

Go to Open AI and create a new account if you don’t have one. Go to API Keys from here and make sure you have an API Key.

Do not share your API key with others, or expose it in the browser or other client-side code. So, I recommended using .env.

Create your app

Create an empty Next.js app:

yarn create-next-app

Add openai package using yarn:

yarn add openai

Then create a new API file for your CPT-3 requests:

//pages/api/ai.js

const { Configuration, OpenAIApi } = require("openai");

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

export default async function handler(req, res) {
  let promptData = req.body.promptData;
  const response = await openai.createCompletion("text-ada-001", {
    prompt: promptData,
    temperature: 0.3,
    max_tokens: 60,
    top_p: 1,
    frequency_penalty: 0,
    presence_penalty: 0,
  });
  res.status(200).json({ data: `${response.data.choices[0].text}` });
}

Build POST function for the JSON responses:

//pages/index.js

useEffect(() => {
    const fetchData = async () => {
      if (search) {
        setIsLoading(true);
        const res = await fetch(`/api/ai`, {
          body: JSON.stringify({
            promptData: search,
          }),
          headers: {
            "Content-Type": "application/json",
          },
          method: "POST",
        });
        const data = await res.json();
        setData(data);
        setIsLoading(false);
      }
    };
    fetchData();
  }, [search])

Your full index.js code should be like this:

//pages/index.js

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { useState, useEffect } from "react";

export default function Home() {
  const [data, setData] = useState({ data: "" });
  const [query, setQuery] = useState();
  const [search, setSearch] = useState();
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      if (search) {
        setIsLoading(true);
        const res = await fetch(`/api/ai`, {
          body: JSON.stringify({
            promptData: search,
          }),
          headers: {
            "Content-Type": "application/json",
          },
          method: "POST",
        });
        const data = await res.json();
        setData(data);
        setIsLoading(false);
      }
    };
    fetchData();
  }, [search]);

  const defaultPrompt =
    "Create a SQL request to find all users who visited from Chrome and Safari";

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <br />{" "}
          <a href="https://openai.com/api/">Open AI SQL Generator</a>
        </h1>

        <div>
          <div>
            <h3>Your SQL request: </h3>
            <textarea
              type="text"
              cols="50"
              rows="3"
              placeholder={defaultPrompt}
              defaultValue={defaultPrompt}
              value={query}
              onChange={(event) => setQuery(event.target.value)}
            />
            <br />
            <button
              type="button"
              className={styles.button}
              onClick={() => setSearch(query)}
            >
              Generate
            </button>
            {isLoading ? (
              <div>Loading ...</div>
            ) : (
              <>
                <p className={styles.description}>Your SQL query 👇</p>
                <code className={styles.code}>{data.data} </code>
              </>
            )}
          </div>
        </div>
      </main>
    </div>
  );
}

Build your app, and start to create new SQL requests. ⚡️

yarn dev

Please feel free to clone my repository here

Sources:

Remarketing with Cookies

Berkay — Sun, 16 Jan 2022 21:00:00 +0000

You may want to run campaigns that serve different landing pages to your users, especially in B2C mailing campaigns.

For this, instead of creating separate landing pages for each of your campaigns, you can develop more effective automation and marketing techniques using modern web technologies like NextJS.

Assuming that the user clicks on our UTM campaigns, we will show a different landing page depending on the cookie status, without changing the page.

Let's see what we're going:

Creating a new app with NextJs.
Building middleware for rewrite functions.
Create and set cookie status for UTM campaign values.

Create a new web app using. More details here.

npx create-next-app

Create a new typescript file called _middleware.ts on /pages.

Import objects from Next Server for Middleware API.

import { NextResponse } from "next/server";
import type { NextFetchEvent, NextRequest } from "next/server";

Add a new function for rewriting. Basically, the task of this function is to fetch the user’s cookie status, and rewrite them to the campaign page without leaving it on the same page path.


//pages/_middleware.ts

const PUBLIC_FILE = /\.(.*)$/;

export async function middleware(req: NextRequest, ev: NextFetchEvent) {
  let response = NextResponse.next();

  if (PUBLIC_FILE.test(req.nextUrl.pathname)) {
    return response;
  }

  if (req.nextUrl.pathname === "/") {
    switch (true) {
      case Boolean(req.cookies["remarketing"] === "true"):
        response = NextResponse.rewrite("/marketing-page");
        break;
      default:
        response = NextResponse.next();
    }
    return response;
  }
  return response;
}

Create a new marketing page called /marketing-page , you can duplicate the index page for now.

This page will use for our main redirected campaign page and changing cookie status to false.

For that, we use react-cookie.


//pages/marketing-page.js

const [cookie, setCookie] = useCookies();

const setRemarketingCookie = async () =&gt; {
  try {
    setCookie("remarketing", "false");
  } catch (err) {
    console.log(err);
  }
};

And we will run this function for when the user wants to cancel campaign and return to the home page.


//pages/marketing-page.js

const [cookie, setCookie] = useCookies();

const setRemarketingCookie = async () => {
  try {
    setCookie("remarketing", "false");
  } catch (err) {
    console.log(err);
  }
};

Let's refactor our original homepage. We use useRouter to check the current URL and, extracting UTM campaign values like Campaign, Medium. etc.

//pages/index.js

const [cookie, setCookie] = useCookies();
const router = useRouter();

const cookieName = "remarketing";
const utmCampaign = "lead_generation";
const utmMedium = "email";

const matchCampaign =
  router.query.utm_campaign === utmCampaign &amp;&amp;
  router.query.utm_medium === utmMedium;

useEffect(() =&gt; {
  if (matchCampaign) {
    setCookie(cookieName, "true");
  }
})

Congratulations! 🎉

Now, the users when clicking any UTM campaign, our cookie and marketing page will change.

Also, you can send to Google Analytics, this cookie value as a custom event for which users cancel your campaign.

Clone the repository in here.
Watch the Marketing Automation With Customer.io + Next js session

Converting Multiple Images to WebP

Berkay — Wed, 22 Jul 2020 00:00:00 +0000

This is how to convert your multiple any images from .png or .jpeg to .webp format with storage (Cloud) and optimization features.

WebP is so fast image format for your web app. WebP is also developed and recommended by Google. It is also extremely important for SEO and web performance with image contents. Normally, you can use Google's native WebP Converter. But this is not capable of web storage and other image optimization.

We use Cloudinary image storage for this converting solutions.There are two simple solutions to converting multiple images.

Solution 1

You can set up the pre-transformation Upload settings on Cloudinary.

Go to Settings and Add Upload Preset :

Click to Upload Manipulations :

And then click to Add Eager Transformation:

Set your pre upload.

Choose the format as WebP
You don't have to set the image resolution to 1080 , but most screen device is smaller than 2K or 4K for web image contents.
You can check for other useful flags like adding unique ID of filename.

Here is the final settings should look like:

Thus, every image you upload will be automatically optimized to webp using both Media library UI or CLI.

Solution 2

But what if we want to change the images we uploaded before? In this case, we have to use Cloudinary CLI.

You can transform your all images using URL reference adding variables after /upload/ path like /c_scale,f_auto,h_517,w_1080/.

But you have to list all URL of your images.

Listing URLs

Firstly, we must install the CLI with Python PIP.

pip3 install cloudinary-cli

Configure your CLI with your Cloudinary API KEY

export CLOUDINARY_URL=cloudinary://123456789012345:abcdefghijklmnopqrstuvwxyzA@cloud_name

You can find your API key on dashboard.

And, we should list all images info with Search API.

You can search any variable like that, but we have to add output option for listing items to JSON file.

cld search "cat" -f context -f tags -n 10 output.json

The output should be like that:

"public_id": "5953361",
    "filename": "sasdasd-01_ek7rzs",
    "format": "webp",
    "version": 1595336182,
    "resource_type": "image",
    "type": "upload",
    "created_at": "2020-07-21T12:56:22+00:00",
    "uploaded_at": "2020-07-21T12:56:22+00:00",
    "bytes": 47488,
    "backup_bytes": 0,
    "width": 1080,
    "height": 796,
    "aspect_ratio": 1.35678,
    "pixels": 859680,
    "pages": 1,
    "url": "http://res.cloudinary.com/raufsamestone/image/upload/v1595336182/sdasdasd.ek7rzs.webp",
    "secure_url": "https://res.cloudinary.com/raufsamestone/image/upload/v1595336182/asdasd.webp",
    "status": "active",
    "access_mode": "public",
    "access_control": null,
    "etag": "581034c158165f6f9c9c872f03618a6c",
    "created_by": {
      "access_key": "126251566858748",
      "custom_id": "asdasdfas12ff",
      "external_id": "61c057372fa8c45e60a23fa51aebf1"
    },
    "uploaded_by": {
      "access_key": "126251566858748",
      "custom_id": "asdasdasdasd",
      "external_id": "61c057372fa8c45e60a23fa51aebf1"
    }
  },

And we can map the specify "URL" from JSON with Node JS for listing all URLs.

const data = require('./output.json');
const output = data.map(url =&gt; url.url);
console.log(output);

and then you can replace and modify your all URL with any IDE.

What about JAMstack?

If you are interesting in adding Cloudinary to your JAMstack project, you can check Gatsby's image optimization plugin called gatsby-transformer-cloudinary and you can connect with Netlify CMS to your Clodinary API.

@raufsamestone

How to use your mobile device as CMS?

Berkay — Sun, 29 Mar 2020 00:00:00 +0000

First of all, it's not the recommended way to writing content and push to your repository with mobile devices.

Maybe it just works if you cannot access your computer. Or maybe you can use this method when you cannot access your computer for your content that needs to be corrected very urgently.

You can use it on vacation or travel but you should enjoy your holiday and rest while on vacation. 🏝

Let's assume that this case is a JAMstack project and you use the markdown as a content database.

Markdown Editors 📝

It will give you an advantage to write your contents using a markdown editor with preview feature.

iA Writer

Whit this markdown editor, you can check your number of characters, words and sentences while the writings.

You can download here.

Bear

It's advanced markdown editor for every text based things, quick notes to in-depth essays.

https://bear.app/

Dillinger

Dillinger is an online cloud-enabled, HTML5, buzzword-filled Markdown editor, that you can easily use with the chrome browser on your mobile device.

https://dillinger.io/

Notion

It's really powerfull fot relational notes, wikis, databases. Notion has desktop and mobile apps available, as well as a web-based interface. You create an account for yourself and your organization — the accounts are used to sync everything with Notion’s servers.

https://www.notion.so/

Trello

Trello has excellent support for basic Markdown syntax.

https://trello.com/

Generating URL

You have to generate SEO-friendly clean URLs for file names or file paths to slugs without CMS, as manually.

You can try a URL tools or case generators. Especially kebab case!

What is Kebab Case?

In kebab case, all letters are written in lower case and the words are separated by a hyphen or minus sign. "Kebab Case" becomes "kebab-case".

https://en.toolpage.org/tool/kebabcase

Deploy

Of course, it is very difficult to access your git repository from mobile devices. Instead, you can try deploy methods using the APIs of the markdown editors above.

But the best method is to open your git repository in your mobile browser and create a new branch.

Upload your content file and merge it.

What about current Headless CMSs?

There are of course content tools in many CMSs. However, the rich text editor or markdown editors in these CMS, do not work very well on mobile devices, as compatible as the stable apps above. Also not at the editorial level.

And yes, this post is written with a mobile device. 😀

Highlight your code in Gatsby

Berkay — Thu, 26 Mar 2020 00:00:00 +0000

Different the basic and highlighted code block:

Here is the basic HTML code block;

yarn upgrade-interactive

Here is the Highlighted style;

yarn upgrade-interactive

Plugin

With your markdown resolver used in Gatsby, you must integrate the plug-in.

For this we will need the plugin gatsby-remark-highlight code.

Plugin details on GitHub:https://github.com/deckgo/gatsby-remark-highlight-code

Install

yarn add gatsby-transformer-remark gatsby-remark-highlight-code @deckdeckgo/highlight-code

Configure

//gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-highlight-code`,
          options: {
            terminal: 'ubuntu'
          }
        },
      ],
    },
  },
]

Usage

Add the following in the blog post template or main layout.js.

async componentDidMount() {
    try {
        const deckdeckgoHighlightCodeLoader = require("@deckdeckgo/highlight-code/dist/loader")
        await deckdeckgoHighlightCodeLoader.defineCustomElements(window);
    } catch (err) {
        console.error(err);
    }
}

And then wrap your code blocks, on your Markdown file.