Posts tagged with reactjs

I'm attempting to retrieve the total order amount on a Stripe charge. It's different for every order. I need this value for Google Ads Dynamic conversions. My Question: How to I retrieve/return the order value after a payment?

//Stripe Payment Backend app.post('/create-checkout-session', async (req, res) => { const session = await stripe.checkout.sessions.create({ line_items: [ { // Provide the exact Price ID (for example, pr_1234) of the product you want to sell price: 'price_mypriceID', quantity: 1, }, ], mode: 'payment', success_url: `${YOUR_DOMAIN}/dashboard?success=true`, cancel_url: `${YOUR_DOMAIN}/dashboard?canceled=true`, }); res.json({url: session.url})  }); 

This code runs on a successful payment, triggering a Google Ads Conversion.

if (location == "?success=true"){ window.gtag('config', 'AW-myaccount'); window.gtag('event', 'conversion', {'send_to': 'AW-myaccount', 'value': {needToReturnDynamicValueHere}, <--------- This  'currency': 'USD' }); }, [location])

I'm attempting to add Google Ads conversion tracking within a React App. In this situation I need to set it up to trigger on click as opposed to page URL. Within the index.html I added the Google Tag and the Conversion Event Snippet without issues.

My Question: How do I now call the function on a React Component to trigger a conversion?

<!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=AW-______"></script> <script>window.dataLayer = window.dataLayer || [];   function gtag(){dataLayer.push(arguments);}   gtag('js', new Date());   gtag('config', 'AW-______');</script> 

Event Snippet:

<!-- Event snippet for Payment conversion page In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. --> <script>function gtag_report_conversion(url) {   var callback = function () {     if (typeof(url) != 'undefined') {       window.location = url;     }   };   gtag('event', 'conversion', {       'send_to': 'AW-_____/_____',       'transaction_id': '',       'event_callback': callback   });   return false; }</script> 

I got this error- TypeError: undefined is not a function (near '...interstitial.onAdEvent...')

I am using- npm i react-native-google-mobile-ads

Thank you in advance for your support.

import React, { useState, useEffect } from "react"; import { View, Button, Text, ScrollView, } from 'react-native'; import { AppOpenAd, InterstitialAd, RewardedAd, BannerAd, TestIds, AdEventType } from 'react-native-google-mobile-ads'; const TestAds = ({ navigation }) => {   useEffect(() => {       let  interstitial = InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL, {          requestNonPersonalizedAdsOnly: true,         keywords: ['fashion', 'clothing'],       });       let interstitialListener = interstitial.onAdEvent(type => {         if (type === AdEventType.LOADED){             interstitial.show();         }       });       interstitial.load();       return()=>{         interstitialListener=null;       };   }, []);     return (     <ScrollView>         <View>             <View style={{ marginTop: 20 }}>                 <Text>                     Lorem Ipsum is simply dummy text of the printing and typesetting industry.                     Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,                 </Text>             </View>         </View>     </ScrollView>   ) } export default TestAds 

The below code is working please check if I still missed anything else

useEffect(() => {     let interstitial = InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL, {         requestNonPersonalizedAdsOnly: true,         keywords: ['fashion', 'clothing'],     });     interstitial.addAdEventListener(AdEventType.LOADED, () => {         interstitial.show();     });     interstitial.load();     return () => {         interstitialListener = null;     }; }, []); 

I have a Facebook base code for lead tracking installed in my React app. All I want to do is to add fbq('track', 'Lead'); to my "Thankyou.jsx" component.

All examples I have seen used NextJs but I'm writing just React and Redux.

How do I add fbq('track', 'Lead'); in the react component where I want it to reside?

I've been trying to create conversions on Google Ads after implementing small fixes to my site on Netlify. The fixes include changing button colors, adding a new button, etc. So there was no change on the GTM script. However, conversion steps were changed after a successful build on Netlify. I tried to go back to the 3-step-conversion-creation which is the way I used before the fix, I also tried to add a GTAG script to do that. I couldn't find an answer to why it has changed steps on conversion creation, because it doesn't allow me to create conversion via Google Tag Manager. I managed to go back to 3-steps-method before, I had created a new Google Ads account, but I can't use that method this time. Why it has changed? Is it about react or netlify or something else? You can view the screenshots and index.html below:

Before fix:

After fix (Website already has GTAG and GTM):

index.html:

<!DOCTYPE html> <html lang="en"> <head>   <!-- Global site tag (gtag.js) -->   <script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXXXXX"></script>   <script>window.dataLayer = window.dataLayer || [];     function gtag() { dataLayer.push(arguments); }     gtag('js', new Date());     gtag('config', 'AW-XXXXXXXXXXX');</script>   <!-- Google Tag Manager -->   <script>(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', 'GTM-XXXXXXX');</script>   <!-- End Google Tag Manager -->   <title>Website</title>   <!-- Meta Pixel Code -->   <!-- End Meta Pixel Code --> </head> <body>   <div id="root"></div> </body> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0"     style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> </html>

Possible solutions to go back to 3-steps-conversion:

  • Delete BULK_ from the URL and press enter, it will direct there
  • Create a new Google Ads account but it is inconvenient and doesn't makes sense if you have balance, outsource data, etc. in that Google Ads account

Still, I have no idea why it has changed in that fix. It didn't happen on previous updates. I couldn't find any information about this. So I thought it might be related to the code. Thanks in advance.