[Mia] How to set up an interactive user experience on your website.

Introduction.

Talking cat-shaped robot “Mia” that speaks various dialects is under development.

https://mia-cat.com/en

In a previous article here, we described ” SNS Marketing: How to Create and A/B Test Verification of FB and Insta Ad Reel Videos “.

[SNS Marketing] How to Create FB and Insta Ad Reel Videos and Verify A/B Testing

This article describes how to create reel-to-reel video ads and how to distribute ads. In my case, I have a policy of "first running a small test with a daily budget of ¥1,000 for a week" for SNS advertising, so I started with a daily budget of ¥1,000 for this time as well.When I first conducted a trial transmission with a budget of ¥1,000 for the following video, the CTR (cost per advertisement until website click) was about ¥30 at first, but it was gradually optimised afterwards, and finally dropped to nearly ¥10 after about three days.

kazulog.fun

2024.07.30

The Insta reel video ads have unexpectedly high CTR (about 8%), and about 100 people visit the website via the ads every day, but only 2 are currently connected to purchases from them.

While the issue is that it is difficult to get a real feel for the product without seeing it in person, we wondered if we could somehow increase the CVR,

I thought, “Wouldn’t it be possible to set up a 3D model of Mia on the HP and have it rotate 360 degrees for viewing, and also provide an interactive user experience on the HP as well: “When you nod your head, her eyes move and she talks. 　I came up with the idea.

So, in this article, I would like to describe how to install interactive AR videos on a website.

A-Frame, a library for expressing VR experiences

There are several libraries that make it easy to express VR experiences on the web, but this time we will use the simplest library, A-Frame.

https://aframe.io

Export from fusion in fbx -> import into blender -> export in glb format -> publish to github pages

It looks like it can be done with

After trying, I was actually able to display the image itself, but it seemed difficult to display the 3D model with different eye parts with random playback of audio when I stroked Mia’s head.

Also, it was hard to envision how much difference there would be in conversion between displaying this area in 2D and 3D, so we decided to abandon the 3D model VR experience approach and changed our policy to create it in 2D.

Touching Mia’s head switches the gif image and changes the sound.

Here is the code created in 2D.

The website itself is created with WordPress, so the following code is pasted into the custom HTML. This time, we used a gory implementation, specifying CSS with style attribute and embedding JavaScript in the custom HTML.

    


<div style="text-align:center">
    <div class="cat-container" style="position: relative">
        <!-- ミーアの画像 -->
        <img id="mia-image" src="https://mia-cat.com/wp-content/uploads/2024/08/mia_main.gif" alt="Mia">

        <!-- 透明なクリック/ホバリング対象の要素 -->
        <div id="head-target" style="position: absolute;top: 13%;left: 35%;width: 30%;height: 5%">
            <button id="click-button" style="background-color: orange;border-radius: 50%;height: 60px;border: none;cursor: pointer;z-index: 3"></button>
        </div>

        <!-- 矢印とメッセージ -->
        <div class="hint" style="position: absolute;top: 0%;left: 50%;text-align: center;color: #333;z-index: 2">
            <p style="font-size: 16px;margin-bottom: 0px;margin-top: 0px">
                ミーアの頭をタッチしてね
            </p>
            <i class="fas fa-arrow-down" style="font-size: 24px"></i>
        </div>
    </div>
</div>

    
        document.addEventListener("DOMContentLoaded", function () {
            var clickButton = document.getElementById("click-button");
            var miaImage = document.getElementById("mia-image");

            clickButton.addEventListener("click", function () {
                // ボタンを無効化
                clickButton.disabled = true;
                clickButton.style.backgroundColor = "#ccc"; // ボタンの色を変えて無効化を視覚的に示す

                // ランダムなGIFを選択して表示
                var gifNumber = Math.floor(Math.random() * 22) + 24; // 24から37までのランダムな数字
                miaImage.src = "https://mia-cat.com/wp-content/uploads/2024/08/mia" + gifNumber + ".gif";

                // ランダム音声再生
            var soundNumber = Math.floor(Math.random() * 133) + 1; // 1から133までのランダムな数字
            var randomSound = "https://mia-cat.com/wp-content/uploads/2024/08/sound" + soundNumber + ".mp3";
            var audio = new Audio(randomSound);
            audio.play();

                // 音声再生が完了したらボタンを有効化
                audio.onended = function () {
                    clickButton.disabled = false;
                    clickButton.style.backgroundColor = "orange"; // 元の色に戻す
miaImage.src = "https://mia-cat.com/wp-content/uploads/2024/08/mia_main.gif";
                };
            });
        });
    

The part of Mia’s head to be touched was made into an orange sphere (looks like a mandarin orange) to clearly indicate the part to be touched, like this. The gif image and audio file that switches between the two were uploaded to the media and referred to by URL.

operation check

A section called “The Mia Experience” was established and set up at the top of the website.

https://mia-cat.com/#experience

Compare back and forth to see if this will increase purchases.