WordPress.org

Forums

How to Add "body onload" to a single page (30 posts)

  1. pgarvey
    Member
    Posted 1 year ago #

    I need to add an "onload" event on a particular page so Google can dynamically insert a trackable phone number in my page. This is known as "google forwarding numbers". I am not a developer, don't do PHP. My problem is, when Google says "add this snippet within the body tag", how do I do that? I have to execute the following on a single page:

    <body onload="_googWcmGet('number', '1-800-123-4567')">
    <span class="number">1-800-123-4567</span>
    </body>

    Any help would be much appreciated!!

  2. janet4now
    still awesome :)
    Posted 1 year ago #

    I think this will help you without having to get into templates and coding.

    http://www.wpbeginner.com/plugins/how-to-add-header-and-footer-code-in-wordpress/

  3. pgarvey
    Member
    Posted 1 year ago #

    Thanks Janet. I know how to add code to the header and footer though, which I typically do through the Theme editor. I already have several Google tracking scripts that I have added. In fact, I have already added the code for the _googWcmGet function which is the first step in making the forwarding numbers work.

    But in this case, Google is telling me to take an additional step and add code to the body of the page, and create this "onload" event. I don't see any Body tags anywhere...just a bunch of PHP.

    I don't think it would work to add this code to the header. Or am I wrong?

  4. pgarvey
    Member
    Posted 1 year ago #

    The Google instructions are here: https://support.google.com/adwords/answer/1722054?hl=en

    Navigate to "Track calls from a web site" / "Step 2: Paste the code into your website's HTML"

  5. jordydme
    Member
    Posted 1 year ago #

    Did you get this figured out? I have to do the same thing.

  6. roiabrazaldo
    Member
    Posted 1 year ago #

    make a specific php file for that page

    For Page: page-[slugname].php
    For Post: single-[slugname].php
    For Category: category-[categoryname].php
  7. dauidus
    Member
    Posted 1 year ago #

    ... or stick this where you want that number to appear.

    <?php if ( is_page('page-name') ) { ?>
    ...
    <?php } else {} ?>

    Change 'page-name' to your page slug, and you're good to go.

  8. jordydme
    Member
    Posted 1 year ago #

    dauidus, thanks but I'm not sure you fully understand what I want to do. I also want to insert a bit of code in the body tag itself for specific pages, like so...

    <body onload="_googWcmGet('number', '1-800-123-4567')">

  9. pgarvey
    Member
    Posted 1 year ago #

    Thanks Jordydme for chiming in! Dauidus and rolabrazaldo, thanks as well. Rola, I assume by "specific php file", you are saying create a new template, then build the page with this new template, and that this template could have a body tag in it. Correct? I don't see any body tags in any of the existing php files. Should I copy one, like page.php, and then simply add a body tag at the end?

  10. jordydme
    Member
    Posted 1 year ago #

    There's got to be an easier way than that.

  11. pgarvey
    Member
    Posted 1 year ago #

    I agree, but I would build a new php file if that would do the trick, because that is quite easy to do, as long as you have ftp access to the files...you just duplicate an existing one and give a new name...then it shows up in your theme editor in WP. And then you can just choose it as your template while you build your page in WP.

    The trick is, how to build that php file to contain the body tag and the body onload instruction?

  12. Burnspot
    Member
    Posted 12 months ago #

    We're trying to figure out this exact thing as well. Google's a bit sloppy with this program as the script they want you to insert between the head tags lacks the surrounding script tags....something they acknowledged over the phone with us after we brought it up. Anyway, I think the solution might be to just to copy the header file (if you're using a Master/Child theme setup) into your child theme's directory and add the onload code to it.

  13. adamSwagger
    Member
    Posted 12 months ago #

    Many times the <body> tag is in the theme's header.php file. It sounds like you already edited that file and know where it is. I would do a ctrl+f to find body. Often, the body tag includes PHP already. It could look like this:
    <body <?php body_class(); ?>>

    In that event, just add the onload before or after the PHP:
    <body <?php body_class(); ?> onload="_googWcmGet('number', '1-800-123-4567')">

    Hope that helps :-)

    P.S. I just added that same call conversion code to my site yesterday and have not gotten it to work. I tested it with a test function and the onload did work:

    <script>
    function testFunction(){alert("This Works");}
    </script>

    <body <?php body_class(); ?> onload="testFunction()">

    This leads me to believe I either have to wait a few more days to see this Google code working or something else is going wrong. Good luck to you all

  14. Burnspot
    Member
    Posted 12 months ago #

    We got the code to work eventually...but it was a process. We use the Genesis theme platform for most of our websites. I copied over the header.php file from Genesis into our child theme and added the onload tag to the body tag there (after the PHP body_class part, yes). There's probably a more elegant solution, but the goal was just to get the code to work. At that point, we had the onload code, the HEAD conversion code, and the class tag around the phone number, but nothing was working. Then a Google engineer sent us a new block of HEAD conversion code to try, replacing the original. Magically, everything started to work...

    We gave our feedback to them about the process. I think it's still a half-baked system at this point.

  15. jordydme
    Member
    Posted 12 months ago #

    Burnspot, would you mind posting the header code and and other code used. I'm sure there are many that would appreciate it. Myself included. :-)

  16. Burnspot
    Member
    Posted 12 months ago #

    Heh, well, this is funny. I just went through and compared the original HEAD code provided by the AdWords interface to the code the Google engineer sent us...it is a MATCH except that the AdWords interface doesn't provide it with the opening and closing <script> tags. I didn't compare this code earlier simply because the "new" code was sent to me late in the evening, at home....just plugged it in and let it go. With that, I have a feeling this is more about an adjustment made by Google on their end (either that or they thought we copied it wrong and wanted to check).

    Anyway, the call conversion code that goes in the <head> area is the code provided through the AdWords Call Conversions page...just add <script> to the front and </script> to the end of it when placing it. Probably not wise to post it here as I think it might contain a client identifier. In our case, I just plopped the code into Genesis' Theme Settings, the Header/Footer Scripts area. So long as the code ends up before the closing </head> in your particular theme, you should be fine.

    The body tag on the child theme's header.php file looks like this:
    <body <?php body_class(); ?> onload = "_googWcmGet('phone','AdWordsphone-Number-Here')">
    I added it as mentioned in my previous post...copying over the header.php file to our child theme from the master Genesis installation and manually editing the <body> tag.

    The client in question has two phone numbers in the body of their home page, the "phone" class, which is referenced by the ONLOAD code, surrounds both of them so that they are changed to the AdWords-provided phone number when a visitor comes into the site from an AdWords clickthru:
    <h5 class="phone">Call FIRST NUMBER / SECOND NUMBER</h5>

    That's what worked for us. Of course, the inbound must have clicked on an AdWords Ad to see it. After we installed it, the engineer we'd been working with checked it and sent us a verification email that it was working properly.

  17. jordydme
    Member
    Posted 11 months ago #

    Thanks for posting that Burnspot. Using your method, one would have to have that code on every page. Anyone know how you would apply this code to body tag on specific pages?

  18. adamSwagger
    Member
    Posted 11 months ago #

    Give this a shot, replace "testimonials" with the name of your page:

    <body <?php body_class(); if (is_page('testimonials')){ echo "onload=\"myfunction('phone','800-555-1234')\" "; } ?> >

    And replace the 'phone' class and the number with yours.

    For multiple pages you can use is_page('testimonials' || 'about')
    For all pages except one use !is_page('testimonials')

    Hope that helps

  19. adamSwagger
    Member
    Posted 11 months ago #

    Oops, replace "myfunction" with "_googWcmGet" so it reads:

    <body <?php body_class(); if (is_page('testimonials')){ echo "onload=\"_googWcmGet('phone','800-555-1234')\" "; } ?> >

    That should work.

  20. cucubura
    Member
    Posted 11 months ago #

    Hi, here is a easy way to setup website call tracking on your genesis theme. It's super easy. I implemented it for a client and he paid me a mere $40 even though i asked for $200 so i got frustrated and decided to share it with others:)
    http://ecommppc.com/2014/09/19/setup-adwords-website-call-tracking-on-your-genesis-theme/

  21. fourwhitesocks
    Member
    Posted 4 months ago #

    Cucubura, I looked at your method but doesn't your method end up putting it on every page? I need to do the same but it's only supposed to go on the Contact page.....

    Genesis has an area at the bottom of every web page where you can add scripts, actually it exactly says: Suitable for custom tracking, conversion or other page-specific script. Must include script tags. Why wouldn't you just add to this section of just the one page you need it to be in??

    THANKS!!

  22. cucubura
    Member
    Posted 4 months ago #

    Yes, absolutely. You can implement it however you want. That's the beauty of coding.

    I just the particular method because my client had a phone in the header so had to do with site wide option:)

  23. fourwhitesocks
    Member
    Posted 4 months ago #

    Ok wow thank you the the quick reply!

    So would I put the On Body portion in the exact same area using my method?

  24. cucubura
    Member
    Posted 4 months ago #

    Yes, try that and if its not working then you can trouble shoot. Also have Google tag assistant for Google chrome handy to test.

  25. fourwhitesocks
    Member
    Posted 4 months ago #

    Ok great thanks! I will try that today and post back!

  26. fourwhitesocks
    Member
    Posted 4 months ago #

    Ok I added the Google script in the WordPress dashboard > pages > contact page > at the very bottom where in Genesis you can add scripts as I mentioned above and this is wrong because it places it outside of the body tag....

  27. cucubura
    Member
    Posted 4 months ago #

    hmm. You have to really figure out. Just place the JS script on the header and then onload code with the help of window onload.

    Siva

  28. fourwhitesocks
    Member
    Posted 4 months ago #

    Umm what do you mean

    onload code with the help of window onload ??

    I was also only given one code and my Adwords guy said to put it right after the opening body tag...

    Thanks for your help!

  29. trakwebster
    Member
    Posted 1 month ago #

    I think I can simplify a *part* of the problem.

    Assuming that you have solved the problem of "how to modify the body tag and add the onload function" then ...

    Assuming that you have solved that part for *ALL* pages (for example by editing the header.php file and simply editing the opening body tag) ...

    Then you only insert the CSS tagging on the numbers on pages or other places where you want the substitution to happen.

    For example, if you ONLY wanted the substitution to happen on your contact page, then on that contact page where the phone number normally occurs, you insert "<span class="number">1-800-123-4567</span>" instead of simply "1-800-123-4567"

    That css span is what causes the google function to rewrite your default number to the google call-tracking number. If you no gotto the css span, then no rewriting will occur, even though the opening body tag has loaded the google function.

    So we can control what pages are modified by editing the content of the pages where we desire the phone numbers to be re-written. But we can load the google function on every page, no problem.

  30. fourwhitesocks
    Member
    Posted 1 month ago #

    Thank you for that reply trakwebster.

    I ended up just kind of cheating on this a little because it was taking up too much time. In the end I just put it right at the bottom of my page...right in the text editor actually using the text version and it is working. It's not the best way to do it but seems ok. My Google Adwords acct is able to 'see' it ;-)

Topic Closed

This topic has been closed to new replies.

About this Topic