Skip to main content

Google analytics tags

Olivier T. Bertrand

Hi,

I've succeeded to insert a google analytics tag on a button, using the html code editor

You can see the result at the end of this page: https://www.tothetop.io/service-fundraising-decks

A very small button called "test"

Yes this button doesn't take the attribute of the standard CSS for a button. How can I do so? what instruction to insert in the panel for css?

thanks in advance

0

Comments

15 comments

Date Votes
  • Kc George
    • Edited

    Hi Bertrand,

    Currently you are using this code on your page to report conversion.
    <button onclick="gtag_report_conversion('https://buy.stripe.com/6oE5kY9LN9fdfLieVf');">Test</button>

    There is a minor deviation from the prescribed code for reporting conversion. To fix this issue and to help stylize the button, kindly use this code. 
    <button class="button" onclick="return gtag_report_conversion('https://buy.stripe.com/6oE5kY9LN9fdfLieVf')">Test</button>

    To stylize the button, click on the Embed element, then select Settings - Styling - Advanced Tab and under the Custom CSS, kindly add this code and modify the styling according to your preferences.

    .button {
        background-color: purple;
        border-radius: 5px;
        font-weight: bold;
        font-size: 18px;
        font-family: monospace;
        color: white;
        padding: 20px;
        margin-left: 10px;
        text-align: center;
        cursor: pointer;
    }


    You have added the Google Tag also to the Embed element. The Google Tag must be added under CMS- Project Settings -Code - Code Injection > Header. Kindly delete it from the Embed element 

    0
  • Olivier T. Bertrand

    Hi George

    Thanks for the instruction regarding the button CSS.

    Regarding the google tag script, please note that I have one script with different gtag number, per event (button clic for instance)
    Does that mean that I should put all the different script in the page header, one after the other?

    0
  • Olivier T. Bertrand

    and in this case I don't understand how goolgle tag will differentiate the clicking on one button or another since all the button instruction is the same

    0
  • Olivier T. Bertrand

    I gave different name to the function like 

    gtag_report_conversion1

    gtag_report_conversion2

    etc...

    Is that correct

    0
  • Olivier T. Bertrand

    Lastly, I'd like to use the button class from the standard CSS of the website, namely "overpass", how do I do that?

    0
  • Kc George

    Hi Bertrand,

    Unfortunately we do not have expertise on setting up google tag with multiple gtag numbers. 

    Can you elaborate on using the button class from the standard CSS of the website, namely "overpass"?

    0
  • Olivier T. Bertrand

    Well, I tested this technique and it work, so I'll explain for the community

    It concerns the tags generated by Google Analytics, when you setup goals.

    Each script must have a distinct name (such as number in my example but text works too)

    One important thing, Google Analytics provide the script code (just follow their procedure) but it miss 2 lines preventing from working probably, they correspond to the value of the conversion. If you didn't set any value else you need 2 add the 2 following lines

          'value': 1.0,
          'currency': 'USD',

    and adapting to the value and currency you're using, those lines goes here:

    <!-- Event snippet for Example1 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_example1(url) {
      var callback = function () {
        if (typeof(url) != 'undefined') {
          window.location = url;
        }
      };
      gtag('event', 'conversion', {
          'send_to': 'AW-16540307889/wsdfasfdzlawZELGjhM89',
          'value': 1.0,
          'currency': 'USD',
          'event_callback': callback
      });
      return false;
    }
    </script>

     

     

     

    Then on each button you call the corresponding script

    0
  • Olivier T. Bertrand

    Regarding the CSS

    I'm using brizzy, with a home made layout using the CSS "overpass" that you are providing.

    In this CSS there's standard class that are set and that I can edit from this menu

    I'd like to call the class "button" from this CSS

    0
  • Olivier T. Bertrand

    so that the button use all the same class and look the same

    thanks in advance

    0
  • Ariel H.

    Hi Bertrand,

    Thank you for the update.

    To apply the colors from the Overpass color palette to your custom buttons, you can copy the individual color codes and assign them to your custom CSS.

    If assigning CSS individually to each button element seems tedious, you can also place the CSS code under "CMS - Project Settings - Code - Code Injection > Custom CSS". This will apply the styling to all buttons throughout your project.

    I hope this helps.

    Best regards,
    Ariel H.

    0
  • Olivier T. Bertrand

    hum... this is not my question

    I do NOT want to create any custom CSS

    My page is using the standard CSS you are providing which is named "overpass", that contain a class name Button (see screenshot)

    I have implemented the following code

    <button onclick="return gtag_report_conversion('https://buy.stripe.com/6oE5kY9LN9fdfLieVf')">Test</button>

    How do I call this specific class of the CSS overpass 

    What is the name of the class and how do I specify it should come from this CSS

    thanks in advance

     

    0
  • Olivier T. Bertrand

    PS

    When I use
    <button class="Overpass Button" onclick="gtag_report_conversion_meeting4('https://www.tothetop.io/meeting-30mn');">Meeting4</button>

    for instance

    it does not work, so I guess the CSS have another name in your system and the Button class maybe also another

     

    thanks for clarifying

    0
  • Kc George

    Hi Bertrand,

    One of the Global Typographies included with Brizy is named 'Button' which is a collection of a font, font size, font variations, line height and character spacing. It does not imply that there is a button style in CSS which can be applied to all HTML buttons.

    If your purpose is to stylize all your HTML buttons uniformly, the approach Ariel suggested above will work for you. For instance, kindly look at the three purple buttons at https://restaurant-1.brizy.site/ Those are HTML buttons and are stylized using CSS centrally located under CMS- Project Settings- Code - Custom CSS

          

    0
  • Olivier T. Bertrand

    Hi George

    Once again, I do NOT want to create a special style for my buttons, I want to use the standard style as defined in the standard CSS that is used for my website.

    Namely I use the Briny cloud standard CSS named Overpass (see picture above)

    What I need to know I how to call the standard CSS of my website (which is named Overpass) and the button class who is named "Buton" on brizy's editor (see picture above)

    Thanks in advance

    0
  • Kc George

    Hi Bertrand,

    We are not aware of a global button style that is part of the Brizy CSS. Hence I'm afraid what you are looking for may not be available in Brizy.

    The 'Button' you are referring to within the Overpass style is just a name assigned to one of the typographies. It doesn't define global attributes for buttons within the project.

    Since a global button class may not be available within Brizy CSS, creating your own button class may be the best solution.

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

Ask a Question