Category: javascript

I’m trying to make an online store on vue.And I got three errors that I can’t fix:

1)[Vue warn]: Property “$store” was accessed during render but is not defined on instance.

2)[Vue warn]: Unhandled error during execution of render function

3)Uncaught TypeError: Cannot read properties of undefined (reading ‘getters’)

Store.js

import { createStore } from 'vuex'
import axios from "axios";

 const store = createStore({
    state:{
        products:[]
    },
    mutations:{
        SET_PRODUCTS_TO_STATE:(state,products)=>{
            state.products = products;
        }
    },
    actions:{
        GET_PRODUCTS_FROM_API({commit}) {
            return axios('http://localhost:3000/products',{
                method:"GET"
            })
                .then((products) =>{
                commit('SET_PRODUCTS_TO_STATE',products.data);
                return products;
            })
                .catch((error)=>{
                    console.log(error)
                    return error;
                })
        }
    },
    getters:{
        PRODUCTS(state){
            return state.products;
        }
    }

});
export default store;

v-catalog.vue

<template>
  <div class = 'v-catalog'>
    <h1>Catalog</h1>
    <div class ="v-catalog__list">
      <v-catalog-item
          v-for="product in PRODUCTS"
          :key="product.article"
          v-bind:product_data="product"
          @sendArticle="showChildArticleInConsole"
      />
    </div>
  </div>
</template>

<script>

import VCatalogItem from "@/components/v-catalog-item";
import {mapActions,mapGetters} from 'vuex'


export default {
  name: "v-catalog",
  components:{
    VCatalogItem

  },
  props:{},
  data(){
    return{

    }
  },
  computed:{
    ...mapGetters([
        'PRODUCTS'
    ]),
  },
  methods: {
    ...mapActions([
        'GET_PRODUCTS_FROM_API'
    ]),
      showChildArticleInConsole(data){
        console.log(data);
      },
    mounted(){
      this.GET_PRODUCTS_FROM_API()
      .then((response)=> {
        if (response.data) {
          console.log('Data here')
        }
      })
    }
  }
}
</script>

this is my first time learning AJAX and Flask so please don’t be mean. I am trying to make a Captcha block as a project. Everything is working good except one issue. If the text doesn’t match and I call my Python function that makes a new Captcha block, the Captcha String in my JavaScript file won’t update. It creates a new Captcha image and if I reload the page, then it will update the String as well. But not if I simply call the function.

Here is my Python class.

import random
from flask import Flask, render_template
from captcha.image import ImageCaptcha
from captcha.audio import AudioCaptcha


app = Flask(__name__)

@app.route('/', methods = ['POST'])
def generateCaptcha():

    result_str_image = ''.join(
        (random.choice('ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789') for i in range(5)))

    # Create an image instance of the given size
    image = ImageCaptcha(width=280, height=90)

    # generate the image of the given text
    imageData = image.generate(result_str_image)

    # write the image on the given file and save it
    image.write(result_str_image, result_str_image + '.png')

    captchaImageData = result_str_image

    return captchaImageData

if __name__ == "__main__":
    app.run(debug=True)

And here is my HTML class

<!DOCTYPE HTML>
<html>
    <head>
        <title> Example </title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <link rel="shortcut icon" href="#">
    </head>
    <body onload = "example()">
        <h1> Captcha Example </h1>
        <div id="Captcha"></div>
        <label> Enter the text from Captcha above </label>
        <input type="text" id="CaptchaInput">
        <br> <br>
        <input type="button" value="Enter" id="CaptchaSubmit">
        <input type="button" value="Reset" id="CaptchaReset">
        <input type="button" value="Audio" id="CaptchaAudio">
        <script>
            var CaptchaImage ='{{ captchaImageData.CaptchaImageValue }}';
            document.getElementById("Captcha").innerHTML = "";
            var img = document.createElement("img");
            img.src = "http://localhost:63342/Captcha/" + CaptchaImage + ".png";
            var src = document.getElementById("Captcha");
            src.appendChild(img);
            console.log(CaptchaImage);
            CaptchaSubmit.addEventListener("click", function() {
                var Input = document.getElementById('CaptchaInput').value
                if(Input === CaptchaImage) {
                    window.location.href = "http://localhost:63342/Captcha/templates/loading.html?_ijt=nijq9d07lginnbbbvrlv3v2d5j";
                } else {
                    example();
                    var CaptchaImage ='{{ captchaImageData.CaptchaImageValue }}';
                    console.log(CaptchaImage);
                }
            })
            function example () {
                $.ajax({
                    url: "/",
                    context: document.body,
                    async: false
                })
            }
        </script>
    </body>
</html>

As for what I have tried, I have looked into it and understand I might need to change my two functions to use POST. But I am a bit confused on how to use it. What I expect is that when I do

} else {
    example();
    var CaptchaImage ='{{ captchaImageData.CaptchaImageValue }}';
    console.log(CaptchaImage);
}

it changes my CaptchaImage value to the value of the new Captcha image created. Thank you

I’m creating a firebase gallery and It stated showing an issue that ..!! I’m importing firebase from ‘firebase/compat/app’;
import ‘firebase/compat/firestore’;
import ‘firebase/compat/storage’;

const firebaseConfig = {
apiKey: “AIzaSyClTTmhUlsZioKU4Jwlw7VS8j62JGUpdlA”,
authDomain: “gallery-react-e6666.firebaseapp.com”,
projectId: “gallery-react-e6666”,
storageBucket: “gallery-react-e6666.appspot.com”,
messagingSenderId: “699698629917”,
appId: “1:699698629917:web:ccf74f956df403a6a5e5f4”,
measurementId: “G-N8D2BSHY05”
};

Its going well until I created a file

I’m trying to upload image from localhost to firebase. using a youtube tutorial of net ninja.

Gmail wants to send me a verification code to a number I lost and cant remember. The first digits are shown in asterisk so i cant see the whole number. I used inspect element but I cant change it into text.

I want to make this code shorter especially at the [if~else if]sentence.
because I want to modify a className depends on each props.

export defalut function Button(props) {

const { name, height, color, bgColor } = props;

let className = color + ' ' +bgColor+ ' w-20 rounded border border-black border-solid ';
  
if (height === 'small') {
    className += 'text-xs h-7';
} else if(height === 'medium') {
    className += 'text-base h-11'; 
} else if(height === 'large') {
    className += 'text-lg h-12'; 
}

return (
  <button className={className}>{name}</button>
)}

If I click on radio button, Approver list is not showing up and I can’t find error about that. I will provide both codes and screenshot. Approver should be show as in first picture but it’s not showing anything as can see in second pic.

As in the picture, If I select on Request to Access line, the Approve list should be shown down below.

I’ve tried changing z=19 instead of using z=0 But doesn’t work. The following code are javascript.

function ChkArea(){

var area = '';

var a_list = document.getElementsByName('chk_Area[]');

for(z=0;z<a_list.length; z++)
{
if(a_list[z].checked == true)
{
area = area + a_list[z].value + "|";
}

}

document.pac_request.area_listing.value = area;
AsynReqData(reqHttp,'approver_list.php?area=' + area,'RequestForm');
}

This one is for selecting area. The range is from i=19;i<23.

<?php  
include("_dbconn.php");

echo "<script src="ews_pac.js" type="text/javascript"></script>";

$area = isset($_GET["area"])? $_GET["area"] : "";

$list_area = "";
$ary_area = array();
$ary_areano = array();

    $sql = "Select distinct(area),area_no from access_request.tbl_access_area order by area_no";
    $result = mysqli_query($conn,$sql);
    $count = mysqli_num_rows($result);
    
    while($row = mysqli_fetch_array($result)){
        $ary_area[] = $row["area"];
        $ary_areano[] = $row["area_no"];
    }
    
    if($count > 0){
    
        for($i=19;$i<23;$i++){
            $list_area .= " <input type="radio" name="chk_Area[]" id="chk_Area".$ary_areano[$i]."" value="".$ary_areano[$i]."" onclick="ChkArea()"><font face="arial" size="2" color="#3C5F84">".$ary_area[$i]."</font>&nbsp &emsp;&emsp;&emsp;&emsp;&emsp;n";
        }
    
        
    }

echo "<table align="center" border="0" width="95%" bordercolor="#DADADA" cellpadding="3" cellspacing="1">n";
echo  "<tr bgcolor="#F5F5F5"><td align="left" colspan="5">n";
echo  "<font face="arial" size="2" color="#3C5F84">&nbsp Request to Access &nbsp</font>";
echo  "&nbsp &nbsp ".$list_area;
echo  "</td></tr>n";
echo "<tr bgcolor="#F5F5F5"></tr>n";
echo  "</table>n";

?>

This one is for AsynReqData.

function AsynReqData(request,url,fn) {  // To send a request to a server
  request.open("GET", url + '&sid=' + Math.random(), true);
        request.onreadystatechange = eval(fn);
        request.send(null);
    }

This part is for approver_list.php.

<?php  
include("_dbconn.php");

$area = isset($_GET["area"])? $_GET["area"] : "";

if(substr($area,-1) == "|"){
    $area = substr($area,0,-1);
}
$area_list = explode("|",$area);

// print_r($area_list);
$area_clause = " area_no in ('" . implode("','", $area_list) . "')";

$ary_approver = array(
  "Lay Tian TAN"      => "[email protected]",
  "Ee-Liang LIM"      => "[email protected]",
  "Vikas JAIN"        => "[email protected]",
  "Joseph TEO"        => "[email protected]",
  "Soon Ik HONG"      => "[email protected]",
  "Cheng-Lay ANG"     => "[email protected]",
  "Tun TIN"           => "[email protected]",
  "Siong Loong WONG"  => "[email protected]",
  "TW TOH"            => "[email protected]",
  "David CHOI"        => "[email protected]",
  "Edwin FONG"        => "[email protected]",
  "Ken CHEW"          => "[email protected]",
  "Vincent TAN"       => "[email protected]"
);


$sql = "Select distinct(approver_name) from access_request.tbl_access_area where ".$area_clause."";
$result = mysqli_query($conn,$sql);

$cnt = 0;

echo "<table align="center" border="0" width="95%" bordercolor="#DADADA" cellpadding="3" cellspacing="1">n";
echo  "<tr bgcolor="#F5F5F5"><td align="left" colspan="5">n";
    echo  "<font face="arial" size="2" color="#3C5F84">&nbsp Approver &nbsp</font>";

    echo "&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;";

    while($row = mysqli_fetch_array($result)){
        foreach($ary_approver as $k => $v){


            if($k == $row["approver_name"]){
                echo "<input type="checkbox" id="chkApprover" . $cnt . "" name="chkApprover[]" value="$v" checked disabled><font face="arial" size="2" color="#3C5F84">". $k . "</font>";
                echo "<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;";
            }
        }
        $cnt++;
    }

    echo  "</td></tr>n";
    echo "<tr bgcolor="#F5F5F5"></tr>n";
    echo  "</table>n";

?>

I have an extension for Google Chrome where I attempt to trigger a click of a button on the page, then wait 2 seconds, then print a message. When the button is clicked, it turns blue to show that it has been selected.

let element = document.getElementsByClassName("Button Button--alt Button--custom move-action-btn roster-action-btn").item(0);
element.addEventListener(("click"), function(){
    console.log("clicked")
})
element.click()
sleep(2000)
console.log("done")

I would expect this to click the button (and I see it turn blue), log “clicked”, wait 2 seconds, then log “done”. However, it logs “clicked”, waits 2 seconds, logs “done”, then the button turns blue and appears to have been clicked, seemingly immidiately after it logs “done”.

If Javascript .click() is synchronous, why does the button appear to be clicked after the function is ran, and why is the actual result of the click after the event listener?

im importing a script that makes a element draggable in a vue component

var draggable = true
var drag_handle = null
export function set_draggable(value){
    draggable = value
    if(draggable)
    {
      drag_handle.style.cursor = 'move'
    }
    else
    {
      drag_handle.style.cursor = 'default'
    }
}
export function dragElement(element, header = null) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    drag_handle = header || element;
    drag_handle.onmousedown = dragMouseDown;
    drag_handle.style.cursor = 'move';
  
    function dragMouseDown(e) {
      if(e.button !== 0) return
      if(!draggable) return
      e = e || window.event;
      e.preventDefault();
      // get the mouse cursor position at startup:
      pos3 = e.clientX;
      pos4 = e.clientY;
      document.onmouseup = closeDragElement;
      // call a function whenever the cursor moves:
      document.onmousemove = elementDrag;
    }
  
    function elementDrag(e) {
      e = e || window.event;
      e.preventDefault();
      // calculate the new cursor position:
      pos1 = pos3 - e.clientX;
      pos2 = pos4 - e.clientY;
      pos3 = e.clientX;
      pos4 = e.clientY;
      // set the element's new position:
      element.style.top = (element.offsetTop - pos2) + "px";
      element.style.left = (element.offsetLeft - pos1) + "px";
    }
  
    function closeDragElement() {
      /* stop moving when mouse button is released:*/
      document.onmouseup = null;
      document.onmousemove = null;
    }
  }

That script exports two functions that have the following use:

The main function is the dragElement that injects drag capabilites.

The secundary one is set_draggable wich eneble/disable the drag capablites of the injected elements.

The problem is that im using those functions in a component that is replicated with a v-for. that is making the import of this js file multiple times, that causes the reference to the draggable and drag handle variables be lost, wich means that all variables from all instances of that component to reference to the last instance of that component

import {dragElement, set_draggable} from './plugins/drag.js'

The interpolateColors function from react-native-reanimated in a react native app causes the app to crash without warning.

interpolateColor is not supported in v2.

Is there an alternative solution? (Preferably one that is compatible with react-native-svg components).

It should be able to create an interpolated colour value that will be used for the stroke prop of a ‘Line’ SVG.

I’m trying to select some nested divs using puppeteer $$eval. I’ve copied the XPath of the DOm elements I need to select but seems not working.

    //XPath //*[@id="app"]/main/div/div/div[2]/div/div/div/div[1]/ul/li/a/span
    await page.waitForSelector('//*[@id="app"]/main/div/div/div[2]/div/div/div/div[1]/ul/li/a/span')
    const names = await page.$$eval('//*[@id="app"]/main/div/div/div[2]/div/div/div/div[1]/ul/li/a/span', (el) => {
        return el.map( n => n.innerHTML )
    })
    citiesList.push(names)

    //XPath //*[@id="app"]/main/div/div/div[2]/div/div/div/div[1]/ul/li/a
    await page.waitForSelector('//*[@id="app"]/main/div/div/div[2]/div/div/div/div[1]/ul/li/a')
    const href = await page.$$eval('//*[@id="app"]/main/div/div/div[2]/div/div/div/div[1]/ul/li/a', (el) => {
        return el.map( a => a.getAttribute('href') )
    })
    citiesLinks.push(href)

With this code I will get always this error

Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': '//*[@id="app"]/main/div/div/div[2]/div/div/div/div[1]/ul/li/a/span' is not a valid selector

How I can use xpath with $$eval correctly?

Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘file://’) does not match the recipient window’s origin (‘null’).

How to fix my problem?
I looked at the answers to this question on the forum but could not solve the problem.

<script type="text/javascript">
    const api = 'AIzaSyAZaaaXmvFvvvWkZ2bfffbz1oCAqvgSVOGYg'; // Specify your api key here

    // Load API library
    function onLoad() {
        if (api) {
            gapi.client.load('youtube', 'v3', loadYouTubeApi);
        } else {
            document.getElementById('output').innerHTML += 'API key has not been specified!';
        }
    }

    // Set API Key
    function loadYouTubeApi() {
        gapi.client.setApiKey(api);
        search('sitepoint');
    }

    // Call the search.list()
    function search(queryTerm) {
        let request = gapi.client.youtube.search.list({
            part: 'id',
            q: queryTerm
        });
        // Execute the request call and output it in HTML view
        request.execute((response) => {
            const responseString = JSON.stringify(response, '', 2);
            document.getElementById('output').innerHTML += responseString;
        })
    }
</script>
<script src="https://apis.google.com/js/client.js?onload=onLoad" type="text/javascript"></script>

i’m having a problem when i emit event from javascript to Livewire.

In my mount function i’m storing plan public propertie, when i emit the Livewire.emit(‘newSubscription’, setupIntent.payment_method); event from javascript to my component and i trying to get the plan propertie the value is the model but with empty properties.

Pay.php

class Pay extends Component
{
public $paymentMethod;
public $slug;
public $publicKey;
public $interval;
public $plan;
private $p;
public $payWithNewCard = false;

protected $listeners = ['newSubscription'];

public function mount($slug, $interval)
{
    $this->publicKey = config('cashier.key');
    $this->slug = $slug;
    $this->interval = $interval;

    $user = auth()->user();

    //Check if the user has a subscription
    if ( auth()->user()->subscribed('default') ) {
        return redirect()->route('billing.subscription');
    }

    if ( $interval != 'month' && $interval != 'year' ) {
        return redirect()->route('billing.premium');
    }

    //Get plan
    $this->plan = Product::select('products.slug', 
    'products.trial_period_days', 'prices.currency', 'prices.interval', 
    'products.stripe_product_id as product', 
    'products.name', 'prices.amount', 'products.trial_period_days', 
    'prices.stripe_price_id', 'prices.id as price_id')
    ->where('products.active', '=', '1')
    ->where('prices.active', '=', '1')
    ->where('products.slug', '=', $this->slug)
    ->where('prices.interval', '=', $this->interval)
    ->join('prices', 'products.id', '=', 'prices.product_id')->first();

    dump($this->plan);
    //If plan doesn't exists, redirect to premium
    if ( !$this->plan ) {
        return redirect()->route('billing.premium');
    }
}

public function render()
{
    return view('livewire.billing.pay', [
        'intent' => auth()->user()->createSetupIntent()
    ]);
}

public function newSubscription($paymentMethod)
{
    try {
        //TODO: Validate only trial in first time
        $user = auth()->user();

            //If user has payment method
        if ( $user->hasPaymentMethod() ) {
            $user->addPaymentMethod($paymentMethod);
        } else {
            $user->updateDefaultPaymentMethod($paymentMethod);
        }
        dd($this->plan);
        if ( $this->plan->trial_period_days ) {
            $result = $user
            ->newSubscription('default', $this->plan->price_id)
            ->trialDays($this->plan->trial_period_days)
            ->create(($paymentMethod) ? $paymentMethod : '');
        } else {
            $result = $user
            ->newSubscription('default', $this->plan->price_id)
            ->create(($paymentMethod) ? $paymentMethod : '');
        }
            
            return redirect()->route('billing.success');
        
    } catch ( IncompletePayment $exception ) {
        return redirect()->route(
            'cashier.payment',
            [$exception->payment->id, 'redirect' => route('billing.index')]
        );
    }
}

}

Pay.blade.php

<div class="container" x-cloak x-data="pay()" x-init="mount()">
<div class="mb-4 plan-selected mx-auto px-8 py-4 text-center bg-white rounded-lg shadow">
    <div class="flex justify-between">
        <div class="flex items-center">
            <h3 class="text-2xl font-bold font-heading">{{ $plan->name }}</h3>
        </div>
        <div>
            <span class="flex items-center justify-center text-2xl font-bold text-black font-heading">${{ $plan->amount }}<span class="ml-1 text-xs">{{ $plan->currency }}</span><span class="ml-1 text-xs">/ {{ $plan->interval }}</span></span>
            <div class="text-right flex flex-col">
                <a class="text-xs text-right ml-auto text-blue-500" href="{{ route('billing.premium') }}">Seleccionar otro plan</a>
                @if ( auth()->user()->hasDefaultPaymentMethod() )
                    <span class="text-xs text-right mt-4 ml-auto text-blue-500 cursor-pointer" x-on:click="payWithNewCard = !payWithNewCard">Elegir otro método de pago</span>
                @endif
            </div>
        </div>
        
    </div>
</div>
<div class="mb-4 plan-selected mx-auto px-8 py-4 text-center bg-white rounded-lg shadow">
    @if ( auth()->user()->hasDefaultPaymentMethod() )
        <div x-show="!payWithNewCard" x-transition>
            <!-- If the user has default payment method -->
            <x-button wire:loading.attr="disabled" wire:target="newSubscription" wire:click="newSubscription('{{ $plan->stripe_price_id }}')">
                <x-loading wire:target="newSubscription"></x-loading>
                Pagar con tarjeta terminación {{ auth()->user()->pm_last_four }}
            </x-button>    
        </div>
        <div x-show="payWithNewCard" x-transition>
            <!-- If the user doesn't has payment method, show form to add payment method -->
            <div class="">
                <div class="relative">
                    <form action="" id="card-form">
                        <div class="card-body">
                            <div class="flex space-x-8">
                                <div class="flex-1">
                                    <div>
                                        {{ $paymentMethod }}
                                        <input id="card-holder-name" placeholder="Nombre del títular de la tarjeta" type="text" class="form-control">
                                    </div>
                                    <div >
                                        <!-- Stripe Elements Placeholder -->
                                        <div class="form-control" id="card-element"></div>
                                        <span id="card-error"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="card-footer flex flex-col md:flex-row justify-end">
                        <x-button id="card-button" x-on:click="createPaymentMethod()"  data-secret="{{ $intent->client_secret }}">
                            <x-loading></x-loading>
                            Pagar
                        </x-button>
                    </div>
                    <div class="bg-red-700 mt-2 rounded text-white" id="cardErrors">
                    
                    </div>
                </div>
        </div>
            

    @else
        <!-- If the user doesn't has payment method, show form to add payment method -->
        @livewire('billing.payment-method-create', ['buttonText' => 'Pagar', 'name' => $plan->name, 'priceId' => $plan->stripe_price_id])
    @endif    
</div>
@push('scripts')
    <script>
        function pay()
        {
            return {
                payWithNewCard:false,
                stripe:null,
                elements:null,
                cardElement:null,
                cardHolderName:null,
                cardButton:null,
                clientSecret:null,
                mount()
                {
                    this.stripe = Stripe("{{ $publicKey }}");
                    this.elements = this.stripe.elements();
                    this.cardElement = this.elements.create('card');
                    this.cardElement.mount('#card-element');

                    this.cardHolderName = document.getElementById('card-holder-name');
                    this.cardButton = document.getElementById('card-button');
                    this.clientSecret = this.cardButton.dataset.secret;
                },
                async createPaymentMethod ()
                {
                    //TODO: Verify that card doesnt exists, if exists get the id and pass
                    this.payWithNewCard = true;
                    const { setupIntent, error } = await this.stripe.confirmCardSetup(
                        this.clientSecret, {
                            payment_method: {
                                card: this.cardElement,
                                billing_details: { name: this.cardHolderName.value }
                            }
                        }
                    );

                    if (error) {
                        document.getElementById('cardErrors').textContent = error.message;
                    } else {
                        Livewire.emit('newSubscription', setupIntent.payment_method);
                    }
                }
            }
        }
    </script>
@endpush

Image with dump when component is mounted

Image with dump after emit NewSubscriptionEvent

I have several functions in my function app. Is there a way to have a setup/bootstrapper function run before all functions? This would be something that maybe sets up some global variables, logging, etc. I’m it would just be an index.ts file that gets run before each function.

How do i automatically tab to this element and press enter when the page loads?
The element I am trying to use has this class d2l-contextmenu-ph but cant seem to tab to it.

let msg = document.querySelector(".d2l-contextmenu-ph ");

msg.addEventListener("keydown", (event) => {
   alert("test");
});

<div id="propertiesPlaceholderId" class="d2l-placeholder d2l-placeholder-live" aria-live="assertive">
                    <div id="d2l_1_69_681" class="d2l-floating-container d2l-hidden ">
                        <template id="OrgUnitEditorProviders$Plugins`1$PluginView$ouPropertiesContextMenu" class="d2l-contextmenu-template" data-floating-container-id="d2l_1_69_681" data-dropdown-content-id="d2l_1_70_789">
                        <d2l-menu class="d2l-menu-mvc d2l-contextmenu">
                            <d2l-menu-item text="Edit Properties" id="d2l_1_71_946"></d2l-menu-item>
                            <d2l-menu-item text="Delete Unit" id="d2l_1_72_494"></d2l-menu-item>
                        </d2l-menu>
                        </template>
                    </div><h3 class="d2l-heading vui-heading-3 d2l_1_73_408" id="OrgUnitEditorProviders$Plugins`1$PluginView$propertiesHeading">Properties</h3>
                    
          
                <d2l-dropdown-context-menu no-auto-open="" text="Actions for Org Unit Properties" id="d2l_1_74_921" class="d2l-contextmenu-ph d2l-contextmenu-ph-dropdown d2l_1_73_408" data-contextmenuid="OrgUnitEditorProviders$Plugins`1$PluginView$ouPropertiesContextMenu" data-placeholderkey="d2l_1_75_382">
                      
            
            <d2l-button-icon icon="tier1:chevron-down" text="Actions for Org Unit Properties" aria-haspopup="true" aria-expanded="false" type="button" data-js-focus-visible="">
            <button class="d2l-label-text" aria-expanded="false" aria-haspopup="true" aria-label="Actions for Org Unit Properties" id="d2l-uid-22" title="Actions for Org Unit Properties" type="button"> <d2l-icon class="d2l-button-icon" icon="tier1:chevron-down">hh</d2l-icon>
            
            <d2l-icon class="d2l-button-icon" icon="tier1:chevron-down"></d2l-icon>
            
            </button>
            
            </d2l-button-icon>
            
                    </d2l-dropdown-context-menu>
          
          
          <d2l-dropdown-menu no-pointer="" align="start" min-width="200" max-width="370" vertical-offset="12" id="d2l_48_1_419" class="d2l-dropdown-menu-contextmenu" no-auto-focus="" no-padding="" dropdown-content="" opened="" style="--d2l-dropdown-verticaloffset:12px; left: 785.375px;"><d2l-menu class="d2l-menu-mvc d2l-contextmenu" label="Actions for Org Unit Properties" active="" aria-label="Actions for Org Unit Properties" role="menu" style="height: 107px;">
            <d2l-menu-item text="Edit Properties" id="d2l_48_2_483" role="menuitem" tabindex="0" aria-disabled="false" aria-label="Edit Properties" first="true"></d2l-menu-item>
            <d2l-menu-item text="Delete Org Unit" id="d2l_48_3_770" role="menuitem" tabindex="-1" aria-disabled="false" aria-label="Delete Org Unit" last="true"></d2l-menu-item>
        </d2l-menu></d2l-dropdown-menu>

I am currently working for a freelance company and I am facing issue figuring out why the GA reports for transaction order is not matching with the order count in the database we have.

UseCase:- Whenever a user place a successful order he/she gets redirect to Order successfull page. On this page load we are loading the GA script from backend and once the page load is completed the track event call is triggered and an event for transaction gets captured in GA.

Issue:- For the past few months the discrepancy between GA and our database for authorized orders is more than 40%.

Anlaysis done till now:-

1. We checked from our backend if the script is generating successfully or not for the past few months. Whenever we pushed the script to the browser we record that entry in our database and we cross verified from this that there is no issue from backend on scripts generation.

2. To identify if the event was getting pushed to data layer properly or not we used Event Chimes to see if the orders which did not get pushed to GA were captured in event chimes or not. This helped us in verifying if events were getting pushed to GTM dataLayer or not. We verified we orders which were present in our DB but not in GA , we saw that those events were present.

So scripts were pushed to browser and getting triggered properly as well but somehow the track event for GA i.e collect call must not be getting triggered for those events somehow

3. We analysed all the orders for which script got generated from our DB against the orders present in GA to get the discrepancy % . Also we tried to figure out is it happening for a specific payment option, for any specific browser or due to any specific client(Iphone/Android). On studying and analysing the data we could not find anything specific.

Could anyone suggest something here if they faced any similar kind of problem?

Script which we are pushing from backend looks like this:-

analyticsScript = New StringBuilder()
            analyticsScript.AppendLine("<!-- Google Universal Analytics script -->")
            analyticsScript.AppendLine("<script>")

            analyticsScript.AppendLine("try")
            analyticsScript.AppendLine("{")
            analyticsScript.AppendLine("function PushTransactionToDataLayer() {")

            analyticsScript.AppendLine("    dataLayer.push({")
            analyticsScript.AppendLine("        'event': 'transaction', 'eventCategory':'Transaction', 'eventAction':'', 'eventLabel':'" + objReTransactionEnt.CheckoutType + "', ")
            analyticsScript.AppendLine("        'ecommerce': {")
            analyticsScript.AppendLine("            'purchase': {")
            analyticsScript.AppendLine("                'actionField': {")
            analyticsScript.AppendLine("                    'id': '" + TransactionId.ToString + "',")
            analyticsScript.AppendLine("                    'affiliation': '" + PhysicalStoreName + "',")
            analyticsScript.AppendLine("                    'revenue': '" + BuildTotal.ToString + "',")
            analyticsScript.AppendLine("                    'tax': '" + TAXTotal.ToString + "',")
            analyticsScript.AppendLine("                    'shipping': '" + ActualShippingCost.ToString + "',")
            analyticsScript.AppendLine("                    'currencyCode': '" + .Currency_ISO + "',")
            analyticsScript.AppendLine("                    'coupon': '" + .GiftVoucherCode + "'")
            analyticsScript.AppendLine("                },")
            analyticsScript.AppendLine("        'products': [")........
           .........