Adobe Analytics

AdobeAnalytics: スマホのスワイプにカスタムリンクを実装する

こんにちは、エクスチュアの権泳東/コン・ヨンドン(@exturekwon)です。

今回はAdobeAnalyticsでスマホのスワイプアクションに対してカスタムリンクを実装する方法を紹介します。

スマホサイトではスワイプで画像が切り替わるページもあり、それらのアクションをカスタムリンクで計測したいケースが多々有ります。
その場合は、スワイプが完了した時にカスタムリンク(s.tl関数)を実行するように実装すると計測出来ます。

いざ実装

今回はスワイプが実行された際に下記の変数を計測するようにします。

eVar101: スワイプ方向
event201: スワイプアクション数

下記のサンプルでは「.item」クラスを持つ要素において、30ピクセル以上水平方向にスワイプした時にs.tl()を実行します。
この部分を任意のクラス名やIDに書き換えれば応用出来ます。

なお、この実装にはJQueryが必要です。

(function(){
    let vert = '';
    let pos = '';
    const getPos = function(evt) {
        return evt.originalEvent.touches[0].pageX;
    };
    //touchstart
    $('.item').on('touchstart', function(evt){
        pos = getPos(evt);
        vert = '';
    });
    //touchmove
    $('.item').on('touchmove', function(evt){
        if (pos - getPos(evt) > 30) {
            vert = 'left';
        } else if (pos - getPos(evt) < -30){
            vert = 'right';
        }
    });
    //touchend
    $('.item').on('touchend', function(){
        s.linkTrackVars = 'eVar101,events';
        s.linkTrackEvents = s.events = 'event201';
        if (vert == 'right'){
            s.eVar101 = 'swipe:right';
            s.tl(true, 'o', 'swipe');
        } else if (vert == 'left'){
            s.eVar101 = 'swipe:left';
            s.tl(true, 'o', 'swipe');
        } else {
            s.linkTrackVars = s.linkTrackEvents = 'None';
            s.events = '';
        }
    });
})();

実装したらスワイプしてビーコンパラメータを確認します。

スワイプ計測

このように簡単に実装する事が出来ました。

弊社ではAdobeAnalyticsやGoogleAnalyticsのカスタム実装を承っております。
お問い合わせはこちらからどうぞ。

関連記事

  1. Adobe Analytics

    Adobe Analytics:IF関数を使用した計算指標

    Adobe Analyticsで1年以上前についた計算指標に関数が使え…

  2. Adobe Analytics

    Adobe Analytics: BigQueryにロードしたデータフィードをDataStudioで…

    こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。…

  3. Adobe Analytics

    Adobe Analytics: DatafeedをGoogle BigQueryにロード(2019…

    こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。…

  4. Adobe Analytics

    Azure DatabricksでAdobe AnalyticsのDatafeedを分析する

    こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。…

  5. Adobe Analytics

    Adobe AEP SDKでReactNativeアプリを計測する (iOS編)

    こんにちは、エクスチュアの權泳東(コン・ヨンドン)です。今回は…

  6. Adobe Analytics

    Adobe Summit 2020レポート: Implementation Tips for Ado…

    こんにちは、エクスチュアの権泳東(コン・ヨンドン)です。Twitt…

最近の記事

  1. KARTE「オフラインデータをオンライン接客に活用する」
  2. ELB (ALB・NLB・CLB) をサクッと学ぶ
  3. Direct Connect vs Site to Site…
  4. パブリックサブネット vs プライベートサブネット
  5. セキュリティグループ vs ネットワークACL
  1. Adobe Analytics

    Looker: エンジニアがBIで分析ダッシュボードを作る
  2. ObservePoint

    ObservePointでサイト内のタグが全部まるっとお見通しだ!
  3. Adobe Experience Cloud

    Adobe Target: at.jsの「チラつき」を手っ取り早く回避する
  4. Google Tag Manager

    Google Tag Manager: 離脱リンクのクリックをトリガーにする
  5. Web解析

    コラム:Web解析から顧客体験分析(CXA)に
PAGE TOP